前言

自定义指令是vue中使用频率仅次于组件,其包含bindinsertedupdatecomponentUpdatedunbind五个生命周期钩子。本文将对vue指令的工作原理进行相应介绍,从本文中,你将得到:

  • 指令的工作原理
  • 指令使用的注意事项

基本使用

官网案例:

<div id='app'>
<input type="text" v-model="inputValue" v-focus>
</div>
<script>
Vue.directive('focus', {
// 第一次绑定元素时调用
bind () {
console.log('bind')
},
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
console.log('inserted')
el.focus()
},
// 所在组件VNode发生更新时调用
update () {
console.log('update')
},
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用
componentUpdated () {
console.log('componentUpdated')
},
// 只调用一次,指令与元素解绑时调用
unbind () {
console.log('unbind')
}
})
new Vue({
data: {
inputValue: ''
}
}).$mount('#app')
</script>

指令工作原理

初始化

初始化全局API时,在platforms/web下,调用createPatchFunction生成VNode转换为真实DOMpatch方法,初始化中比较重要一步是定义了与DOM节点相对应的hooks方法,在DOM的创建(create)、激活(avtivate)、更新(update)、移除(remove)、销毁(destroy)过程中,分别会轮询调用对应的hooks方法,这些hooks中一部分是指令声明周期的入口。

// src/core/vdom/patch.js
const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
export function createPatchFunction (backend) {
let i, j
const cbs = {} const { modules, nodeOps } = backend
for (i = 0; i < hooks.length; ++i) {
cbs[hooks[i]] = []
// modules对应vue中模块,具体有class, style, domListener, domProps, attrs, directive, ref, transition
for (j = 0; j < modules.length; ++j) {
if (isDef(modules[j][hooks[i]])) {
// 最终将hooks转换为{hookEvent: [cb1, cb2 ...], ...}形式
cbs[hooks[i]].push(modules[j][hooks[i]])
}
}
}
// ....
return function patch (oldVnode, vnode, hydrating, removeOnly) {
// ...
}
}

模板编译

模板编译就是解析指令参数,具体解构后的ASTElement如下所示:

{
tag: 'input',
parent: ASTElement,
directives: [
{
arg: null, // 参数
end: 56, // 指令结束字符位置
isDynamicArg: false, // 动态参数,v-xxx[dynamicParams]='xxx'形式调用
modifiers: undefined, // 指令修饰符
name: "model",
rawName: "v-model", // 指令名称
start: 36, // 指令开始字符位置
value: "inputValue" // 模板
},
{
arg: null,
end: 67,
isDynamicArg: false,
modifiers: undefined,
name: "focus",
rawName: "v-focus",
start: 57,
value: ""
}
],
// ...
}

生成渲染方法

vue推荐采用指令的方式去操作DOM,由于自定义指令可能会修改DOM或者属性,所以避免指令对模板解析的影响,在生成渲染方法时,首先处理的是指令,如v-model,本质是一个语法糖,在拼接渲染函数时,会给元素加上value属性与input事件(以input为例,这个也可以用户自定义)。

with (this) {
return _c('div', {
attrs: {
"id": "app"
}
}, [_c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: (inputValue),
expression: "inputValue"
}, {
name: "focus",
rawName: "v-focus"
}],
attrs: {
"type": "text"
},
domProps: {
"value": (inputValue) // 处理v-model指令时添加的属性
},
on: {
"input": function($event) { // 处理v-model指令时添加的自定义事件
if ($event.target.composing)
return;
inputValue = $event.target.value
}
}
})])
}

生成VNode

vue的指令设计是方便我们操作DOM,在生成VNode时,指令并没有做额外处理。

生成真实DOM

vue初始化过程中,我们需要记住两点:

  • 状态的初始化是 父 -> 子,如beforeCreatecreatedbeforeMount,调用顺序是 父 -> 子
  • 真实DOM挂载顺序是 子 -> 父,如mounted,这是因为在生成真实DOM过程中,如果遇到组件,会走组件创建的过程,真实DOM的生成是从子到父一级级拼接。

patch过程中,每此调用createElm生成真实DOM时,都会检测当前VNode是否存在data属性,存在,则会调用invokeCreateHooks,走初创建的钩子函数,核心代码如下:

