v-model实现双向绑定 可以同时改变变量状态 比如input 输入 span的就会即时展示 可以做到同步 如果是用原生js实现 就是change事件然后操作span 节点,来完成内容的改变,从而达到这样的效果。
分析如下:每次触发change事件或快或慢这样就需要防抖节流来提升用户体验,事件触发的结果又是异步操作,异步又是函数,函数又有闭包,执行栈等等一系列的浏览器js问题。
而vue使用object.definePrototype来对对象属性重写,从而实现监听的效果,之间有很多复杂的操作
data里面的数据有简单字符串有复杂的引用类型, vue会给他们做对应的处理,在第一次监听的时候 会给一个标记,避免下次重复监听,来消耗资源, 对数组的操作监听 可以用栈 队列的形式,push pop,UNshift shift sort reserve slice(这个不是因为数组与字符串的可以用) splice 而对于对象字面量 比如 {a:123,b:{c:1}}
vue会去做判断 属性是不是对象 如果是就进行再次重写get set Object.defineProperty({},‘x’,{ enumerable: true, writable: true, configurable: true, set(){ }, get(){ } }) 一般进行判断如果是冻结对象 比如File对象就不会自己重写,而仅仅只是观测维护起来。
把观测的对象 observer 进行响应式重写, get触发收集 缓存队列 set触发改变 通知队列 观察者渲染组件视图