You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
var dir = this
if (this.update) {
// 处理一下原本的update函数,加入lock判断
this._update = function (val, oldVal) {
if (!dir._locked) {
dir.update(val, oldVal)
}
}
} else {
this._update = function() {}
}
在上面主要谈了下vue整个compile编译过程,其实最主要任务就是提取节点属性、根据属性创建成对应的指令directive实例并保存到
this.directives
数组中,并在执行生成的linker的时候,将this.directives
中新的指令进行初始化绑定_bind
;那这儿主要谈下directive相关的知识;在前面说过,自定义组件的渲染其实也是通过指令的方式完成的,那这儿就以组件渲染过程来进行说明,如下组件:
对于自定义组件的整个编译过程,在前面已经说过了,在这就不说了,主要说下如何通过指令将真正的html添加到对应的文档中;
首先,
new directive
其实主要是对指令进行初始化配置,就不多谈;主要说下其中
this._bind
方法,它是指令初始化后绑定到对应元素的方法;这儿主要移出元素上添加的自定义指令,如
v-if
、v-show
等;所以当我们使用控制台去查看dom元素时,其实是看不到写在代码中的自定义指令属性;但是不包括v-cloak
,因为这个在css中需要使用;这儿主要说下
extend(this, def)
,descriptor主要是指令的一些描述信息:而,def其实就是指令对应的配置信息;也就是我们在写指令时配置的数据,如下指令:
它对应的
descriptor
就是:接着上面的,使用
extend(this, def)
就将def中定义的方法或属性就复制到实例化指令对象上面;好供后面使用;这就是执行上面刚刚保存的
bind
方法;当执行此方法时,上面就会执行将字体颜色改为绿色;
而这儿就是对需要添加双向绑定的指令添加
watcher
;对应watcher后面再进行详细说明; 可以从上看出,传入了this._update
方法,其实也就是当数据变化时,就会执行this._update
方法,而:其实也就是执行上面的
descriptor.def.update
方法,所以当值变化时,会触发我们自定义指令时定义的update方法,而发生颜色变化;这是指令最主要的代码部分;其他的如下:
而对于每个指令的处理原理,可以看其对应源码;如
v-show
源码:可以从上面看出在初始化页面绑定时,主要获取后面兄弟元素是否使用
v-else
; 如果使用,将元素保存到this.elseEl
中,而当值变化执行update
时,主要执行了this.apply
;而最终只是执行了下面代码:从而达到隐藏或者展示元素的效果;
The text was updated successfully, but these errors were encountered: