vue自定义指令update 和 componentUpdated及bind 和 inserted区别

1. 适用

需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

2. 钩子函数参数

除了 el 之外，其它参数都应该是只读的，切勿进行修改

<div v-if="show" v-my-directive:arguments.modification="1+1" class="focus">

name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 + componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。注意字符串的表达式
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。注意字符串的foo是固定值，不是变量
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。注意表示有foo、bar修饰符值为true

3. 动态指令参数

v-mydirective:[argument]="value"

argument可以是动态变化的，并且在钩子里面实时更新的

4.钩子区别

update 和 componentUpdated

共同点： 组件更新都会调用，update在componentUpdated之前不同点：update 组件更新前的状态componentUpdated 组件更新后的状态

场景：点击事件，div的内容追加！；

update(el, binding,vnode,oldVnode){console.log(el.innerHTML);       // <div>！</div>
}componentUpdated(el, binding,vnode,oldVnode){console.log(el.innerHTML);       // //<div>！！</div>
}
// 注意： 区别是div里面的！数量

bind 和 inserted

共同点： dom插入都会调用，bind在inserted之前不同点：bind 时父节点为 nullinserted 时父节点存在。bind是在dom树绘制前调用，inserted在dom树绘制后调用

bind: function (el) {console.log(el.parentNode)  // nullconsole.log('bind')
},
inserted: function (el) {console.log(el.parentNode)  // <div class="directive-box">...</div>console.log('inserted')
}

注意：

1.自定义指令的钩子里面没有vue实例，this指向undefined

摘自：https://segmentfault.com/a/1190000019651831

vue自定义指令update 和 componentUpdated及bind 和 inserted区别相关推荐

vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令需求效果全局 - 自定义指令代码局部 - 自定义指令代码自定义命令传值效果代码问点需求获取标签,扩展额外的功能效果全局 - 自定义指令代码 // mai ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...
29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted 1.什么事自定义指令 1.2使用自定义指令的方式 2.设置自定义组件 2.1 设置全局指令 2.2 设置私有指令 2.3 钩子函数 3. 案例 1 ...
vue自定义指令的使用
vue2.x自定义指令的使用此处举一个表格高度自适应的例子 1.新建一个js文件 import Vue from 'vue';let resize = null;resize = Vue.direc ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
vue自定义指令使用
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
Vue自定义指令介绍及原理
Vue自定义指令 Vue指令: 在使用Vue框架进行前端开发时,我们经常会使用一些特殊指令来快速实现一些效果或功能. 常见指令如:v-bind.v-if (v-else).v-show.v-html等 ...