文章目录
需要写成用return返回出数据的函数
其实vue的data有两种写法
函数写法:
data(){
return {
name:"xiaoming"
}
}
对象写法(会有控制台警告):
data: {
name:"xiaoming"
}
这两种写法会有什么不同呢?
我们知道我们写的一个个组件,相当于在写构造函数,当new Vue的时候,我们的构造函数就进行实例化了。例如我们有个Hello.vue组件。当我们采用对象的写法写data数据时,在vue的处理后大致会变成这样:
Hello.prototype.data = {
name : 'xiaoming'
}
这样,当这个组件复用多次,也就是实例化多次时,每个实例化对象的data都是这个构造函数原型上的同一个引用地址的对象。
那么当HelloA.vue组件修改了name,通过原型链修改了后,HelloB.vue组件中的name也会发生改变。
当我们采用函数的写法后,vue处理后大致会是这样:
Hello.prototype.data = function (){
return {
name : 'xiaoming'
}
}
当每个组件通过原型链使用data数据时,都会执行后返回一个独立的对象,互不干扰。
变量写在data外不具备响应式
vue只对放在data里的变量做响应式处理,所以你直接在data外的变量做修改是不具备响应式的。下面会有响应式原理的具体分析链接。
给对象添加新属性时,视图层不会刷新
比如data里一个对象obj : {}
。然后你加了个新属性 this.obj.val = 'xxx'
,视图层并不会自动刷新。可以用this.$set()
解决。
具体原因可以看【vue回顾系列】18-数据响应式原理之Object的变化侦测
原数组直接修改时,视图层不会刷新
比如this.arr[0] = 1
。必须用 this.$set(this.arr,0,4)
改变数组里的值,才能使得视图层改变。 对象的话则不会。
具体可看【vue回顾系列】22-数据响应式原理之Array的变化侦测
如果修改的变量并没有在视图层使用,则也不会刷新
可以用钩子函数来检测视图层是否更新
updated(){
console.log('更新')
},
在data中执行函数获取不到变量
data() {
return {
obj: this.init(),
obj1: {a: 1}
}
},
methods: {
// 表单数据初始化
init() {
this.obj = this.obj1 // 获取到的是undefined
}
}
具体原因个人现在也只是有猜测,证实之后再记录。
建议在created钩子中处理。