一. vue2的响应式
Vue2的响应式原理主要是基于Object.defineProperty()方法实现的。在Vue2的数据劫持过程中，会对数据对象的所有属性进行监听，当数据发生改变时，依赖于该属性的视图会自动更新。
- 具体流程：
通过Object.defineProperty()方法，对数据对象进行劫持，为每个数据对象的属性都创建一个Dep对象。
当属性被读取时，会触发getter()方法，将视图添加到该属性的Dep对象中。
当属性被修改时，会触发setter()方法，通知Dep对象中所有的视图进行更新。
在视图更新时，Vue2采用的是异步渲染的方式，即将所有需要更新的视图都添加到一个队列中，然后在下一个事件循环中执行更新操作，这种方式可以避免频繁的更新操作导致的性能问题。同时，Vue2还对常用的数据类型（如数组、对象）进行了深度监听，并且提供了一些常用的修饰符（如.sync、.lazy等）来方便开发者进行数据的双向绑定和表单的操作。
- 核心理解:
对于对象来说: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
对于数组来说:通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
// 代码：
Object.defineProperty(data, 'count', {
get () {}, // 通过get方法获取数据
set () {} // 通过set方法更新数据
})
- 使用这种方式会造成的问题：
- 对象直接新添加的属性或删除已有属性, 界面不会自动更新
- 直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}
- The end…
如果您认真阅读至此，您现在已经掌握了的vue3项目脚手架的目录结构。如果喜欢这个帖子，请不要忘记点赞，留言，评论。