// src/core/vdom/patch.js
function createElm (
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
// ...
// createComponent有返回值,是创建组件的方法,没有返回值,则继续走下面的方法
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
} const data = vnode.data
// ....
if (isDef(data)) {
// 真实节点创建之后,更新节点属性,包括指令
// 指令首次会调用bind方法,然后会初始化指令后续hooks方法
invokeCreateHooks(vnode, insertedVnodeQueue)
}
// 从底向上,依次插入
insert(parentElm, vnode.elm, refElm)
// ...
}

以上是指令钩子方法的第一个入口,是时候揭露directive.js神秘的面纱了,核心代码如下:

// src/core/vdom/modules/directives.js

// 默认抛出的都是updateDirectives方法
export default {
create: updateDirectives,
update: updateDirectives,
destroy: function unbindDirectives (vnode: VNodeWithData) {
// 销毁时,vnode === emptyNode
updateDirectives(vnode, emptyNode)
}
} function updateDirectives (oldVnode: VNodeWithData, vnode: VNodeWithData) {
if (oldVnode.data.directives || vnode.data.directives) {
_update(oldVnode, vnode)
}
} function _update (oldVnode, vnode) {
const isCreate = oldVnode === emptyNode
const isDestroy = vnode === emptyNode
const oldDirs = normalizeDirectives(oldVnode.data.directives, oldVnode.context)
const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)
// 插入后的回调
const dirsWithInsert = [
// 更新完成后回调
const dirsWithPostpatch = [] let key, oldDir, dir
for (key in newDirs) {
oldDir = oldDirs[key]
dir = newDirs[key]
// 新元素指令,会执行一次inserted钩子方法
if (!oldDir) {
// new directive, bind
callHook(dir, 'bind', vnode, oldVnode)
if (dir.def && dir.def.inserted) {
dirsWithInsert.push(dir)
}
} else {
// existing directive, update
// 已经存在元素,会执行一次componentUpdated钩子方法
dir.oldValue = oldDir.value
dir.oldArg = oldDir.arg
callHook(dir, 'update', vnode, oldVnode)
if (dir.def && dir.def.componentUpdated) {
dirsWithPostpatch.push(dir)
}
}
} if (dirsWithInsert.length) {
// 真实DOM插入到页面中,会调用此回调方法
const callInsert = () => {
for (let i = 0; i < dirsWithInsert.length; i++) {
callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)
}
}
// VNode合并insert hooks
if (isCreate) {
mergeVNodeHook(vnode, 'insert', callInsert)
} else {
callInsert()
}
} if (dirsWithPostpatch.length) {
mergeVNodeHook(vnode, 'postpatch', () => {
for (let i = 0; i < dirsWithPostpatch.length; i++) {
callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode)
}
})
} if (!isCreate) {
for (key in oldDirs) {
if (!newDirs[key]) {
// no longer present, unbind
callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy)
}
}
}
}

对于首次创建,执行过程如下:

  1. oldVnode === emptyNodeisCreatetrue,调用当前元素中所有bind钩子方法。
  2. 检测指令中是否存在inserted钩子,如果存在,则将insert钩子合并到VNode.data.hooks属性中。
  3. DOM挂载结束后,会执行invokeInsertHook,所有已挂载节点,如果VNode.data.hooks中存在insert钩子。则会调用,此时会触发指令绑定的inserted方法。

一般首次创建只会走bindinserted方法,而updatecomponentUpdated则与bindinserted对应。在组件依赖状态发生改变时,会用VNode diff算法,对节点进行打补丁式更新,其调用流程:

  1. 响应式数据发生改变,调用dep.notify,通知数据更新。
  2. 调用patchVNode,对新旧VNode进行差异化更新,并全量更新当前VNode属性(包括指令,就会进入updateDirectives方法)。
  3. 如果指令存在update钩子方法,调用update钩子方法,并初始化componentUpdated回调,将postpatch hooks挂载到VNode.data.hooks中。
  4. 当前节点及子节点更新完毕后,会触发postpatch hooks,即指令的componentUpdated方法

核心代码如下:

// src/core/vdom/patch.js
function patchVnode (
oldVnode,
vnode,
insertedVnodeQueue,
ownerArray,
index,
removeOnly
) {
// ...
const oldCh = oldVnode.children
const ch = vnode.children
// 全量更新节点的属性
if (isDef(data) && isPatchable(vnode)) {
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
}
// ...
if (isDef(data)) {
// 调用postpatch钩子
if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
}
}

unbind方法是在节点销毁时,调用invokeDestroyHook,这里不做过多描述。

注意事项

