vue 学习笔记

Posted 2020-10-28 MyZone

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实战》

2，AngularJS 脏检查深入分析

3. vue官网 深入响应式原理