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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
vue 子组件和父组件传值的示例
Sep 11 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP四舍五入精确小数位及取整
2014/01/14 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
python绘制圆柱体的方法
2018/07/02 Python
python 把列表转化为字符串的方法
2018/10/23 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
AJAX的全称是什么
2012/11/06 面试题
公务员更新知识培训实施方案
2014/03/31 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
党员民主评议个人总结
2014/10/20 职场文书
颐和园英文导游词
2015/01/30 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python