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改写了,这叫数据劫持

猜你喜欢

转载自www.cnblogs.com/gopark/p/11363086.html
今日推荐