Vue指令的实现原理是什么


本篇内容介绍了“Vue指令的实现原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!官网案例:初始化全局API时,在platforms/web下,调用createPatchFunction生成VNode转换为真实DOM的patch方法,初始化中比较重要一步是定义了与DOM节点相对应的hooks方法,在DOM的创建(create)、激活(avtivate)、更新(update)、移除(remove)、销毁(destroy)过程中,分别会轮询调用对应的hooks方法,这些hooks中一部分是指令声明周期的入口。模板编译就是解析指令参数,具体解构后的ASTElement如下所示:vue推荐采用指令的方式去操作DOM,由于自定义指令可能会修改DOM或者属性,所以避免指令对模板解析的影响,在生成渲染方法时,首先处理的是指令,如v-model,本质是一个语法糖,在拼接渲染函数时,会给元素加上value属性与in 香港云主机put事件(以input为例,这个也可以用户自定义)。vue的指令设计是方便我们操作DOM,在生成VNode时,指令并没有做额外处理。在vue初始化过程中,我们需要记住两点:状态的初始化是 父 -> 子,如beforeCreate、created、beforeMount,调用顺序是 父 -> 子真实DOM挂载顺序是 子 -> 父,如mounted,这是因为在生成真实DOM过程中,如果遇到组件,会走组件创建的过程,真实DOM的生成是从子到父一级级拼接。在patch过程中,每此调用createElm生成真实DOM时,都会检测当前VNode是否存在data属性,存在,则会调用invokeCreateHooks,走初创建的钩子函数,核心代码如下:以上是指令钩子方法的第一个入口,是时候揭露directive.js神秘的面纱了,核心代码如下:对于首次创建,执行过程如下:1.oldVnode === emptyNode,isCreate为true,调用当前元素中所有bind钩子方法。2.检测指令中是否存在inserted钩子,如果存在,则将insert钩子合并到VNode.data.hooks属性中。3.DOM挂载结束后,会执行invokeInsertHook,所有已挂载节点,如果VNode.data.hooks中存在insert钩子。则会调用,此时会触发指令绑定的inserted方法。一般首次创建只会走bind和inserted方法,而update和componentUpdated则与bind和inserted对应。在组件依赖状态发生改变时,会用VNode diff算法,对节点进行打补丁式更新,其调用流程:1.响应式数据发生改变,调用dep.notify,通知数据更新。2.调用patchVNode,对新旧VNode进行差异化更新,并全量更新当前VNode属性(包括指令,就会进入updateDirectives方法)。3.如果指令存在update钩子方法,调用update钩子方法,并初始化componentUpdated回调,将postpatch hooks挂载到VNode.data.hooks中。4.当前节点及子节点更新完毕后,会触发postpatch hooks,即指令的componentUpdated方法核心代码如下:unbind方法是在节点销毁时,调用invokeDestroyHook,这里不做过多描述。使用自定义指令时,和普通模板数据绑定,v-model还是存在一定的差别,如虽然我传递参数(v-xxx=’param’)是一个引用类型,数据变化时,并不能触发指令的bind或者inserted,这是因为在指令的声明周期内,bind和inserted只是在初始化时调用一次,后面只会走update和componentUpdated。指令的声明周期执行顺序为bind -> inserted -> update -> componentUpdated,如果指令需要依赖于子组件的内容时,推荐在componentUpdated中写相应业务逻辑。vue中,很多方法都是循环调用,如hooks方法,事件回调等,一般调用都用try catch包裹,这样做的目的是为了防止一个处理方法报错,导致整个程序崩溃,这一点在我们开发过程中可以借鉴使用。“Vue指令的实现原理是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注开发云网站,小编将为大家输出更多高质量的实用文章!

相关推荐: CSS如何实现水平与垂直居中

今天小编给大家分享一下CSS如何实现水平与垂直居中的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。首先我先创建一个公共的模板样式然后具体用到的样式…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 07/19 16:10
下一篇 07/19 16:10

相关推荐