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

  • 相关阅读:
    项目管理工具Redmine各功能测试
    TestLink学习八:TestLink1.9.13与Mantis1.2.19集成
    TestLink学习七:TestLink测试用例Excel转换XML工具
    Mantis1.2.19 在Windows 平台上的安装配置详解
    TestLink学习六:TestLink1.9.13工作使用小结
    TestLink学习五:TestLink1.9.13和JIRA6.3.6的集成
    TestLink学习四:TestLink1.9.13使用说明
    TestLink学习三:发送邮件的两种配置方法
    网页太长怎么截图?
    JIRA学习一:Windows下安装破解JIRA6.3.6
  • 原文地址:https://www.cnblogs.com/beginner2014/p/8647639.html
Copyright © 2020-2023  润新知