TAT.steph 如何用原生 JS 实现一个最简单的 v-show 指令?
In 未分类 on 2019年12月10日 by view: 5,185
4

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

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

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

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

具体场景提示如下:

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

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

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

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

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

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2019/12/14124/

  1. 周南 2020 年 1 月 4 日

    希望楼主多出一些这样的文章,小而美。

  2. 浩哥 2019 年 12 月 24 日

    源码呢?只写了个 Demo 就完了?谁给你的勇气写的这个标题

    • TAT.steph

      TAT.STEPH 2019 年 12 月 24 日

      这篇短文只是描述了实现数据驱动的原理的一个简单例子而已,并不是全面分析 Vue 源码。

  3. lain 2019 年 12 月 23 日

    只是数据驱动思想啊, 学习到了

发表评论到 周南