vue定义data的三种方式和区别
前言最近在学习vue的时候，发现有时候data属性的书写状态有有所不同
在简单的demo中，data属性一般是以属性的方式出现的，而在稍微复杂的项目中，data往往是以函数的方式出现，那么这些书写的形式有什么差异呢？通过官方文档和别人的博客，将答案整理如下：
一、Vue定义data的三种方式
（一）定义为属性
new Vue({
el : '#app',
data : {
message : 'Hello, Vue~'
}
})
（二）定义为函数
new Vue({
el: '#app',
data:function( ){
return {
message: 'Hello, Vue~'
}
}
})
（三）定义为函数，满足ES6（ECMAScript 6.0 ）规范
和第二种类似,但语言更加简洁
new Vue({
el : '#app',
data(){
return {
'Hello , Vue'
}
})
二、上面三种写法的区别
在简单的vue实例应用中，三种写法几乎是没有什么区别的，因为你定义的#yanggb对象不会被复用。
但是如果是在组件应用的环境中，就可能会存在多个地方调用同一个组件的情况，为了不让多个地方的组件共享同一个data对象，只能返回函数。这个与JavaScript的作用域特性有关，函数自己拥有私有的作用域，函数之间的作用域相互独立，也就不会出现组件对数据的绑定出现交错的情况
作者：moutory
链接：https://www.jianshu.com/p/403319671733
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
页:
[1]