vue 作为最主流的前端框架，中文资料齐全、入门简单、生态活跃，可以说是工作中最常用的，如今对 Vue 原理的熟悉基本上是简历的标配了。之前参与了部分 2019 校园招聘的面试工作，发现很多简历上都写了：“精通 Vue”、“熟悉 Vue 原理和源码”、“熟悉 Vue 全家桶及其底层原理”、“熟悉 Vue 双向数据绑定” 等等，但是这么写你真的敢说熟悉 Vue 原理吗？

这样的简历描述看上去是很不错，熟悉框架原理非常难得，于是问到：“那你说一下 Vue 数据驱动的实现原理吧”！

大部分人的回答都差不多是：“首先通过 Object.defineProperty 遍历数据 data 劫持每个属性的 getter 和 setter 生成 Observer，通过一个 Depend 收集依赖，然后在数据发生变化时通知消息给 Watcher，触发相应监听回调，然后达到数据驱动视图的目的……” 其实描述的都非常正确，但是不禁让人怀疑这是真的熟悉还是背的熟悉？

于是进一步再问：如何利用数据驱动的原理实现一个最简单的 v-show 指令？假如有一个 div 元素，怎样用原生 JS 实现一个 v-show，通过数据的变化去改变这个 div 的显示和隐藏？

具体场景提示如下：

<div v-show="isShow">test</div>
 
<script>
var data = {
  isShow: true
}
 
// 实现：
data.isShow = false // 隐藏 div
data.isShow = true // 显示 div
</script>

问到这绝大部分人都回答不出了，或者没能提供一个正确的思路，甚至有答非所问往 v-show 和 v-if 的区别去说了。如果真的有带着思考去阅读 Vue 源码或者自己实践过的话这个问题应该是不难的。

大致思路可以是：1. 获取 div 上的指令（属性）以及指令的初始值；2. 定义能切换显示隐藏 div 的 dom 操作（视图刷新）方法；3. 劫持指令对应数据的 setter，setter 触发时调用 2 中的视图刷新。

附上一种最简单的实现方式：

<button onClick="model.isShow = true">显示</button>
<button onClick="model.isShow = false">隐藏</button>
 
<div v-show="isShow">Hello World！</div>
 
<script>
// 第 1 步: 定义数据和视图
var model = {
  isShow: false
}
var view = document.querySelector('div')
 
// 第 2 步: 定义视图刷新方法
var updateView = function(value) {
  view.style.display = value ? '' : 'none'
}
 
// 第 3 步: 设置初始视图表现
var directiveKey = view.getAttribute('v-show')
updateView(model[directiveKey])
 
// 第 4 步: 监听数据变化，然后刷新视图，达到数据驱动的目的
Object.defineProperty(model, 'isShow', {
  set: function(val) {
    updateView(val)
  }
})
</script>

预览地址： https://jsfiddle.net/tangbc/5a60ymsn/3/ 另外还有 Proxy 的实现方式，感兴趣的可以自己动手试下。

在此基础上，也可以尝试实现一下 v-show 的兄弟指令 v-else、v-if 等，如果能在了解原理的背景下脱离框架本身再加上自己的一些实践，相信会更加理解 Vue。

原文 http://www.alloyteam.com/2019/12/14124/

链接: https://fly63.com/article/detial/6782