Vue数据双向绑定(面试)

目前前端框架基本上都是采用 MVVM 模式实现双向绑定，Vue 自然也不例外。但是各个框架实现双向绑定的方法略有所不同，目前大概有三种实现方式。
 
  • 发布订阅模式
  • Angular 脏检查机制
  • 数据劫持
 
而 Vue 则采用的是数据劫持与发布订阅相结合的方式实现双向绑定，数据劫持主要通过 Object.defineProperty 来实现。
 

Object.defineProperty

var people = {
    name: "张三",
    age: 18
}
people.age; //18
people.age = 20;
// 上述代码就是普通的获取/设置对象的属性，看不到什么奇怪的变化。

var obj = {}
var age;
Object.defineProperty(obj, 'age', {
  get: function () {
    console.log("获取年龄");
    return age;
  },
  set: function (newVal) {
    console.log("设置年龄");
    age = newVal;
  }
});
obj.age = 18;
console.log(obj.age);

 

 
我们知道 MVVM 模式在于数据与视图的保持同步，意思是说数据改变时会自动更新视图，视图发生变化时会更新数据。

所以我们需要做的就是如何检测到数据的变化然后通知我们去更新视图，如何检测到视图的变化然后去更新数据。

检测视图这个比较简单，无非就是我们利用事件的监听即可。

那么如何才能知道数据属性发生变化呢？这个就是利用我们上面说到的 Object.defineProperty 当我们的属性发生变化时，它会自动触发 set 函数从而能够通知我们去更新视图。

 

 
Vue 双向绑定示例
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>
</body>
</html>

 

 
如何理解Vue的双向数据绑定
 
定义：Vue是采用 数据劫持 结合 发布/订阅模式 的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。


监听器 Observer

监听器的作用就是去监听数据的每一个属性，我们上面也说了使用 Object.defineProperty 方法，当我们监听到属性发生变化之后我们需要通知 Watcher 订阅者执行更新函数去更新视图，在这个过程中我们可能会有很多个订阅者 Watcher 所以我们要创建一个容器 Dep 去做一个统一的管理。

 

订阅者 Watcher

Watcher 主要是接受属性变化的通知，然后去执行更新函数去更新视图，所以我们做的主要是有两步：

  1. 把 Watcher 添加到 Dep 容器中，这里我们用到了监听器的 get 函数
  2. 接收到通知，执行更新函数。

 

Compile 解析器

Compile 的主要作用一个是用来解析指令初始化模板，一个是用来添加订阅者，绑定更新函数。

因为在解析 DOM 节点的过程中我们会频繁的操作 DOM， 所以我们利用文档片段（DocumentFragment）来帮助我们去解析 DOM 优化性能。

 

posted @ 2020-10-30 15:33  guopengju  阅读(625)  评论(0)    收藏  举报