Vue指令的钩子函数使用方法_javascript技巧_脚本之家

在Vue 中得以把一文山会海复杂的操作包装为一个限令。

什么是眼花缭乱的操作?

自个儿的知道是:复杂逻辑成效的包装、违背数据驱动的 DOM 操作以致对一部分 Hack手腕的覆盖等。大家连年希望以操作数据的款型来促效能益逻辑。

钩子函数

对此自定义指令的定义,Vue2 有 5 个可选的钩子函数。

bind:
只调用三次,指令第四回绑定到成分时调用,用这些钩子函数能够定义三个在绑定期进行二回的开始化动作。inserted:
被绑定元素插入父节点时调用(父节点存在就能够调用,不必存在于 document
中)。update:
被绑定成分所在的模版更新时调用,而任由绑定值是还是不是变动。componentUpdated:
被绑定成分所在模板实现一回改善周期时调用。unbind:
只调用三次,指令与成分解绑时调用。

接下去,定义三个简便的一声令下以证实这一个钩子函数的触发机会。

  更新 卸载 安装

Vue.directive('hello', { bind: function  { console.log }, inserted: function  { console.log }, update: function  { console.log }, componentUpdated: function  { console.log }, unbind: function  { console.logvar myComp = { template: '{{msg}}', props: { msg: String }}new Vue({ el: '#app', data: { msg: 'Hello' }, components: { myComp: myComp }, methods: { update: function () { this.msg = 'Hi' }, uninstall: function () { this.msg = '' }, install: function () { this.msg = 'Hello' } }})

页面加载时

bindinserted

组件更新时

点击“更新”开关,改善数据触发组件更新。

updatecomponentUpdated

卸载组件时

点击“卸载”开关,数据置空否定剖断以触发组件卸载。

重新安装组件时

点击“安装”按键,数据赋值料定剖断以触发组件重新安装。

Vue指令的钩子函数使用方法_javascript技巧_脚本之家。bindinserted

区别

从案例的运作中,对 5
个钩函数的触发时机有了开端的认知。存疑的也正是bind和inserted、update和componentUpdated的区分了。

bind 和 inserted

据文书档案所说,插入父节点时调用 inserted,来个测量试验。

bind: function  { console.log // null console.log},inserted: function  { console.log // ... console.log}

分级在七个钩函数中输出父节点:bind 时父节点为 null,inserted
时父节点存在。

update 和 componentUpdated

关于这七个的介绍,从字眼上看感到是组件更新周期有关,继续申明。

update: function  { console.log // Hello console.log},componentUpdated: function  { console.log // Hi console.log}

没毛病,update 和 componentUpdated 正是组件更新前和翻新后的分别。

结论

文书档案说的对的……德姆o

一级实行

依附必要的不等,大家要选拔适用的火候去开首化指令、更新指令调用参数以至自由指令存在时的内部存款和储蓄器占用等。

相比普遍的光景是:用命令包装一些无借助的第三方库以扩充组件作用。而七个强壮的库常常会含有:开首化实例、参数更新和刑释实例能源占用等操作。

Vue.directive('hello', { bind: function  { // 在 bind 钩子中初始化库实例 // 如果需要使用父节点,也可以在 inserted 钩子中执行 el.__library__ = new Library }, update: function  { // 模版更新意味着指令的参数可能被改变,这里可以对库实例的参数作更新 // 酌情使用 update 或 componentUpdated 钩子 el.__library__.setOptions(Object.assign(binding.oldValue, binding.value)) }, unbind: function  { // 释放实例 el.__library__.destory

如上就是本文的全部内容,希望对我们的求学抱有助于,也愿意我们多多点拨脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图