vue实现双向绑定和依赖收集遇到的坑


Posted in Javascript onNovember 29, 2018

在掘金上买了一个关于解读vue源码的小册,因为是付费的,所以还比较放心

在小册里看到了关于vue双向绑定和依赖收集的部分,总感觉有些怪怪的,然后就自己跟着敲了一遍。 敲完后,发现完全无法运行,  坑啊,  写书人完全没有测试过。

然后自己完善代码, 越写越发现坑, 问题有些大。。。。。。

最后自己重新实现了一遍,代码较多。 用到观察订阅者模式实现依赖收集, Object.defineProperty() 实现双向绑定

/*
  自己写的代码, 实现vue的双向绑定和依赖收集
  场景: 多个子组件用到父组件data中的数据, 当父组件data中的此数据发生改变时, 
  所有依赖它的 子组件全部更新
  通常子组件的从父组件中拿取的数据不允许发生改变
*/
  //订阅者 Dep
  //一个订阅者只管理一个数据
  class Dep {
    constructor () {
      this.subs = []  //存放vue组件
    }
    addSubs (sub) {
      this.subs.push(sub)
      console.log('add watcher: ', sub._name)
    }
    notify () {
      this.subs.forEach( sub => {  //通知vue组件更新
        sub.update()
      })
    }
  }
  //监听者
  //一个vue实例包含一个Watcher实例
  class Watcher {
    // 在实例化Watcher时, 将Dep的target指向此实例, 在依赖收集中使用
    // 因为依赖收集是在组件初始化时触发的, 而数据变更后视图相应变更是在初始化后
    // 所以让Dep.target指向此实例, 当此vue实例初始化完成后, 再指向下一个正在初始化的vue实例完成依赖收集
    constructor (name) {
      Dep.target = this
      this._name = name
    }
    update () {
      // 这里模拟视图更新
      // 其实还应该让子组件的props相应值与父组件更新的数据同步
      console.log("子组件视图更新了..." + this._name)
    }
  }
  //对data中的数据设置读写监听, 并且创建订阅者, 用于收集子组件的依赖和发布
  function defineReactive (obj, key, value) {
    // 对vue实例中data对象的每一个属性都 设置一个订阅者Dep
    let dep = new Dep()
    // 第二个vue实例的监听 覆盖了第一个vue实例的监听, 因为引用的obj是同一个
    Object.defineProperty(obj, key, {
      configurable: true,
      enumerable: true,
      get () {  
      // 在读此属性时, 将当前 watcher 对象收集到此属性的 dep 对象中
      // 在实例化vue时将Dep.target指向当前Watcher
      // get()依赖收集的时候是vue组件初始化的时候, set()是在初始化后
        if (dep.subs.indexOf(Dep.target) === -1) {
          dep.addSubs(Dep.target)
        }
        //return obj[key]   此写法报错 提示栈溢出 原因是无限调用get()
        return value
      },
      set (newVal) {  // 此属性改变时, 通知所有视图更新
        if (newVal !== value) {
          value = newVal
          dep.notify()  
        }
      }
    })
  }
  //接收一个对象作为参数, 将该对象的所有属性调用defineReactive设置读写监听
  function observer (obj) {
    if (!obj || (typeof obj !== 'object')) {
      return 
    }
    Object.keys(obj).forEach( key => {
      defineReactive(obj, key, obj[key])
    }) 
  }
  // 构造函数, 监听 配置options中的data()方法返回的对象的所有属性 的读写
  class Vue {
    constructor (options) {
      this._name = options.name
      this._data = options.data
      // 每个vue组件都是一个vue实例, 在一个页面中有多个vue实例
      // 在初始化该vue实例时, new一个Watcher对象, 使Dep.target指向此实例
      new Watcher(options.name)
      // 给data中的数据挂载读写监听
      observer(this._data)
      //模拟vue解析template过程, 获取从父组件传递过来的props
      //在这里进行依赖收集
      this._props = options.props ? getProps() : {}
      // 实例化该组件的子组件
      this._children = options.render ? (options.render() || {}) : {}
    }
  }
  // 父组件数据
  let data = {
    first: "hello",
    second: 'world',
    third: ['啦啦啦']
  }
  let times = 0
  // 第一次调用返回的是第一个子组件的从父组件继承的数据(vue中props属性的值)
  // 第二次调用返回的是第二个子组件的从父组件继承的数据(vue中props属性的值)
  function getProps () {
    times++
    if (times == 1) {
      let obj = {first: "", second: ""}
      Object.keys(obj).forEach( key => {
        // 如果是对象, 则进行深拷贝
        // 这里使用到了父组件的数据, 触发依赖收集
        if (data[key] instanceof Object) {
          obj[key] = JSON.parse(JSON.stringify(data[key]))
        } else {
          obj[key] = data[key]
        } 
      })
      return obj
    } else if (times == 2) {
      let obj = {first: "", third: ""}
      Object.keys(obj).forEach( key => {
        if (data[key] instanceof Object) {
          obj[key] = JSON.parse(JSON.stringify(data[key]))
        } else {
          obj[key] = data[key]
        } 
      })
      return obj
    }  
  }
   let vue_root = new Vue({
     name: 'vue_root',
     data,
     //模拟编译template和实例化vue的过程 
     //在编译父组件 并且传递参数给子组件时, 将子组件的 watcher 添加进父组件的 dep
     render () {
       let vue_1 = new Vue({
         name: 'vue_1',
         data: {},
         props: true,
         render () {}
       }) 
       let vue_2 = new Vue({
         name: 'vue_2',
         data: {},
         props: true,
         render () {}
       }) 
       return {
         vue_1,
         vue_2
       }
     }
   })
  console.log(vue_root)
   vue_root._data.first = 'hello hello'  // vue_1 和 Vue_2 都依赖此数据, 都更新
   vue_root._data.third = "aaa"      // 只有 vue_2 依赖到了此数据, 更新

总结

以上所述是小编给大家介绍的vue的双向绑定和依赖收集遇到的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
js中this的指向问题归纳总结
Nov 28 #Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 #Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 #Javascript
Vue触发式全局组件构建的方法
Nov 28 #Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 #Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
vue与原生app的对接交互的方法(混合开发)
Nov 28 #Javascript
You might like
PHP的面向对象编程
2006/10/09 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
Prototype框架详解
2015/11/25 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Python中tell()方法的使用详解
2015/05/24 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Python自定义线程池实现方法分析
2018/02/07 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
python 实现登录网页的操作方法
2018/05/11 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
在python shell中运行python文件的实现
2019/12/21 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
总经理文秘岗位职责
2014/02/03 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
工作时间证明
2015/06/15 职场文书
学生会任命书范本
2015/09/21 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书