Vue指令实现原理
前言
自定义指令是vue
中使用频率仅次于组件,其包含bind
、inserted
、update
、componentUpdated
、unbind
五个生命周期钩子。本文将对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
转换为真实DOM
的patch
方法,初始化中比较重要一步是定义了与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
初始化过程中,我们需要记住两点:
- 状态的初始化是 父 -> 子,如
beforeCreate
、created
、beforeMount
,调用顺序是 父 -> 子 - 真实
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)
}
}
}
}
对于首次创建,执行过程如下:
oldVnode === emptyNode
,isCreate
为true
,调用当前元素中所有bind
钩子方法。- 检测指令中是否存在
inserted
钩子,如果存在,则将insert
钩子合并到VNode.data.hooks
属性中。 DOM
挂载结束后,会执行invokeInsertHook
,所有已挂载节点,如果VNode.data.hooks
中存在insert
钩子。则会调用,此时会触发指令绑定的inserted
方法。
一般首次创建只会走bind
和inserted
方法,而update
和componentUpdated
则与bind
和inserted
对应。在组件依赖状态发生改变时,会用VNode diff
算法,对节点进行打补丁式更新,其调用流程:
- 响应式数据发生改变,调用
dep.notify
,通知数据更新。 - 调用
patchVNode
,对新旧VNode
进行差异化更新,并全量更新当前VNode
属性(包括指令,就会进入updateDirectives
方法)。 - 如果指令存在
update
钩子方法,调用update
钩子方法,并初始化componentUpdated
回调,将postpatch hooks
挂载到VNode.data.hooks
中。 - 当前节点及子节点更新完毕后,会触发
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
,这是因为在指令的声明周期内,bind
和inserted
只是在初始化时调用一次,后面只会走update
和componentUpdated
。
指令的声明周期执行顺序为bind -> inserted -> update -> componentUpdated
,如果指令需要依赖于子组件的内容时,推荐在componentUnpdated
中写相应业务逻辑。
vue
中,很多方法都是循环调用,如hooks
方法,事件回调等,一般调用都用try catch
包裹,这样做的目的是为了防止一个处理方法报错,导致整个程序崩溃,这一点在我们开发过程中可以借鉴使用。
小结
开始看整个vue
源码时,对很多细枝末节方法都不怎么了解,通过梳理具体每个功能的实现时,渐渐能够看到整个vue
全貌,同时也能避免开发使用中的一些坑点。
Vue指令实现原理的更多相关文章
- Vue双向绑定原理,教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
- Vue渲染数据理解以及Vue指令
一.Vue渲染数据原理 原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏 ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- vue响应式原理解析
# Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...
- [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串
本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- Vue视图渲染原理解析,从构建VNode到生成真实节点树
前言 在 Vue 核心中除了响应式原理外,视图渲染也是重中之重.我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐. 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组 ...
随机推荐
- 操作系统中的进程同步与Window中利用内核对象进行线程同步的关系
操作系统中为了解决进程间同步问题提出了用信号量机制,信号量可分为四种类型分别是互斥型信号量,记录型信号量,AND型信号量,信号量集. 互斥型信号量 互斥型信号量是资源数量为1的特殊的记录型信号量.表示 ...
- 最优运输(Optimal Transfort):从理论到填补的应用
目录 引言 1 背景 2 什么是最优运输? 3 基本概念 3.1 离散测度 (Discrete measures) 3.2 蒙日(Monge)问题 3.3 Kantorovich Relaxation ...
- linux远程下载文件 的两种方法之 ftp命令和scp命令
ftp命令: 服务器有安装ftp Server,另外一台linux可以使用ftp的client程序来进行文件的拷贝读取和下载. 1. 连接ftp服务器 格式:ftp [hostname| ip-ad ...
- CRM系统自动化业务流程的好处
CRM系统的自动化可以简单化企业大部分工作,而且覆盖销售,市场,服务和财务部门,使团队有大量时间花在业务流程上. CRM系统自动化的建立是为了更好地使工作更为简单且便于管理,自动化释放出来员工的时间, ...
- 统一UOS操作系统 修改源地址
统一UOS操作系统 修改源地址 问题: 执行apt-get update的时候提示: root@sugon-PC:/etc/apt# apt-get update -y错误:1 https://uos ...
- Mysql_源码包安装详细过程
一.mysql安装 1.二进制安装 2.源码包安装 3.rpm包安装 1.源码包安装 1)上传或下载源码包 [root@db02 ~]# rz mysql-5.6.46.tar.gz 2)安装依赖 由 ...
- mysql基础之视图、事务、索引、外键
一.视图 视图是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的查询所引用的表,并且在引用 ...
- linux中级之HAProxy基础配置
一.haproxy简介 HAProxy是一款提供高可用性.负载均衡以及基于TCP(第四层)和HTTP(第七层)应用的代理软件,HAProxy是完全免费的.借助HAProxy可以快速并且可靠的提供基于T ...
- 优秀电路资料--- IOT方案
完整的IOT方案 http://www.cirmall.com/circuit/4117/%E3%80%90%E5%BC%80%E6%BA%90%E3%80%91%E5%AE%8C%E6%95%B4% ...
- Nginx/LVS/HAProxy对比分析
Nginx/LVS/HAProxy简单介绍: Nginx:专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率 .它支持内核Poll模型,能经受高负载的考验,有报告表明能支持高达 50,000 ...