• vue 深入响应式原理


    vue最显著的特性就是不太引人注意的响应式系统(reactivity system),模型层(model)只是普通的javascript对象,修改它则更新视图view。这会让状态管理变得非常简单且直观。

    如何追踪变化?

    把一个普通javascript对象传给vue实例的data选项,Vue将遍历此对象所有的属性,并用Object.defineProperty把这些属性全部转化为getter/setter。Object.defineProperty是仅支持ES5,且无法shim的特性。这也就是vue不支持ie8及更低版本的浏览器。

    用户看不到getter/setter,但是在内部,他们让vue追踪依赖,在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时getter/setter的格式化并不同,所以你可能需要安装vue-detool来获取更加友好的检查接口。

    每个组件实例都有相应的watcher实例对象,它会在组件渲染的过程中把属性纪录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。

    变化检测问题

    受现代JavaScript影响,vue不能检测到对象属性的添加或删除。由于vue会在初始化实例时对属性执行getter/setter转化过程,所以属性必须在data对象上存在才能让vue转换它,这样才能让他是响应的。

    var vm = new Vue({
    data:{
    a:1
    }
    })
     
    // `vm.a` 是响应的
     
    vm.b = 2
    // `vm.b` 是非响应的
    vue不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactivity property)。然而它可以使用vue.set(object,key,value)方法将响应属性添加到嵌套的对象上:
    Vue.set(vm.someObject, 'b', 2)
     
    你还可以使用vm.$set实例方法,这也是全局vue.set方法的别名。
    this.$set(this.someObject,'b',2)
    有时你想向已有对象上添加一些属性,例如使用object.assign()或_.extend()方法来添加属性。但是,添加到对象上的
  • 相关阅读:
    收音机原理
    S3C2440之存储控制器学习记录
    南校十二天集训游记
    题解 洛谷 P2179 【[NOI2012]骑行川藏】
    题解 SP3734 【PERIODNI
    题解 洛谷 P4177 【[CEOI2008]order】
    题解 CF613D 【Kingdom and its Cities】
    题解 UVA11865 【Stream My Contest】
    题解 洛谷 P2046 【[NOI2010]海拔】
    Spring Bean管理(注解的方式)
  • 原文地址:https://www.cnblogs.com/susanws/p/7412276.html
Copyright © 2020-2023  润新知