使用自定义指令时,和普通模板数据绑定,v-model还是存在一定的差别,如虽然我传递参数(v-xxx='param')是一个引用类型,数据变化时,并不能触发指令的bind或者inserted,这是因为在指令的声明周期内,bindinserted只是在初始化时调用一次,后面只会走updatecomponentUpdated

指令的声明周期执行顺序为bind -> inserted -> update -> componentUpdated,如果指令需要依赖于子组件的内容时,推荐在componentUnpdated中写相应业务逻辑。

vue中,很多方法都是循环调用,如hooks方法,事件回调等,一般调用都用try catch包裹,这样做的目的是为了防止一个处理方法报错,导致整个程序崩溃,这一点在我们开发过程中可以借鉴使用。

小结

开始看整个vue源码时,对很多细枝末节方法都不怎么了解,通过梳理具体每个功能的实现时,渐渐能够看到整个vue全貌,同时也能避免开发使用中的一些坑点。

GitHub

Vue指令实现原理的更多相关文章

  1. Vue双向绑定原理,教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  2. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  3. Vue渲染数据理解以及Vue指令

    一.Vue渲染数据原理 原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏 ...

  4. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  5. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  6. vue响应式原理解析

    # Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...

  7. [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串

    本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...

  8. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  9. Vue视图渲染原理解析,从构建VNode到生成真实节点树

    前言 在 Vue 核心中除了响应式原理外,视图渲染也是重中之重.我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐. 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组 ...

随机推荐

  1. MindSpore保存与加载模型

    技术背景 近几年在机器学习和传统搜索算法的结合中,逐渐发展出了一种Search To Optimization的思维,旨在通过构造一个特定的机器学习模型,来替代传统算法中的搜索过程,进而加速经典图论等 ...

  2. Linux硬件与服务

    Linux硬件与服务 Linux Linux硬件与服务 1 Linux磁盘管理与磁盘结构 磁盘的组成结构 盘片的逻辑结构 分区格式化 实例说明: 2 磁盘管理之Block.iNode. super.s ...

  3. docker容器中日志文件过大处理方法

    背景 :在日常工作中一个基于centos镜像构建起来的python爬虫程序,日志文件在两个月内到了500G,日志存放在根目录下面,在不扩容的情况下把这个问题给解决掉.通过定时任务和脚本的方法,定期的清 ...

  4. jmeter中beanshell postprocessor结合fastjson库提取不确定个数的json参数

    在项目实践中,遇到了这样一个问题.用jmeter作http接口测试,需要的接口参数个数是不确定的.也就是说,在每次测试中,根据情况不同,可能页面中的列表中所含的参数个数是不确定的,那么要提取的参数个数 ...

  5. mysql基础之数据库变量(参数)管理

    数据库的数据存放路径:[root@ren7 mysql]# pwd /var/lib/mysql [root@ren7 mysql]# ls aria_log.00000001 ibdata1 mul ...

  6. nginx 的基础知识(二)

    Nginx 多进程网络模型 进程模型 nginx启动后以daemon的方式在后台运行,后台进程包括一个master进程和多个worker进程 master进程主要作用,接收来自外界的信号:向各work ...

  7. Java核心技术卷阅读随笔--第3章【Java 的基本程序设计结构】

    Java 的基本程序设计结构 现在, 假定已经成功地安装了 JDK,并且能够运行第 2 章中给出的示例程序.我们从现在开始将介绍 Java 应用程序设计.本章主要介绍程序设计的基本概念(如数据类型.分 ...

  8. skynet debug console 使用

    预读 关于如何使用 skynet 可以参考 wiki 文档 更多实战内容见 https://www.lanqiao.cn/courses/2770 优惠码:2CZ2UA5u 环境测试搭建 使用示例代码 ...

  9. 书列荐书 |《黑天鹅&#183;如何应对不可预知的未来》【美】纳西姆 尼古拉斯 塔勒布 著

    你不知道的事比你知道的事更有意义,因为生活中发生了许多微小的事情,尽管出现的概率非常小,但是却以某一种巨大的力量影响我们的生活.但是由于思维习惯的问题,导致我们看问题的方式使得我们不能很快地把握事物的 ...

  10. CVPR2020论文解读:三维语义分割3D Semantic Segmentation

    CVPR2020论文解读:三维语义分割3D Semantic Segmentation xMUDA: Cross-Modal Unsupervised Domain Adaptation  for 3 ...