const vm = new Vue({
el:'#app',
data:{
message:'aaaaaa',
user:{
name:'zhang-san'
},
list:['aaaa','bbbb','cccc'],
mylist:[
{name:'zhangsan',age:12},
{name:'lisi',age:33},
]
},
methods:{
show(){
// 这些操作都是无效的
//1.往根实例添加属性
this.text='mao dou mei you'
//2.往对象上新增属性
this.user.age=Math.random() * 100
//3.更改数组某一项
this.list[0]='111111111'
//4.更改数组长度
this.list.length=1
// 这个是有效的,因为数组每一项是对象
this.mylist[0].name=new Date().getTime()
}
}
})
对象
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data
选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty
是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data
对象上存在才能让 Vue 将它转换为响应式的。
可以使用 Vue.set(object, propertyName, value)
方法向嵌套对象添加响应式 property
Vue.set(vm.someObject, 'b', 2)
this.$set(this.someObject,'b',2)
数组
1、vue对于数组项是简单数据类型的情况没有劫持,这也导致了vue数组使用的一个问题,当数组项是简单数据类型时,修改数据项时视图并不会更新。
对于每项为简单数据类型的数组,可以这样去操作
//可以这样解决
//修改数组某个元素
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
//修改数组长度
vm.items.splice(newLength)
2、对于数组每一项为对象,Vue是遍历所有项,然后去劫持
function observeArr(arr){
for(let i=0; i<arr.length; i++){
observe(arr[i]) //伪代码,对每一项进行劫持
}
}
3、重写了7个可以改变原数组长度的方法(push, pop, shift, unshift, splice, sort, reverse
),这样当我们调用push 等方法修改数组的时候,视图才会更新