vue数据监测原理

在Vue中，可以通过对data数据的监测来实现对页面显示的更新。当数据有变化时，Vue会自动重新渲染页面，以达到实时更新的效果。但是对于一般的数据类型，Vue无法自动监测其变化。具体来说，Vue会在实例化时将每个属性转化为getter/setter，以便在数据变化时通知Vue。但是，当我们直接设置数组中的某个元素时，例如修改数组中的第一个元素arr[0]，Vue无法自动监测其变化，从而无法重新渲染页面。

var vm = new Vue({
el: '#app',data: {
arr: [1, 2, 3]}
}
)vm.arr[0] = 4 // 页面不会更新

为了解决这个问题，Vue使用了Object.defineProperty()方法来劫持数据变化，实现数据的监测。当用户试图改变数据时，Vue会拦截这个操作并执行自己定义的处理函数，再更新视图。

var obj = {
}
var value = 1Object.defineProperty(obj, 'key', {
get: function () {
console.log('get')return value}
,set: function (newVal) {
console.log('set')value = newVal}
}
    )obj.key // getobj.key = '123' // set

可以看到，当属性被get或者set时，Vue就可以派发Watcher实例来更新视图。而对于数组而言，Vue则通过利用数组的方法来实现这个功能。具体来说，Vue重写了数组的7个方法：push、pop、shift、unshift、splice、sort、reverse。然后再调用这些方法时，Vue能够知道数据已经改变，从而能够重新渲染页面。

vm.arr.push(4) // 页面会更新

总的来说，Vue数据监测原理的实质就是利用Object.defineProperty()劫持数据变化，并通过派发Watcher实例来更新视图，从而实现实时更新的效果。而对于数组而言，Vue则需要重写数组的方法，以便能够重新渲染页面。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！