Vue 动态数据绑定三大难点

姘存按发布于2019-08-21 11:33 / 3216人阅读

摘要：动态数据绑定的三个难点对象深度问题设置新对象是否能够继续响应和考虑传递回调函数本文的目的在实践中使用递归思想了解设计模式中的发布订阅模式三大难点如果传入参数对象是一个比较深的对象也就是其属性值也可能是对象，那该怎么办呢举个例子。

</>复制代码 
动态数据绑定的三个难点:
对象深度问题
设置新对象是否能够继续响应getter 和 setter
考虑传递回调函数

本文的目的

在实践中使用递归思想

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

三大难点

如果传入参数对象是一个“比较深”的对象（也就是其属性值也可能是对象），那该怎么办呢？举个例子。

</>复制代码 
// 一个“比较深”的对象：某些属性的值也是一个对象
let obj = {
     a: 1,
     b: 2,
     c: {
          d: 3,
          e: 4
      }
}

如果设置新的值是一个对象的话，新设置的对象的属性是否能能继续响应 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"

考虑传递回调函数。在实际应用中，当特定数据发生改变的时候，我们是希望做一些特定的事情的，而不是每一次都只能打印出一些信息。所以，我们需要支持传入回调函数的功能。举个例子。

</>复制代码 
let app1 = new Observer({
         name: "youngwind",
         age: 25
 });
 // 你需要实现 $watch 这个 API
 app1.$watch("age", function(age) {
         console.log(`我的年纪变了，现在已经是：${age}岁了`)
 });
 app1.data.age = 100; // 输出："我的年纪变了，现在已经是100岁了"

解决方法

对象深度问题解决方法

</>复制代码 
       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 对象 ,如果是则进行递归,检查其子属性...递归..

设置新对象是否能够继续响应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出来

考虑传递回调函数

</>复制代码 
$watch(key,callback){
       this.watch[key] = callback;
}

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

</>复制代码 
源码:Vue 动态数据绑定三大难点解决源码

在线学习参考资料

发布-订阅模式

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

</>复制代码 
上篇文章Vue 动态数据绑定(一)

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86844.html

JavaScript学习笔记整理：对象篇

摘要：函数式对象的一个子类型，中的函数是一等公民内置对象中还有一些对象子类型，通常被称为内置对象。内容对象的内容是由一些存储在特定命名位置的任意类型的值组成的，我们称之为属性。语法对象两种定义形式声明(文字)形式构造形式 //声明(文字)形式 var myObj = { key: value // ... } //构造形式 var myObj = new Ob...

testbird 2019-08-21 11:33 评论0 收藏0
详解vue组件三大核心概念

摘要：前言本文主要介绍属性事件和插槽这三个基础概念使用方法及其容易被忽略的一些重要细节。至于如何改变，我们接下去详细介绍单向数据流这个概念出现在组件通信。比如上例中在子组件中修改父组件传递过来的数组从而改变父组件的状态。的一个核心思想是数据驱动。前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们...

rickchen 2019-08-23 17:51 评论0 收藏0
18年求职面经及总结

摘要：年求职面经及总结我的求职之路差不多走到尽头了感觉真是精疲力尽了把这大半年的经历和面试总结写下来希望能给和我一样在求职路上煎熬的人一点帮助先说背景微电子科学与工程专业学过两门和相关的课程语言和单片机这个专业的唯一好处就是大部分人并不知道这个专 18年求职面经及总结我的求职之路差不多走到尽头了,感觉真是精疲力尽了.把这大半年的经历和面试总结写下来,希望能给和我一样在求职路上煎熬的人一点帮...

zhangwang 2019-08-22 11:07 评论0 收藏0
18年求职面经及总结

摘要：年求职面经及总结我的求职之路差不多走到尽头了感觉真是精疲力尽了把这大半年的经历和面试总结写下来希望能给和我一样在求职路上煎熬的人一点帮助先说背景微电子科学与工程专业学过两门和相关的课程语言和单片机这个专业的唯一好处就是大部分人并不知道这个专 18年求职面经及总结我的求职之路差不多走到尽头了,感觉真是精疲力尽了.把这大半年的经历和面试总结写下来,希望能给和我一样在求职路上煎熬的人一点帮...

fjcgreat 2019-08-01 17:38 评论0 收藏0