Vue.js在设计上使用MVVM模式。通过MVVM的模式拆分为视图和数据两部分,并将其分离。因此,你只需关心数据即可,DOM的事情Vue会帮你自动搞定。
Vue的生命周期钩子比较常用的有:
- created 实例创建完成之后钓鱼,此阶段完成了数据的观测等,但尚未挂载,$el还不可用。在需要初始化处理一些数据时会比较有用
- mounted el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始
- beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。
angularJS和vue的监测数据变化区别
1, 首先纠正误区,Angular并不是周期性触发脏检查。只有当UI事件,ajax请求或者 timeout 延迟事件,才会触发脏检查。Angular并不会遍历作用域的属性,它遍历的是监听器。一旦将数据绑定到UI上,就会添加一个监听器(watcher )。
angularJS 作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。
2, Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系;
Vue 会在初始化实例时对属性执行 getter/setter
转化过程(遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter),在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter
被调用时,会通知 watcher
重新计算,从而致使它关联的组件得以更新。
并不是所有情况下,脏检测性能都比不上观察者模式。例如:
for循环中对绑定在scope上的变量做自增操作,在脏检测的机制下,会等待到循环执行结束,然后一次更新,应用到界面上。 但是在基于setter的机制就惨了,每变化一次就需要更新一次,这样性能就会极低。两种不同的监控方式,各有其优缺点,最好的办法是了解各自使用方式的差异,考虑出它们性能的差异所在,在不同的业务场景中,避开最容易造成性能瓶颈的用法。(具体看参考文献 2)
参考文献:
1,《Vue.js实战》
3. vue官网 深入响应式原理