脚本宝典收集整理的这篇文章主要介绍了

Vue 动态数据绑定三大难点

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

动态数据绑定的三个难点:

  • 对象深度问题

  • 设置新对象是否能够继续响应getter 和 setter

  • 考虑传递回调函数

本文的目的


  1. 在实践中使用递归思想

  2. 了解设计模式中的“发布-订阅模式”

三大难点

  1. 如果传入参数对象是一个“比较深”的对象(也就是其属性值也可能是对象),那该怎么办呢?举个例子。

// 一个“比较深”的对象:某些属性的值也是一个对象
let obj = {
     a: 1,
     b: 2,
     c: {
          d: 3,
          e: 4
      }
}
  1. 如果设置新的值是一个对象的话,新设置的对象的属性是否能能继续响应 getter 和 setter。举个例子。

// 一个“比较深”的对象:某些属性的值也是一个对象
 let app1 = new Observer({
         name: 'youngwind',
         age: 25
 });

 app1.data.name = {
         lastName: 'liang',
         firstName: 'shaofeng'
 };

 app1.data.name.lastName;
 // 这里还需要输出 '你访问了 lastName '
 app1.data.name.firstName = 'lalala';
 // 这里还需要输出 '你设置了firstName, 新的值为 lalala'
  1. 考虑传递回调函数。在实际应用中,当特定数据发生改变的时候,我们是希望做一些特定的事情的,而不是每一次都只能打印出一些信息。所以,我们需要支持传入回调函数的功能。举个例子。

let app1 = new Observer({
         name: 'youngwind',
         age: 25
 });

 // 你需要实现 $watch 这个 API
 app1.$watch('age', function(age) {
         console.log(`我的年纪变了,现在已经是:${age}岁了`)
 });

 app1.data.age = 100; // 输出:'我的年纪变了,现在已经是100岁了'

解决方法

  1. 对象深度问题解决方法

       walk(obj){
           let val;
           for(let key in obj){
               // 这里为什么要用hasOwnProperty进行过滤呢?
               // 因为for...in 循环会把对象原型链上的所有可枚举属性都循环出来
               // 而我们想要的仅仅是这个对象本身拥有的属性,所以要这么做。               
               if(obj.hasOwnProperty(key)){
                   val = obj[key];
                    //第一大难题:初始化深对象解决问题 这里进行判断,如果还没有遍历到最底层,继续new Observer
                   if(typeof val === 'object'){
                       new Observer(data)
                   }
                   this.convert(key,val);
               }
           }
       }

使用递归的方式 . 利用 typeof 来检查 val 是否是 object 对象 ,如果是则进行递归,检查其子属性...递归..

  1. 设置新对象是否能够继续响应getter 和 setter

        set: function (valnew) {
            self.watch[key](valnew) // 回调监听 取代下面那条语句
            //console.log(`你设置了 ${key}, 新的值为${valnew}`);
            if (typeof newVal === 'object') {
                new Observer(valnew);
            }
            if (valnew === val) return;
            val = valnew

        }

同第一个难点,在 setter 处,判断改变后的属性值是否是对象 如果是对象 则再重新new 一个Observer出来

  1. 考虑传递回调函数

$watch(key,callback){
       this.watch[key] = callback;
}

仿照 JavaScript 设计模式 发布-订阅模式 来写一个进行 setter 时,触发函数

源码:Vue 动态数据绑定三大难点解决源码

在线学习参考资料

  1. 发布-订阅模式

  2. 更多设计模式相关的资料强烈推荐曾探所著《JavaScript设计模式与开发实践》

上篇文章Vue 动态数据绑定(一)


更多内容可以订阅本人微信公众号,一起开启前端小白进阶的世界!

图片描述

总结

以上是脚本宝典为你收集整理的

Vue 动态数据绑定三大难点

全部内容,希望文章能够帮你解决

Vue 动态数据绑定三大难点

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过