zoukankan      html  css  js  c++  java
  • Vue.js 响应式原理

    数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。

    • How Changes are Tracked
    • check change notice
    • delcaring Reactive Properties
    • async update Queue

    如何追踪变化

    当把普通的JavaScript对象传递给Vue实例的data选项, Vue遍历这个对象的属性:

    使用Object.defineProperty()把属性{attr_name:  value}格式转化为 getter/setter对儿。

    个人理解:

    ruby中的方法,attr_write 和attr_read和getter/setter类似都是操作对象读/写的方法。

    普通JS对象内部的数据,每个数据(hash格式)被分配了getter/setter方法,用于进行读和写

    getter/setter用于追踪依赖, 在属性被访问和修改时通知变化。

    每个组件实例都有相应的watcher实例对象, 它会在组件渲染的过程中把属性记录为依赖dependency.

    之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。


     

    Object.defineProperty(obj, prop, descriptor)

    这个方法直接在一个对象上定义一个新的属性,或修改现有的属性,返回这个对象。

    • obj即对象
    • prop 对象属性的名字或符号Symbol, 用于被定义或修改
    • descriptor 被定义/修改的属性的描述

    属性desciptor在对象中有2种主要形式:

    • 数据描述符:  attr-name: value。writable: true/false (正常的新增属性和修改属性值)
    • 存取描述符号: 由一个getter/setter对儿函数来描述一个属性。用get, set方法来读/写属性值

    属性描述符号只能二选一。它们都是对象。

    get:一个函数,作为一个getter为属性服务。当属性被访问时,getter被调用。 this设置给对象

    set:一个函数, 作为一个setter为属性服务。当属性被分配时,setter和一个参数value被调用, 参数分配给属性。 this设置给属性被分配的对象。

    例子:

    var o = {a: 37}; // 创建一个新对象
    
    // 在对象中添加一个属性与存取描述符的示例
    var bValue;
    Object.defineProperty(o, "b", {
      get : function(){
        return bValue;
      },
      set : function(newValue){
        bValue = newValue;
      },
      enumerable : true,    #可以改变该描述符
      configurable : true    #该属性可以出现在对象的枚举属性中
    });
    
    o.b = 38;
    // 对象o拥有了属性b,值为38
    
    // o.b的值现在总是与bValue相同,除非重新定义o.b

    检查变化的注意事项

    Vue在初始化实例时对属性执行getter/setter转化过程。

    之后给实例添加的属性是非react的,因为没有getter/setter方法。也就没办法监听watcher。

    如果想要响应的属性,必须使用vm.$set(target, key, value)方法。新增属性到嵌套对象上。

    猜测这个方法又调用了Object.defineProperty()。


    声明响应属性

    Vue不可以动态添加根级别的相应属性。所以在初始化实例前需要声明一个根级别的相应属性。可以是空值。

    var vm = new Vue({
    data: {
    // 声明 message 为一个空值字符串
    message: ''
    },
    template: '<div>{{ message }}</div>'
    })
    // 之后设置 `message`
    vm.message = 'Hello!'

    异步更新队列

    (未理解)

    猜测:

  • 相关阅读:
    畅销书排行榜
    阿里云大数据产品体系
    天然气收费管理系统的研究与实现随笔
    Web端实现RTC视频特效的解决方案
    从0搭建在线聊天室,只需4步!
    技术干货 | JavaScript 之事件循环(Event Loop)
    C++20 四大特性之一:Module 特性详解
    Android Flutter 多实例实践
    网易云信线上万人连麦技术大揭秘
    Python + Pytest 自动化框架的用例依赖实操
  • 原文地址:https://www.cnblogs.com/chentianwei/p/9657357.html
Copyright © 2011-2022 走看看