连v-show都不会你还敢说熟悉 Vue 原理?

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。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章