【Vue】数据双向绑定相关面试题

【Vue】数据双向绑定相关面试题文章目录【Vue】数据双向绑定相关面试题前置知识：数据的双向绑定：监听器 Observer订阅器 Dep订阅者 Watcher解析器 Compile总结 --> 如何实现数据双向绑定：相关题目一：Vue 如何检测数组变化为什么只对对象劫持，而要对数组进行方法重写？相关面试题二：Vue3.0 和 2.0 的响应式原理区别相关面试题三：Proxy 与 Object

程序媛小y

2967人浏览 · 2022-05-02 19:26:27

程序媛小y · 2022-05-02 19:26:27 发布

【Vue】数据双向绑定相关面试题

文章目录

【Vue】数据双向绑定相关面试题

前置知识：

实现一个vue的简易数据双向绑定:

【vue】双向数据绑定（一）–发布订阅模式

【vue】双向数据绑定（二）-- 实现vue的数据劫持与发布订阅

数据的双向绑定：

1、实现一个监听器 Observer ，用来劫持并监听所有属性，如果属性发生变化，就通知订阅者；

2、实现一个订阅器 Dep，用来收集订阅者，对监听器 Observer 和订阅者 Watcher 进行统一管理；

3、实现一个订阅者 Watcher，可以收到属性的变化通知并执行相应的方法，从而更新视图；

4、实现一个解析器 Compile，可以解析每个节点的相关指令，对模板数据和订阅器进行初始化。

在这里插入图片描述

监听器 Observer

每次数据读或写时，我们能感知到数据被读取了或数据被改写了。要使数据变得“可观测”，Vue 2.0 源码中用到 Object.defineProperty() 来劫持各个数据属性的 setter / getter。

将 Object.defineProperty() 来劫持各个数据属性的 setter / getter 封装在 defineReactive() 函数中

/**
  * 循环遍历数据对象的每个属性
  */
function observable(obj) {
    if (!obj || typeof obj !== 'object') {
        return;
    }
    let keys = Object.keys(obj);
    keys.forEach((key) => {
        defineReactive(obj, key, obj[key])
    })
    return obj;
}


/**
 * 将对象的属性用 Object.defineProperty() 进行设置
 */
function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        get() {
            console.log(`${key}属性被读取了...`);
            return val;
        },
        set(newVal) {
            console.log(`${key}属性被修改了...`);
            val = newVal;
        }
    })
}

订阅器 Dep

负责进行依赖收集
首先，有个数组，专门来存放所有的订阅信息
其次，还要提供一个向数组中追加订阅信息的方法 --> addSub()
然后，还要提供一个循环，循环触发数组中的每个订阅信息 --> notify()

订阅者 Watcher

订阅者 Watcher 在初始化的时候需要将自己添加进订阅器 Dep 中，

负责订阅一些事件，将自己的一些行为交给了 Dep类，放在 Dep数组中。

当以后到了一定时机， Dep类负责对每一个行为进行循环，然后触发。此时 Watcher类就可以收到通知。

解析器 Compile

实现一个解析器 Compile 来做解析和绑定 Dom,

解析模板指令，并替换模板数据，初始化视图；
将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器；

总结 --> 如何实现数据双向绑定：

Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
实现一个订阅者 Watcher：每个组件实例都对应一个 watcher 实例，Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

Watcher 主要做的事情是： ① 在自身实例化时往属性订阅器(dep)里面添加自己； ② 自身必须有一个update()方法； ③ 待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
实现一个订阅器 Dep：订阅器采用发布-订阅设计模式，用来收集订阅者 Watcher，对监听器 Observer 和订阅者 Watcher 进行统一管理。

相关题目一：Vue 如何检测数组变化

为什么只对对象劫持，而要对数组进行方法重写？

因为对象最多也就几十个属性，拦截起来数量不多，但是数组可能会有几百几千项，拦截起来非常耗性能，所以直接重写数组原型上的方法，是比较节省性能的方案

数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，
而是选择对 7 种数组（push,shift,pop,splice,unshift,sort,reverse）方法进行重写

举例：

    //！！！对数组方法进行重写：
    //原来的 oldArrayProto用来执行数组上的方法(比如 push,pop,shift)
    //新的 newArrProto 用来体现视图的更新
    const oldArrayProto = Array.prototype;
    const newArrProto = Object.create(oldArrayProto);
    ['push','pop','shift','unshift','splice','reverse','sort'].forEach(methodName => {
      newArrProto[methodName] = function() {
        console.log('更新视图 --> 数组');
        oldArrayProto[methodName].call(this,...arguments);        
      }
    })

并且在 observer() 函数中，监测是否为数组

      //判断是否是数组！！！
      if(Array.isArray(target)) {
        target.__proto__ = newArrProto;
      }

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Vue响应式</h1>

  <script>
    const data = {
      name:'zs',
      age:18,
      friend:{
        friendName:'ls'
      },
      colors:['red','orange','green']
    }

    //！！！对数组方法进行重写：
    //原来的 oldArrayProto用来执行数组上的方法(比如 push,pop,shift)
    //新的 newArrProto 用来体现视图的更新
    const oldArrayProto = Array.prototype;
    const newArrProto = Object.create(oldArrayProto);
    ['push','pop','shift','unshift','splice','reverse','sort'].forEach(methodName => {
      newArrProto[methodName] = function() {
        console.log('更新视图 --> 数组');
        oldArrayProto[methodName].call(this,...arguments);        
      }
    })

    //变成响应式数据
    observer(data);

    function observer(target) {
      if(typeof target !== 'object' || target === null) {
        return target;
      }

      //判断是否是数组！！！
      if(Array.isArray(target)) {
        target.__proto__ = newArrProto;
      }

      for(let key in target) {
        defineReactive(target, key, target[key]);
      }
    }

    function defineReactive(target, key, value) {
      //深度观察
      observer(value);

      Object.defineProperty(target, key, {
        get(){
          return value;
        },
        set(newValue){
          observer(newValue);
          if(newValue !== value) {
            value = newValue;
            console.log('更新视图 --> 对象');
          }
        }
      })
    }

    data.age = { number: 20 };//监测对象
    data.colors.push('blue');//监测数组
    console.log(data.colors);
  </script>
</body>

</html>