最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 请简述 Vue 响应式原理

    正文概述 掘金(zhangdebao)   2020-12-22   252

    请简述 Vue 响应式原理

    一、入口 initState()

    • 位置 src/core/instance/state.js
    • 响应式从init开始、init调用initState()初始话状态,initState中调用initData(),将data的属性,注入到vue实例,调用observe()将其转换成添加get, set方法转换响应式对象
    export function initState (vm: Component) {
      vm._watchers = []
      ...
      if (opts.data) {
        initData(vm)
      } else {
        observe(vm._data = {}, true /* asRootData */)
      } 
      ...
    }
    
    function initData (vm: Component) {
      let data = vm.$options.data
      ...
      // 响应式处理
      observe(data, true /* asRootData */)
    }
    

    二、observe(value)

    • 位置 src/core/observer/index.js
    • 判断如果不是对象,或者是虚拟节点, 直接返回
    • 如果value含有__ob__属性, 且是Observe类型, 则已经做响应式处理过, 返回ob, 如果没有处理过, 则创建new Observer(value)

    三、Observer

    • 位置 src/core/observer/index.js
    • 为value对象定义不可枚举的__ob__属性, 记录当前的observer对象
    • 如果对象是数组,调用 observeArray(value), 为数组中的每一个对象创建一个 observer 实例
    • 如果对象不是数组,调用walk(value),遍历对象中的每一个属性,调用defineReactive(obj, keys[i]),转换成 setter/getter

    四、defineReactive

    • 位置vue/src/core/observer/index.js
    • 为每一个属性创建dep对象, 如果当前属性值是对象, 递归调用observe(), getter为每一个属性收集依赖, 如果属性值是对象, 也需要为对象的每一个属性创建属性依赖, 最终返回属性值, setter设置新值, 如果新值是对象, 则调用observe,然后派发更新(发送通知),调用dep.notify()

    五、收集依赖

    六、Watcher


    起源地 » 请简述 Vue 响应式原理

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元