收藏好这篇,别再只说“数据劫持”了

最近接触了一些面试者,当我问起“Vue 如何实现数据双向绑定”时,会脱口而出“数据劫持”,然后呢?然后就没有然后了╮(╯_╰)╭。确实,“数据劫持”是基础,但远不是面试官想听到的答案,不如花个十分钟看看本文,下次照着回答就好了

“双向绑定” 本身

要解答问题,首先要理解问题: 数据双向绑定 是一种模式,web语境下一般指数据从dom到JS对象之间的自动同步。DOM 与 JS 被隔离在两个不同的运行时上,互相之间需要通过命令式的 DOM接口 沟通:DOM 需要正确触发事件,将信息传输给JS程序;而JS也需要在状态变更后,有意识地调用适当的接口,改变DOM内容。这种方式会引起两个问题:

  1. 状态的管理与展现是完全剥离开的两套不同逻辑,需要刻意保持同步,这是很高的开发成本
  2. DOM 规范定义了不少接口,而且有兼容性问题,这是很高的学习成本

双向绑定通过各种各样的设计,将数据从 DOM 到 JS 或者从 JS 到 DOM 的同步过程,封装在框架本身,上层代码脱离了对底层接口的依赖,只需要关注状态管理逻辑。

Object.defineProperty

我们要讨论的第一个问题是,如何检测 JS 对象属性发生的变更?最简单粗暴的方法是“脏检查”,旧版本的Angular就是用的这种方法,在各种可能引发状态变更的事件后,启动一次脏检查。这种方法很直观,但实现上需要考虑很多问题:

  1. 脏检查过程中可能会触发新的数据变更,也就进入死循环了
  2. 脏检查的实现必须保留新旧两份数据的副本
  3. 脏检查必须预知所有可能触发状态变更的时机,也就意味着需要对部分原生接口进行包裹(包括 setTimeoutrequestNextAnimationFrame等)
  4. ...

Vue 则采用元编程接口 Object.defineProperty 实现的。 在组件初始化,会调用该接口,将对象属性包装为getset函数,将代码“埋入”属性是“获取”、“修改”行为中。看个简单例子,直观感受下:

const person = {};

// 嘿嘿,谁都改不了我的名字
Object.defineProperty(person, 'name', {
    get() {
        return 'van';
    },
    set(v) {
        console.log('they want change my name');
    }
});

console.log(person.name);
// van
person.name = 'tec';
// they want change my name
console.log(person.name);
// van

依赖管理方案

Object.defineProperty 只是解决了状态变更后,如何触发通知的问题,那要通知谁呢?谁会关心那些属性发生了变化呢?在 Vue 中,使用 Dep 解耦了依赖者与被依赖者之间关系的确定过程。简单来说:

  • 第一步,通过 Observer 提供的接口,遍历状态对象,给对象的每个属性、子属性都绑定了一个专用的 Dep 对象。这里的状态对象主要指组件当中的data属性。
  • 第二步,创建三中类型的watcher:

    1. 调用 initComputedcomputed 属性转化为 watcher 实例
    2. 调用 initWatch 方法,将 watch 配置转化为 watcher 实例
    3. 调用 mountComponent 方法,为 render 函数绑定 watcher 实例
  • 第三步,状态变更后,触发 dep.notify() 函数,该函数再进一步触发 Watcher 对象 update 函数,执行watcher的重新计算。

对应下图:

图片描述

注意,Vue 组件中的 render 函数,我们可以单纯将其视为一种特殊的 computed 函数,在它所对应的 Watcher 对象发生变化时,触发执行render,生成新的 virutal-dom 结构,再交由 Vue 做diff,更新视图。

结语

本文到这里就结束了,更多内容可以尝试看看源码,代码里面的设计模式非常值得学习。

Vue 使用数据劫持作为底层支撑,又设计了一套精妙的依赖管理方案解耦依赖。但数据劫持方案也有其难以解决的痛点:

  1. 只能应用于简单对象
  2. 对数组无效,所以需要包装数组方法
  3. 属性劫持的出发点是“变”,所以vue无法很好接入“immutable”模式

1.4k 声望
6.8k 粉丝
0 条评论
推荐阅读
🦀🦀🦀 一个普通人的前端职业成长之路
大家好,我是 范文杰,一个前端从业者,最近刚写完我的第一本小册《Webpack 核心原理与实践应用》,这对我是一个不小的职业突破,所以不能免俗地想做个总结,分享我这九年工作的成长经历,以及我对前端这个职业的...

范文杰3阅读 1.1k

封面图
Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 14.1k评论 7

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5k评论 10

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.5k评论 7

前端开发工具
前端教程阿西河前端教程丨一个助你成为全栈开发的网站前端高手进阶JavaScript利用js实现表单的校验KeyCode 查询表现代 JavaScript 教程时间戳(Unix timestamp)转换工具HTML minifierJavaScript代码压缩-js代码压...

寒青14阅读 2.6k

万字长文~vue+express+mysql带你彻底搞懂项目中的权限控制(附所有源码)
所谓的权限,其实指的就是:用户是否能看到,以及是否允许其对数据进行增删改查的操作,因为现在开发项目的主流方式是前后端分离,所以整个项目的权限是后端权限控制搭配前端权限控制共同实现的

水冗水孚11阅读 1.5k

[译]Vue.js + Astro 比 Vue SPA 更好吗?
在本文中,我将向您展示如何使用 Astro 构建基于 Vue 的应用程序,我们将了解其独特的架构如何带来比单页应用程序 (SPA) 更好的性能。

杭州程序员张张7阅读 4.1k评论 3

1.4k 声望
6.8k 粉丝
宣传栏