Vue 3 迁移策略笔记—— 第6节：自定义指令

前言本笔记主要基于官方文档《迁移策略——自定义指令》汇总而来。如有理解出入，请以官方文档为主。概述为了更好的与组件生命周期保持一致，Vue 3.x 对自定义指令的钩子函数进行了重命名。Vue 2.x 自定义指令的声明周期bind——指令绑定到元素时触发，只触发一次；inserted——绑定元素被插入父DOM时触发update——当元素更新而子元素还没有更新时触发；componentUpdated—

杰~JIE

2680人浏览 · 2021-01-27 15:39:51

杰~JIE · 2021-01-27 15:39:51 发布

前言

本笔记主要基于官方文档《迁移策略——自定义指令》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

概述

为了更好的与组件生命周期保持一致，Vue 3.x 对自定义指令的钩子函数进行了重命名。

Vue 2.x 自定义指令的声明周期

bind——指令绑定到元素时触发，只触发一次；
inserted——绑定元素被插入父DOM时触发
update——当元素更新而子元素还没有更新时触发；
componentUpdated——组件和子组件更新完成后触发；
unbind——接触绑定时触发，只触发一次；

Vue 3.x 自定义指令的声明周期

beforeMount——替代bind
mounted ——替代inserted
beforeUpdate——移除Vue2.x 中的update，用beforeUpdate和updated 来替代
updated
beforeUnmount——卸载元素前调用
unmounted ——替代unbind

自定义指令用法

局部用法：

<template>
	<div>
		<p v-highlight="'yellow'">Highlight this text bright yellow</p>
	</div>
</template>

<script>
export default {
	name: 'customDirective',
	directives: {
		highlight: {
			beforeMount(el, binding, vnode, prevVnode) {
				el.style.background = binding.value;
				console.log(el);
				console.log(binding);
				console.log(vnode);
				console.log(prevVnode);
			}
		}
	}
};
</script>

全局用法：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('focus', {
    // When the bound element is mounted into the DOM...
    mounted(el) {
        // Focus the element
        console.log(el);
        el.focus()
    }
})
app.mount('#app')

用法详细说明可查阅：《Vue3.0 directive的使用说明》

instance 的变动

在 Vue 3.x 中，绑定组件的实例(instance)从 Vue 2.x 的vnode移到了binding中：

Vue 2.x :

bind(el, binding, vnode) {
  const vm = vnode.context
}

Vue 3.x :

mounted(el, binding, vnode) {
  const vm = binding.instance
}

本系列目录

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^