前言

自定义指令是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. 2021最新Java面试题全集-20210326版

    在手撕了数千道网络流传的面试题,外加十多个不眠之夜, 终于从里面精心挑选出约500道题目, 做为大家求职.跳槽前复习准备面试使用. 一:挑选题目的原则: 常考的.常被面试问到的 题目有一定的深度和难度 ...

  2. windows调起git bash执行sh脚本定时统计git仓库代码量

    本来挺简单的一个东西硬是弄了两天 心力交瘁 找了网上不少资料 整理一下发给大家 首先是统计每个人的代码量的git命令 在网上找的 我这里做了以下修改 git log --format='%aN'|so ...

  3. Gradle的环境安装与配置

    本文是基于Windows环境对Gradle-6.6版本进行的安装配置. 简介 下载 安装 环境变量配置 开发工具配置 1.简介 Gradle是一个基于JVM的构建工具,是一款通用灵活的构建工具,支持m ...

  4. C#·JSON的处理和解析

    阅文时长 | 0.34分钟 字数统计 | 309.6字符 主要内容 | 1.引言&背景 2.声明与参考资料 『C#·JSON的处理和解析』 编写人 | SCscHero 编写时间 | 2021 ...

  5. C#基础之==(双等于号)与equals()区别

    C#中Equals和= =比较 这两种方式也是大家在日常编码工作当中用的比较多的判断方式.之前在使用的时候也没太关注两者在比较不同类型的时候存在哪些区别. 今天就和大家一起深入了解一下其中区别 一.值 ...

  6. [Qt] 打包

    步骤: 1.release项目,生成exe文件 2.在命令行中使用windeployqt,将相关文件复制到exe文件所在文件夹 3.用Enigma Virtual Box打包所有文件 参考 https ...

  7. SpringBoot 整合 mybatis 开启驼峰命名规则自动转换

    引言 在使用 MyBatis 进行实际项目开发时,如果数据库表字段名与Java 实体类属性名不一致,映射时则需要编写表字段列表与 Java 实体类属性的映射关系,即resultMap,如下: < ...

  8. 11.3 free:查看系统内存信息

    free命令用于显示系统内存状态,具体包括系统物理内存.虚拟内存.共享内存和系统缓存等. free命令的参数选项及说明 -b    以Byte为单位显示内存的使用情况 -m    以MB为单位显示内存 ...

  9. opencv——PCA(主要成分分析)数学原理推导

    引言: 最近一直在学习主成分分析(PCA),所以想把最近学的一点知识整理一下,如果有不对的还请大家帮忙指正,共同学习. 首先我们知道当数据维度太大时,我们通常需要进行降维处理,降维处理的方式有很多种, ...

  10. 学习Git的一些总结

    Git是以后公司工作必不可少的,所以早点了解使用它是很有必要的 一般国外的开源是GitHub 国内的是码云Gitee 至于git的安装教程,这里就不啰嗦啦,面向百度即可,安装完成鼠标右键会多几个选项: ...