vue题2

104 阅读2分钟

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进行更新