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 中的视图刷新。
附上一种最简单的实现方式:
<div class="box" v-show="isShow">Hello World!</div> <button class="ui-button ui-button-primary" onClick="model.isShow = true">显示</button> <button class="ui-button ui-button-primary" onClick="model.isShow = false">隐藏</button> <script> // 第 1 步: 定义数据和视图 var model = { isShow: true } 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>
在此基础上,也可以尝试实现一下 v-show 的兄弟指令 v-else、v-if 等,如果能在了解原理的背景下脱离框架本身再加上自己的一些实践,相信会更加理解 Vue。
评论前必须登录!
注册