computed、methods、watch使用与区别?
computed:计算属性,在getter执行完后会有缓存(基于依赖进行缓存),只有依赖值发生变化,才会重新调用getter求值,适用于比较消耗性能的计算场景
methods:方法,可以进行属性的修改和返回,没有缓存,就是普通的function域
watch:
更多的是观察作用,类似于某些数据的监听回调,观察$emit、props和组件本身值的变化,数据变化时通过回调进行后续操作;
没有缓存,页面重新渲染,数据即使不变化也会重新渲染
可以支持异步操作;
vue如何实现双向数据绑定?
利用Object.defineProperty来劫持对象的访问器,当属性值发生变化时,根据变化进行响应
proxy与Object.defineProperty的优缺点?
proxy可以监听对象而非属性
proxy可以直接监听数组
proxy返回的是一个新对象,可以通过操作新对象达到目的,而Object.defineProperty只能通过遍历对象属性来进行修改
proxy有多达13中的拦截方式,不仅限于apply、ownKeys、deleteProperty、has等
proxy作为新标准将会受到浏览器厂商的重点性能优化
Object.defineProperty的兼容性较好,支持IE9
如何理解vue的响应式系统?
每一个vue component组件都有一个对应的watch实例
vue的data上的数据会添加getter和setter属性
当vue component上render执行时,data上会被触碰(touch),即被读,getter方法会被调用,此时vue会去记录vue component所依赖的所有data(这一过程称为收集依赖)
当data数据改变时,主要是用户写时,会调用setter方法,通知依赖data的所有组件,重新调用它们的render进行更新