8、响应数据变化

 

1、对象的响应数据变化

　　只有在data里面初始化的数据才能实现响应式

　　data中的数据都会被转换为getter/setter,所以当数据变化时，自动更新在页面中

　　如果没有定义某个属性，那么就不能检测属性的变化

let vm = new Vue({
     el:'#app',
     data:{
         msg:'hello',
         objPrev:{} 
     } 
})

vm.objPrev = '后来改变的数据';
//此时改变此数据是不会产生页面中响应式变化的

如果想要实现响应式，需要一下方式

　　1）Vue.set(target,key,value)，静态方法set, 函数上挂载的方法称为静态方法，静态方法通过函数调用，原型实例上的方法叫原型方法，原型方法必须通过实例调用

　　　　这个方法主要用于避开Vue不能检测属性被添加的限制

　　2）vm.$set(target,key,value)

　　　　实例上的方法

　　3）替换对象,直接给对象赋值

　　　　vm.objPrev = obj

　　　　Object.assign()直接合并的对象是不响应的，assign返回的是第一个参数对象

　　　　注意对象不能是Vue实例，或者Vue实例的根数据对象　　

　　　　vm.objPrev = Object.assign({ },vm.objPrev,{abc:456}) //重新赋值一个新的对象，vue才会重新更新视图，赋值的同一个对象是不会更新视图的

 

2、数组的响应数据变化

数据劫持：将数据劫持之后，使用Object.defineProperty方法给数据加上getter和setter，形成响应式的数据

let vm = new Vue({
     el:'#app',
     data:{
         list:[1,2,3]
     } 
})

vm.list.push(1000);
//此处的push是变异方法，不是原生的，是vue内部把push改写了，这叫数据劫持

 提供了观察数组的编译方法，使用这些方法将会触发视图更新，push()、pop()、shift()、unshift()、splice()、sort()、reverse()，并且会改变原数组

map，find，filter是不会改变原数组的

动态改变：1、直接给数组赋值

　　　　　2、使用splice方法，而通过索引下标改变值不是响应式的，不能引起视图更新

　　　　　　this.arr.splice(0,1,"改变的值")，三个参数是可以改变值，也可以添加值

　　　　　3、直接改变数组的length也不是响应式的，如果想实现改变length来实现响应式，需要后面再配合arr.pus()使用、因为push会重新计算数组的长度

3、时间对象$event

methods的方法里面，如果不传参，会默认接收一个参数就是事件对象，如果传参数的话，需要将事件对象手动传到绑定函数里面

<button @click=goAction($event,'你好')></button>

 

转载于:https://www.cnblogs.com/gopark/p/11363086.html