美文网首页
vuex源码分析(二)——双向数据绑定

vuex源码分析(二)——双向数据绑定

作者: _hider | 来源:发表于2021-04-26 14:42 被阅读0次

本文参考珠峰架构公开课之vuex实现原理

vuex中如果state发生改变的时候会自动更新视图,此功能是借助vue本身的双向绑定功能:

class Store {
  constructor(options) {
    this.vm = new Vue({
      data() {
        return {
          temp_state: options.state
        };
      }
    });
  }
  get state() {
    return this.vm.temp_state;
  }
}
  1. Store类的构造器中实例化了一个Vue,并将options.state赋值给temp_state。赋值过程中会通过Object.definePropertyoptions.state的子属性做监听,当属性改变会触发视图的更新。

  2. 组件中读取vuexstate是通过this.$store.state.xxx来获取,而Store类中有个state的访问器属性,如下:

get state() {
  return this.vm.temp_state;
}

也就是说当组件中读取this.$store.state.xxx的时候,实际上读取的是temp_state的数据,因为temp_state是响应式数据,所以当vuex中的state更新的时候,会触发视图的更新,相当于通过class的访问器属性做了一层代理。

再进一步分析,双向绑定是一个发布订阅模式,在vue中,依赖是通过Object.defineProperty中的get进行收集,也就是当读取属性的时候。在组件中读取this.$store.state.xxx,实际读取的是temp_state,从而会触发temp_state的属性的get进行依赖的收集。当数据发生改变的时候,会触发Object.defineProperty中的set,将收集的依赖进行更新。

相关文章

  • vuex源码分析(二)——双向数据绑定

    本文参考珠峰架构公开课之vuex实现原理 vuex中如果state发生改变的时候会自动更新视图,此功能是借助vue...

  • Compute

    - 转换数据 - 双向绑定 Props或者Vuex - 日期合并拆分

  • vue源码探究(第六弹)

    vue源码探究(第六弹) 继续之前的,差不多到最后一part了,数据的双向绑定。 双向数据绑定 双向数据绑定是建立...

  • 前端面试题:VUE

    1. vue的双向数据绑定实现原理? 2. vue如何在组件之间进行传值? 3. vuex和vue的双向数据绑定...

  • vue

    1、vue的双向数据绑定实现原理 2、vue如何在组件之间进行传值 3、vuex和vue的双向数据绑定有什么冲突 ...

  • vue双向数据绑定vuex中的state

    vue双向数据绑定vuex中的state 在vue中, 不允许直接绑定vuex的值到组件中, 若是直接使用, 则会...

  • Vue提问系列

    1、说下Vue数据双向绑定的原理2、说说Vuex的作用以及应用场景3、说说Vue组件的数据通信方式4、Vue的源码...

  • 通过Vuex实现Input双向绑定

    通过Vuex实现Input的双向绑定 安装Vuex 引入Vuex 新建store.js 页面中绑定

  • vue 进阶

    插件 严格模式 vuex+ 双向绑定

  • vue双向数据绑定

    一、单选框的数据双向绑定 二、复选框的双向数据绑定

网友评论

      本文标题:vuex源码分析(二)——双向数据绑定

      本文链接:https://www.haomeiwen.com/subject/ekcjrltx.html