1. 爱猫说设计师网首页
  2. 前端
  3. JS技术

深入理解 Vue 框架基本原理

12 - 深入理解 Vue 框架基本原理

前言

最近在学习 vue 框架基本原理,看了一些技术博客以及一些对 vue 源码的简单实现,对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎,尝试着去实践自己学到的知识,用 vue 的一些基本原理实现一个简单的 todo-list,完成对深度复杂对象的双向绑定以及对数组的监听,加深了对 vue 基本原理的印象。

学习链接

前排感谢以下文章,对我理解 vue 的基本原理有很大的帮助!

实现效果

1 - 深入理解 Vue 框架基本原理

数据代理

1. 简单介绍数据代理

正常情况下,我们都会把数据写在 data 里面,如下面所示

var vm = new Vue({
    el: '#app',
    data: {
        title: 'hello world'
    }
    methods: {
        changeTitle: function () {
            this.title = 'hello vue'
        }
    }
})
console.log(vm.title) // 'hello world' or 'hello vue'

如果没有数据代理,而我们又要修改 data 里面的 title 的话,methods 里面的 changeTitle 只能这样修改成 this.data.title = 'hello vue', 下面的 console 也只能改成 console.log(vm.data.title),数据代理就是这样的功能。

2. 实现原理

通过遍历 data 里面的属性,将每个属性通过 object.defineProperty() 设置 getter 和 setter,将 data 里面的每个属性都复制到与 data 同级的对象里。

(对应上面的示例代码)

1 - 深入理解 Vue 框架基本原理

触发这里的 getter 将会触发 data 里面对应属性的 getter,触发这里的 setter 将会触发 data 里面对应属性的 setter,从而实现代理。实现代码如下:

