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

2024-04-14 18:56:29

在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 个钩子函数的触发时机有了初步的认识。存疑的也就是bind和inserted、update和componentUpdated的区别了。

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()
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue常用指令V-model用法

v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title&
详解VUE中v-bind的基本用法

这两天学习了v-bind的基本用法,所以,今天添加一点小笔记. 1. v-bind:class(根据需求进行选择) 1.1 <style> .box{ background-color: #ff0; } .textColor{ color: #000; } .textSize{ font-size: 30px; } </style> <div id="app"> <span class="box" :class="
Vue.js自定义指令的用法与实例解析

市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来.用自定义指令可以非常方便的实现这个功能. 效果: 自定义
深入理解vue $refs的基本用法

我最近在研究vue 的路上,看到了vue $refs的用法,那么今天也算个学习笔记吧! <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> <script> new Vue({ el: "#app", metho
vue的基本用法与常见指令

什么是vue? Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁.易于理解的API.Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件. vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变,模型内容也跟着改变, 业界称之为双向绑定,或者说双向数据驱动,基于此特点,学习这个框架,跟jquery完全不
Vue指令的钩子函数使用方法

在Vue 中可以把一系列复杂的操作包装为一个指令. 什么是复杂的操作? 我的理解是:复杂逻辑功能的包装.违背数据驱动的 DOM 操作以及对一些 Hack 手段的掩盖等.我们总是期望以操作数据的形式来实现功能逻辑. 钩子函数对于自定义指令的定义,Vue2 有 5 个可选的钩子函数. bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中).
vue动画—通过钩子函数实现半场动画操作

注意: 1.起始位置设置了一个(0,0)在第一遍执行时,是没有作用的.在一次入场动画执行完成之后,在最终位置停下来并不在起始位置,通过这里的位置的设置可以将入场动画结束时的位置调到这里 2.理解enter()函数的el的指代对象和done()指代的回调函数 3.理解this.show = !this.show,这句话有两个作用.一是:控制显示和隐藏,二是:false -> true为半场动画,true->false又是为另半场动画.这样就能完成一直循环执行半场动画的效果了. HTML代码: &
聊聊vue生命周期钩子函数有哪些,分别什么时候触发

目录 vue生命周期钩子函数以下为详解版生命周期mounted和activated使用.踩坑 activated mounted 踩坑 vue生命周期钩子函数 vue生命周期即为一个组件从出生到死亡的一个完整周期主要包括以下4个阶段:创建,挂载,更新,销毁创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂载后:mounted 更新前:beforeUpdate, 更新后:updated 销毁前:beforeDestroy, 销毁后:destro
解决Vue中mounted钩子函数获取节点高度出错问题

遇到的问题最近在开发一个Vue的项目,好几个页面都有用到一个页面楼层滑动的组件,我就直接封装成了一个,但是遇到一个bug,就是我需要得到这个组件的offsetTop,然后页面滚动到这个位置的时候,就设置position属性为fixed,让他固定在屏幕上.问题是当我在mounted钩子函数中获取offsetTop的时候,在新开的页签中打开页面,会得到错误的offsetTop,但是在当前页面刷新,就不会有问题. 定位问题后来查到问题,就是加载的问题,新窗口打开图片,默认是没有带缓存的,图片是G
Vue自定义指令封装节流函数的方法示例

节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子: function throttle (method, context) { clearTimeout((method.tId)) method.tId = setTimeout(function () { method.call(context) }, 100) } function resizeDiv
vue 自定义指令directives及其常用钩子函数说明

目录自定义指令directives及常用钩子函数说明钩子函数 vue 全局定义局部定义(vue-cli) 钩子函数里面的参数 vue 自定义指令 directives选项 directives选项中定义指令自定义指令directives及常用钩子函数说明除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令使用的地方:有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令钩子函数 inserted:被绑定元素插
实现一个Vue自定义指令懒加载的方法示例

在项目中如果有大量的图片需要加载的时候,就可以考虑使用懒加载了,懒加载其实就是监听浏览器的滚动,当滚动到一定的范围的时候就将图片的真实路径赋给src,然后取消监听.实现的方法也比较简单,可以通过懒加载的插件实现,也可以手写,手写通过vue自定义指令来实现,一般情况自定义指令用的也不多,比较vue自带的就够用了,大型复杂的项目的可能用的多. 什么是图片懒加载当我们向下滚动的时候图片资源才被请求到,这也就是我们本次要实现的效果,进入页面的时候,只请求可视区域的图片资源这也就是懒加载. 比如我们加载
详解Vue源码学习之callHook钩子函数

Vue实例在不同的生命周期阶段,都调用了callHook方法.比如在实例初始化(_init)的时候调用callHook(vm, 'beforeCreate')和callHook(vm, 'created'). 这里的"beforeCreate","created"状态并非随意定义,而是来自于Vue内部的定义的生命周期钩子. var LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mount
vue parseHTML函数源码解析start钩子函数

目录正文 platformGetTagNamespace 源码 isForbiddenTag 函数 addIfCondition是什么 processIfConditions 源码正文接上章节:parseHTML 函数源码解析 AST 预备知识现在我们就可以愉快的进入到Vue start钩子函数源码部分了. start: function start(tag, attrs, unary) { // check namespace. // inherit parent ns if ther
Vue动态修改网页标题的方法及遇到问题

业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案结合业务直接在Vue生命周期函数 created 和 mounted 中,给 document.title赋值. <script> import axios from 'axios' export default { created () { document.title = '功能授权' },

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

相关推荐

随机推荐