Vue数据劫持的原理和具体实现细节是怎样的？

本文共计2439个文字，预计阅读时间需要10分钟。

目录+前言+创建Vue实例+数据观测存在的问题+结语+前言+Vue+会对我们在data中传入的数据进行拦截：+对象：+递归的为对象的每个属性设置get/set方法+数组：+修改数组的原型方法，实现响应式+结语

目录

• 前言
• 创建Vue实例
• 数据观测存在的问题
• 结语

前言

Vue会对我们在data中传入的数据进行拦截：

• 对象：递归的为对象的每个属性都设置get/set方法
• 数组：修改数组的原型方法，对于会修改原数组的方法进行了重写

在用户为data中的对象设置值、修改值以及调用修改原数组的方法时，都可以添加一些逻辑来进行处理，实现数据更新页面也同时更新。

Vue中的响应式(reactive): 对对象属性或数组方法进行了拦截，在属性或数组更新时可以同时自动地更新视图。