欢迎光临
我们一直在努力

使用原生 JS 实现一个类 Vue 的 v-show 指令

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

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

大部分人的回答都差不多是:“首先通过 Object.defineProperty 遍历数据 data 劫持每个属性的 gettersetter 生成 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-showv-if 的区别去说了。如果真的有带着思考去阅读 Vue 源码或者自己实践过的话这个问题应该是不难的。

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

附上一种最简单的实现方式:
类 Vue 的 v-show 指令

<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。

赞(2) 打赏
未经允许不得转载:前端学习分享网 » 使用原生 JS 实现一个类 Vue 的 v-show 指令

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