Vue监听数据的原理怎么监视对象中的数据？在vue2.x版本中，数据监听是通过Object.definePropert

怎么监视对象中的数据？

在vue2.x版本中，数据监听是通过Object.defineProperty这个API来实现的

vue会监视data中所有层次的数据，不管你藏得有多深。
如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API：Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)

如何监测数组中的数据？

在Vue 2中，底层是通过重写数组的原型方法来实现对数组变化的监听。具体来说，Vue 2使用了一个名为Observer的类来劫持数组的原型方法，使其在调用这些方法时能够触发相应的变化通知。

当Vue 2初始化一个响应式对象时，如果对象是一个数组，Vue会将数组的原型指向一个经过改造的Array原型对象。这个改造后的原型对象中重写了数组的一些常用方法，如push、pop、shift、unshift、splice、sort和reverse等。当调用这些方法时，Vue会在内部进行一系列的操作，包括触发变化通知、更新视图等。

所以在Vue修改数组中的某个元素实现响应式一定要用如下方法：

（1）使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
（2）Vue.set() 或 vm.$set()也可以实现响应式，第二个参数写索引，第三个写元素，可以改也可以加
（3）watch 监听某一个数组的长度变化

$watch: {
    arr: function(value, oldValue) {
        console.log(value, oldValue, 'length changed');
    },
    immediate: true // 存在，现在就监听
}

如果大家喜欢，欢迎点赞或留言哈💕~~~~，谢谢大家⭐️⭐️⭐️~~~

近期热门文章

专栏推荐

推荐一下自己的专栏，欢迎大家收藏关注😊~