Vue指令的钩子函数使用方法


Posted in Javascript onMarch 20, 2017

在Vue 中可以把一系列复杂的操作包装为一个指令。

什么是复杂的操作?

我的理解是:复杂逻辑功能的包装、违背数据驱动的 DOM 操作以及对一些 Hack 手段的掩盖等。我们总是期望以操作数据的形式来实现功能逻辑。

钩子函数

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

bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次,指令与元素解绑时调用。

接下来,定义一个简单的指令以验证这些钩子函数的触发时机。

template

<div id="app">
 <my-comp v-if="msg" :msg="msg"></my-comp>
 <button @click="update">更新</button>
 <button @click="uninstall">卸载</button>
 <button @click="install">安装</button>
</div>

script

Vue.directive('hello', {
 bind: function (el) {
  console.log('bind')
 },
 inserted: function (el) {
  console.log('inserted')
 },
 update: function (el) {
  console.log('update')
 },
 componentUpdated: function (el) {
  console.log('componentUpdated')
 },
 unbind: function (el) {
  console.log('unbind')
 }
})
var myComp = {
 template: '<h1 v-hello>{{msg}}</h1>',
 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'
  }
 }
})

页面加载时

bind
inserted

组件更新时

点击“更新”按钮,更改数据触发组件更新。

update
componentUpdated

卸载组件时

点击“卸载”按钮,数据置空否定判断以触发组件卸载。

unbind

重新安装组件时

点击“安装”按钮,数据赋值肯定判断以触发组件重新安装。

bind
inserted

区别

从案例的运行中,对 5 个钩子函数的触发时机有了初步的认识。存疑的也就是bindinserted、updatecomponentUpdated的区别了。

bind 和 inserted

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

bind: function (el) {
 console.log(el.parentNode) // null
 console.log('bind')
},
inserted: function (el) {
 console.log(el.parentNode) // <div id="app">...</div>
 console.log('inserted')
}

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

update 和 componentUpdated

关于这两个的介绍,从字眼上看感觉是组件更新周期有关,继续验证。

update: function (el) {
 console.log(el.innerHTML) // Hello
 console.log('update')
},
componentUpdated: function (el) {
 console.log(el.innerHTML) // Hi
 console.log('componentUpdated')
}

没毛病,update 和 componentUpdated 就是组件更新前和更新后的区别。

结论

文档说的没错……
Demo

最佳实践

根据需求的不同,我们要选择恰当的时机去初始化指令、更新指令调用参数以及释放指令存在时的内存占用等。

比较常见的场景是:用指令包装一些无依赖的第三方库以扩展组件功能。而一个健壮的库通常会包含:初始化实例、参数更新和释放实例资源占用等操作。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
javascript RegExp 使用说明
May 21 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
非常实用的vue导航钩子
Mar 20 #Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 #Javascript
如何解决vue与传统jquery插件冲突
Mar 20 #Javascript
Vue.js路由vue-router使用方法详解
Mar 20 #Javascript
Vue插件写、用详解(附demo)
Mar 20 #Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 #Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 #Javascript
You might like
php中file_exists函数使用详解
2015/05/08 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
js重写方法的简单实现
2016/07/10 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
Python实现的简单hangman游戏实例
2015/06/28 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python 标准差计算的实现(std)
2019/07/29 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
python程序输出无内容的解决方式
2020/04/09 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
夜不归宿检讨书
2014/02/25 职场文书
经理助理岗位职责
2014/03/05 职场文书
药品营销策划方案
2014/06/15 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
导游词之青岛崂山
2019/12/27 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
把77A收信机改造成收音机
2022/04/05 无线电