zoukankan      html  css  js  c++  java
  • vue 学习笔记(一)

    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官网 深入响应式原理

  • 相关阅读:
    hdu2037 今年暑假不AC[贪心][区间调度问题]
    Features Track[STL map]
    Characters with Hash[签到题]
    hdu2094产生冠军[STL set]
    2018ECNA Difference[时空复杂度]
    hdu1276士兵队列训练问题[简单STL list]
    20190815网络与信息安全领域专项赛线上赛misc WriteUp
    hdu1873 看病要排队[优先队列]
    Pygame 贪吃蛇
    Windows安装Python3 curses模块
  • 原文地址:https://www.cnblogs.com/beginner2014/p/8647639.html
Copyright © 2011-2022 走看看