- 为什么vue3.0要重写响应式系统?
- vue2.x: Object.defineProperty, 劫持对象属性,需要循环遍历对象每个属性进行劫持、没有劫持数组下标(因性能问题,没有实现)
- vue3.0: Proxy 监听整个对象,不需要循环遍历
流程
定义普通js对象data, Vue内部使用Object.defineProperty()将每个成员转化为getter/setter
模版会编译为render函数,由于render函数中访问了 data 中的成员, getter触发, 进行依赖收集.
点击按钮,修改data中的数据, setter被触发,自动通知之前收集到的依赖进行更新.
compisition API 设计动机
vue2.x散落在各个地方,修改麻烦,compisition修改在一块