var self = this;   // this 为 vue 实例, 即 vm
Object.keys(this.data).forEach(function(key) {
    Object.defineProperty(this, key, {    // this.title, 即 vm.title
        enumerable: false,
        configurable: true,
        get: function getter () {
            return self.data[key];   //触发对应 data[key] 的 getter
        },
        set: function setter (newVal) {
            self.data[key] = newVal;  //触发对应 data[key] 的 setter
        }
    });
}

对 object.defineProperty 不熟悉的小伙伴可以在 MDN 的文档 (链接)学习一下

双向绑定

  • 数据变动 —> 视图更新
  • 视图更新 (input、textarea) –> 数据变动

视图更新 --> 数据变动这个方向的绑定比较简单,主要通过事件监听来改变数据,比如 input 可以监听 input 事件,一旦触发 input 事件就改变 data。下面主要来理解一下数据变动---> 视图更新这个方向的绑定。

1. 数据劫持

不妨让我们自己思考一下,如何实现数据变动,对应绑定数据的视图就更新呢?

答案还是 object.defineProperty,通过 object.defineProperty 遍历设置 this.data 里面所有属性,在每个属性的 setter 里面去通知对应的回调函数,这里的回调函数包括 dom 视图重新渲染的函数、使用 $watch 添加的回调函数等,这样我们就通过 object.defineProperty 劫持了数据,当我们对数据重新赋值时,如 this.title = 'hello vue', 就会触发 setter 函数,从而触发 dom 视图重新渲染的函数,实现数据变动,对应视图更新。

2. 发布-订阅模式

那么问题来了,我们如何在 setter 里面触发所有绑定该数据的回调函数呢?

既然绑定该数据的回调函数不止一个,我们就把所有的回调函数放在一个数组里面,一旦触发该数据的 setter,就遍历数组触发里面所有的回调函数,我们把这些回调函数称为订阅者。数组最好就定义在 setter 函数的最近的上级作用域中,如下面实例代码所示。

Object.keys(this.data).forEach(function(key) {
    var subs = [];  // 在这里放置添加所有订阅者的数组
    Object.defineProperty(this.data, key, {    // this.data.title
        enumerable: false,
        configurable: true,
        get: function getter () {
            console.log('访问数据啦啦啦')
            return this.data[key];   //返回对应数据的值
        },
        set: function setter (newVal) {
            if (newVal === this.data[key]) {   
                return;    // 如果数据没有变动,函数结束,不执行下面的代码
            }
            this.data[key] = newVal;  //数据重新赋值
            
            subs.forEach(function () {
                // 通知 subs 里面的所有的订阅者
            })
        }
    });
}

那么问题又来了,怎么把绑定数据的所有回调函数放到一个数组里面呢?

我们可以在 getter 里面做做手脚,我们知道只要访问数据就会触发对应数据的 getter,那我们可以先设置一个全局变量 target,如果我们要在 data 里面 title 属性添加一个订阅者 (changeTitle 函数),我们可以先设置 target = changeTitle,把 changeTitle 函数缓存在 target 中,然后访问 this.title 去触发 title 的 getter,在 getter 里面把 target 这个全局变量的值添加到 subs 数组里面,添加完成后再把全局变量 target 设置为 null,以便添加其他订阅者。实例代码如下:

Object.keys(this.data).forEach(function(key) {
    var subs = [];  // 在这里放置添加所有订阅者的数组
    Object.defineProperty(this.data, key, {    // this.data.title
        enumerable: false,
        configurable: true,
        get: function getter () {
            console.log('访问数据啦啦啦')
            if (target) {
                subs.push(target);                
            }
            return this.data[key];   //返回对应数据的值
        },
        set: function setter (newVal) {
            if (newVal === this.data[key]) {   
                return;    // 如果数据没有变动,函数结束,不执行下面的代码
            }
            this.data[key] = newVal;  //数据重新赋值
            
            subs.forEach(function () {
                // 通知 subs 里面的所有的订阅者
            })
        }
    });
}

上面的代码为了方便理解都是通过简化的,实际上我们把订阅者写成一个构造函数 watcher,在实例化订阅者的时候去访问对应的数据,触发相应的 getter,详细的代码可以阅读 DMQ 的自己动手实现 MVVM

3. 模板解析

通过上面的两个步骤我们已经实现一旦数据变动,就会通知对应绑定数据的订阅者,接下来我们来简单介绍一个特殊的订阅者,也就是视图更新函数,几乎每个数据都会添加对应的视图更新函数,所以我们就来简单了解一下视图更新函数。

假如说有下面这一段代码,我们怎么把它解析成对应的 html 呢?

<input v-model="title">
<h1>{{title}}</h1>
<button v-on:click="changeTitle">change title<button>

先简单介绍视图更新函数的用途,
比如解析指令 v-model="title",v-on:click="changeTitle", 还有把 {{title}} 替换为对应的数据等。

回到上面那个问题,如何解析模板?我们只要去遍历所有 dom 节点包括其子节点,

  • 如果节点属性含有 v-model,视图更新函数就为把 input 的 value 设置为 title 的值
  • 如果节点为文本节点,视图更新函数就为先用正则表达式取出大括号里面的值’title’,再设置文本节点的值为 data[‘title’]
  • 如果节点属性含有 v-on:xxxx,视图更新函数就为先用正则获取事件类型为 click,然后获取该属性的值为 changeTitle,则事件的回调函数为 this.methods[‘changeTitle’],接着用 addEventListener 监听节点 click 事件。

我们要知道视图更新函数也是 data 对应属性的订阅者,如果不知道如何触发视图更新函数,可以把上面的发布-订阅模式再看一遍。

可能有的小伙伴可能还有个疑问,如何实现 input 节点的值变化后,下面的 h1 节点的 title 值也发生变化?在遍历所有节点后,如果节点含有属性 v-model,就用 addEventListener 监听 input 事件,一旦触发 input 事件,改变 data[‘title’] 的值,就会触发 title 的 setter,从而通知所有的订阅者。

监听数组变化

无法监控每个数组元素

如果让我们自己实现监听数组的变化,我们可能会想到用 object.defineProperty 去遍历数组每个元素并设置 setter,但是 vue 源码里面却不是这样写的,因为对每一个数组元素 defineProperty 带来代码本身的复杂度增加和代码执行效率的降低。

感谢 Ma63d 这篇文章下面的的评论,对此解释得很详细,这里也就不再赘述。

变异数组方法

既然无法通过 defineProperty 监控数组的每个元素,我们可以重写数组的方法 (push, pop, shift, unshift, splice, sort, reverse) 来改变数组。

vue 文档中是这样写的:

Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

下面是 vue 早期源码学习系列之二:如何监听一个数组的变化 中的实例代码

const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
const arrayAugmentations = [];

aryMethods.forEach((method)=> {

    // 这里是原生 Array 的原型方法
    let original = Array.prototype[method];

   // 将 push, pop 等封装好的方法定义在对象 arrayAugmentations 的属性上
   // 注意:是属性而非原型属性
    arrayAugmentations[method] = function () {
        console.log('我被改变啦!');

        // 调用对应的原生方法并返回结果
        return original.apply(this, arguments);
    };

});

let list = ['a', 'b', 'c'];
// 将我们要监听的数组的原型指针指向上面定义的空数组对象
// 别忘了这个空数组的属性上定义了我们封装好的 push 等方法
list.__proto__ = arrayAugmentations;
list.push('d');  // 我被改变啦! 4

// 这里的 list2 没有被重新定义原型指针,所以就正常输出
let list2 = ['a', 'b', 'c'];
list2.push('d');  // 4

对__proto__不熟悉的小伙伴可以去看一下王福明的博客,写的很好。

变异数组方法的缺陷

vue 文档中变异数组方法的缺陷

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

  1. 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如: vm.items.length = newLength

同时文档中也介绍了如何解决上面这两个问题。

最后

以上是自己对 vue 一些基本原理的理解,当然还有很多不足的地方,欢迎指正。本来自己也是为了应付面试才去学习 vue 框架的基本原理,但是简单学习了这些 vue 基本的原理后,让我明白通过深入学习框架原理,可以有效避开一些自己以后会遇到的坑,所以,有时间的话自己以后还是会去看看框架的基本原理。

爱猫说是一个完全独立的媒体,运营只靠网络广告支撑,如果您支持爱猫说设计狮网的话,请对此网站关闭广告拦截功能(如:Adblock)爱猫说设计狮网衷心的感谢您。

本文来自投稿,不代表爱猫说设计师网立场,如若转载,请注明出处:https://www.imaoshuo.com/shen-ru-li-jie-vue-kuang-jia-ji-ben-yuan-li/

发表评论

登录后才能评论