Vue指令的钩子函数使用方法
在Vue 中可以把一系列复杂的操作包装为一个指令。
什么是复杂的操作?
我的理解是:复杂逻辑功能的包装、违背数据驱动的 DOM 操作以及对一些 Hack 手段的掩盖等。我们总是期望以操作数据的形式来实现功能逻辑。
钩子函数
对于自定义指令的定义,Vue2 有 5 个可选的钩子函数。
bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次,指令与元素解绑时调用。
接下来,定义一个简单的指令以验证这些钩子函数的触发时机。
template
1
2
3
4
5
6
|
< 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
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 个钩子函数的触发时机有了初步的认识。存疑的也就是bind和inserted、update和componentUpdated的区别了。
bind 和 inserted
据文档所说,插入父节点时调用 inserted,来个测试。
1
2
3
4
5
6
7
8
|
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
关于这两个的介绍,从字眼上看感觉是组件更新周期有关,继续验证。
1
2
3
4
5
6
7
8
|
update: function (el) { console.log(el.innerHTML) // Hello console.log( 'update' ) }, componentUpdated: function (el) { console.log(el.innerHTML) // Hi console.log( 'componentUpdated' ) } |
没毛病,update 和 componentUpdated 就是组件更新前和更新后的区别。
结论
文档说的没错……
转自脚本之家...
Vue指令的钩子函数使用方法的更多相关文章
- vue第十三单元(指令的作用,指令的钩子函数)
第十三单元(指令的作用,指令的钩子函数) #课程目标 1.了解自定义指令的应用场景 2.掌握自定义全局和局部指令 3.掌握指令的钩子函数 #知识点 #一.认识自定义指令 除了核心功能默认内置的指令 ( ...
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- Vue系列之 => 钩子函数生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VueRouter和Vue生命周期(钩子函数)
一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...
- vue之router钩子函数
模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...
- vue父子组件钩子函数的执行顺序
加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
- 第三章 指令-- 30 指令-使用钩子函数的第二个binding参数拿到传递的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 关于 vue 生命周期 钩子函数 事件
vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...
- vue生命周期钩子函数详解
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35585701/article/ ...
随机推荐
- python --爬虫基础 --爬猫眼top 100 使用 requests 库的基本操作
import requests import re import json import time def get_page(url): # 获取页数 headers = { 'User-Agent' ...
- 3.3.1 Validations
摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...
- SuperMap(无对应字段)空间属性挂接
一.数据准备 将一个没有基本属性的模型数据集和一个含有位置等属性信息的shp属性表进行挂接,两组数据之间没有连接字段,但同属一个坐标系下,只能通过空间位置信息进行属性挂接. 二.数据处理 基本思路:将 ...
- 16个最佳响应式HTML5框架分享
HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分 ...
- (转)Windows上使用CMake
CMake简介 原文:http://blog.gclxry.com/use-cmake-on-windows/ 你或许听过好几种 Make 工具,例如 GNU Make ,QT 的 qmake ,微软 ...
- 数据库主键ID生成策略
前言: 系统唯一ID是我们在设计一个系统的时候常常会遇见的问题,下面介绍一些常见的ID生成策略. Sequence ID UUID GUID COMB Snowflake 最开始的自增ID为了实现分库 ...
- flot中文详解
调用plot函数的方法如下: var plot = $.plot(placeholder, data, options) Data的结构: data应该是data series的一个数组: [ ser ...
- MySQL error2003错误原因以及解决方案
转自:http://hi.baidu.com/tianxia339/item/8e8849111461ea7e7a5f2540 出现ERROR 2003 (HY000): Can't connect ...
- ActiveMQ:Exception occurred while processing this request, check the log for more information!
出现上面错误的原因有以下两种 1 jdk的版本和activemq的版本不符 安装完ActiveMQ之后,通过http://IP:8161登陆到控制台. 通过测试代码给服务端发送队列消息,在控制台点击q ...
- String类的substring方法
下列程序的输出是什么? class A { public static void main(String[] a) { String v = “base”; v.concat(“ba ...