• 响应式原理(对象)


    说起vue的响应式原理,大家也许只知道它的底层是对js的原生方法defineProperty的封装,而具体的实现却是一头雾水。下面我们就一探究竟。

    1、封装defineProperty

    主要目的:就是存取拦截;在get中收集依赖,在set中触发依赖;

    /**
     * 存取描述符
     */
    function defineReactive(data, key, val) {
      // 新增 递归子属性;
      if (typeof val === 'object') {
        new Observer(val)
      }
      let dep = new Dep()
      Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function () {
          // 收集依赖
          dep.depend()
          return val
        },
        set: function (newval) {
          if (val === newval) {
            return
          }
          val = newval
          // 通知触发收集的依赖项
          dep.notify()
        }
      })
    }
    

    2、封装 Dep的类;

    主要目的:用于处理依赖。

    class Dep {
      constructor() {
        // 收集依赖的集合
        this.subs = []
      }
    
      // 添加依赖;
      addSub(sub) {
        this.subs.push(sub)
      }
    
      // 删除依赖;
      removeSub(sub) {
        remove(this.subs, sub)
      }
    
      // 收集依赖
      depend() {
        // 假设我们把依赖存在 `window.target`上;
        if (window.target) {
          this.addSub(window.target)
        }
      }
    
      // 通知
      notify() {
        const subs = this.subs.slice()
        for (let i = 0; i < subs.length; i++) {
          subs[i].update()
        }
      }
    }
    
    function remove(arr, item) {
      if (arr.length) {
        const index = arr.indexOf(item)
        if (index > -1) {
          return arr.splice(index, 1)
        }
      }
    }
    

    3、观察者;

    作用:将一个数据内的所有的属性都转换成getter/setter的形式。然后去追踪他们的变化;

    class Observer {
        constructor(value) {
          this.value = value
          if (!Array.isArray(value)) {
            this.walk(value)
          }
        }
    
        // 此方法只在数据类型为对象时,调用;
        walk(obj) {
          const keys = Object.keys(obj)
          for (let i = 0; i < keys.length; i++) {
            defineReactive(obj, keys[i], obj[keys[i]])
          }
        }
      }
    

    4、Watcher;

    一个 Watcher 中介的角色,收集的依赖就是它。

    class Watcher {
        constructor(vm, expOrFn, cb) {
          this.vm = vm
          // 执行this.getter(),就可以读取data.a.b.c的内容
          this.getter = parsePath(expOrFn)
          this.cb = cb
          this.value = this.get()
        }
    
        get() {
          window.target = this
          let value = this.getter.call(this.vm, this.vm)
          window.target = undefined
          return value
        }
    
        update() {
          const oldValue = this.value
          this.value = this.get()
          this.cb.call(this.vm, this.value, oldValue)
        }
      }
    
    // 用于根据路径来读取属性的值;
      const bailRE = /[^w.$]/
    
      function parsePath(path) {
        if (bailRE.test(path)) {
          return
        }
        const segments = path.split('.')
        return function (obj) {
          for (let i = 0; i < segments.length; i++) {
            if (!obj) return
            obj = obj[segments[i]]
          }
          return obj
        }
      }
    

    5、使用;

    实现:vm.$watch()

    // 定义一个对象;
    var data = {
        name: '小红',
        age: 18,
        skill: {
          dance: '芭蕾舞',
          exercise: '跑步'
        }
      }
      // 观测所有的属性的变化
      new Observer(data)
    
      function Vm() {}
    
      Vm.prototype.$watch = function (obj, path, cb) {
        new Watcher(obj, path, cb)
      }
      var vm = new Vm()
    
      vm.$watch(data, 'skill.dance', (newVal, oldVal) => {
        console.log('我执行了', newVal, oldVal)
      })
    

    总结;

    vue通过对js的原生方法的封装;来达到对数据的访问和赋值的拦截,然后做执行自己的逻辑代码;

    要想达到对数据的响应,就要对数据进行处理,就是把用到这个数据的地方收集起来,然后当这个值发生变化时,通过便会通过触发get函数,来通知用到这个数据的地方,则其修改;

  • 相关阅读:
    Mysql删除数据库中所有表
    MySQL出现2059错误
    .NetCore笔记
    PLSql中文乱码
    Oracle误删除数据恢复。Oracle删除后恢复数据
    ora-28000:the account is locked,Oracle修改密码有效期,Oracle设置密码不过期
    Linux 常用命令
    Razor
    ORA-01578: ORACLE 数据块损坏 (文件号 13, 块号 2415081) ORA-01110: 数据文件XXXXXX
    ORA-01033:ORACLE initialization or shutdown
  • 原文地址:https://www.cnblogs.com/ywnh/p/12862547.html
走看看 - 开发者的网上家园