Vue2核心原理-依赖收集原理和响应式原理

·  阅读 508
Vue2核心原理-依赖收集原理和响应式原理

Vue框架

Vue与传统DOM框架的对比

传统DOM框架

如果有两处修改:

  1. 遍历DOM树获取DOM对象
  2. 确认需要操作的视图属性
  3. 更改对象的属性触发视图更新
  4. 视图执行一次更新
  • ......(重复上面的工作)
  1. 更改对象的属性触发视图更新
  2. 视图执行一次更新 所有视图内容更新完毕

Vue框架

如果有两处修改:

  1. 初始化框架构建虚拟DOM树
  2. 将响应式数据对象映射到虚拟DOM树中
  3. 更改需要更新的属性
  4. diff出变更项,得出更新进入更新队列
  5. 更改需要更新的属性
  6. diff出变更项,得出更新进入更新队列(4和6或可合并成一次diff)
  7. 将更新队列中的任务一次进入虚拟DOM中
  8. 将虚拟DOM中需要变更的部分一次设置到DOM对象中

对比总结出: 当页面有N步数据更新的时候就算N步数据是同时更改的,视图部分也会进行N次渲染。 而Vue框架是采用非直接DOM操作的方式进行页面渲染,这样可以将视图更新时的多次更改放到一个任务队列中,最终将本次更改的N次变化统一由一次渲染替换真实的DOM对象,这样可以实现N次变更,一次渲染,在性能上更优于传统的DOM框架。

Vue好处

  1. 响应式视图更新。
  2. 多次更改一次渲染
  3. 无需直接操作DOM。

Vue2

依赖收集原理

  1. 在初始化过程中(beforeCreate 和 created 之间) 拦截器(Object.defineProperty) 劫持了数据。
    // 劫持的过程中定义了观察者 dep
    var dep = function Dep () {
      this.id = uid++;
      this.subs = [];
    };
    复制代码
  2. 然后在元素挂载过程中(beforeMount 和 mounted 之间)触发了拦截器(Object.defineProperty) get ,get 方法里含有 dep.depend();
    • 观察者 dep 关联被观察者 watcher 的动作。
    Dep.prototype.depend = function depend () {
      if (Dep.target) {
        Dep.target.addDep(this);
      }
    };
    复制代码
    • watcher 的结构如下
    var Watcher = function Watcher(vm, expOrFn, cb, options, isRenderWatcher) {
      this.vm = vm; // 保存被观察的实例
      ... 
      this.cb = cb;
      this.id = ++uid$2; // uid for batching
      ... 
      this.expression = expOrFn.toString();// 触发实例的render方法
    };
    复制代码
  3. 完成了依赖收集。最终就是我们熟知的触发流程,更改state时,拦截器的 set 触发了 dep.notify() 通知了所有被观察者 Wacher,而一番排队操作后需而触发 watcher 里的表达式,就去重新渲染这个组件。
    • 观察者和被观察者就是这样的结构:一个依赖下包含多个watcher,
    Dep {
      id: n,
      subs: [
        0: Watcher {
          ...
          // render 函数就是就是输出虚拟节点的
          expression: "function () { vm._update(vm._render(), hydrating); }"
          ...
        }
      ]
    }
    复制代码

响应式原理

function updateView() {
    console.log('视图更新')
}

function defineReactive(target, key, value) {
    Object.defineProperty(target, key, {
    	get() {
        	return value
    	},
        set(newValue) {
            if (newValue !== value) {
                value = newValue
                updateView()
            }
        }
    })
}

function observe(target) {
    if (target === null || typeof target !== 'object') {
        return target
     }
    for(let key in target) {
        defineReactive(target, key, target[key])
    }
}

const data = {
    name: '张三',  
    age: 21
}

observer(data)

data.name = 'lisi'
复制代码

oberve函数判断源数据是否是对象,然后遍历,将源数据、键值、属性值传入defineReactive函数中。

defineReactive函数中通过Object.defineProperty对对象的每一项进行监听,如果修改了对象就触发了updateView函数。

Object.defineProperty实现的响应式

Object.defineProperty:方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

Object.defineProperty存在的缺点:

  1. Object.defineProperty不能深度监听data变化
    • 在vue初始化时会递归data对象中每一个值,给予绑定get、set方法
  2. Object.defineProperty不能监听新增、删除属性
    data.sex = 'man' 
    delete data.name
    复制代码
    • vue2通过Vue.set和Vue.delete来进行新增和删除属性
    • 也可通过使用$forceUpdate强制渲染
  3. Object.defineProperty不能监听数组变化
        const data = {
            nums: [1, 2, 3]
        }
    
        data.nums.push(4)
    复制代码
    • vue2通过重写数组的方法属性实现监听数组变化

      const arrProto = Object.create(Array.property)
      // 数组的方法名称
      let arrFn = [
          'push',
          'pop',
          'shift',
          'unshift',
          ...
      ]
      arrFn.forEach(method => {
      	arrProto[method] = function() {
              // 视图更新
              updateView()
              Array.propery[method].call(this, ..arguments)
          }    
      })
      复制代码
    • 当data中的某一项是数组时,在observe函数中遍历进入defineReactive中,然后进行深度监听,如果是数组的话,就会将此数组的原型指向为arrProto,此时当前数组调用的数组方法,就会执行updateView()和数组原型的方法。

      function observe(target) {
          if (target === null || typeof target !== 'object') {
              return target
           }
          if (Array.isArray(target)) }{
              target.__proto__ = arrProto
          }
          for(let key in target) {
              defineReactive(target, key, target[key])
          }
      }
      
      复制代码
      • demo: 当执行数组方法时,data.nums.push(4):
        ① 进入observe函数
        
        …
        
        ② forin…循环遍历数组每一个值
        
        ③ 进入defineReactive
        
        ④ 深度监听,进入observe
        
        …
        
        ⑤ 判断是否是数组
        
        ⑥ 将数组的原型指向arrProto
        
        ⑦ 执行updateView
        
        ⑧ 执行Array.prototype的push方法
        复制代码

存在的问题

当我们使用vm对象更新对象中中初始化就存在的属性时 视图会自动触发更新,而当我们对对象内部不存在的 属性设置值的时候视图不更新,这是因为Vue2.x底层的数 据响应式系统使用的是Object.defineProperty()来实现的。 Vue在初始化的时候会递归的将data选项中的属性绑定 setter和getter,通过两者来观察属性的行为,一旦初始 化完成便不会再次执行本操作,所以更改已知属性的时候 Vue实例是有感知并执行默认处理行为的,当我们操作对 象内部不存在的属性时由于其没有setter和getter,Vue将 无法观察到这些属性的赋值和取值,视图更新操作也无法进行。

Vue3

Vue2都出了,Vue3还会远吗

作者正在编写中...

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改