干货来了,vue 3.0 自定义指令变化
时间:2022-07-24
本文章向大家介绍干货来了,vue 3.0 自定义指令变化,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
重新设计定制的指令API
,使其更好地符合组件生命周期
组件上的自定义指令使用将遵循与Fallthrough
行为RFC
属性中讨论的相同规则。它将通过v-bind="$attrs"
由子组件控制。
const MyDirective = {
bind(el, binding, vnode, prevVnode) {},
inserted() {},
update() {},
componentUpdated() {},
unbind() {}
}
after
const MyDirective = {
beforeMount(el, binding, vnode, prevVnode) {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeUnmount() {}, // new
unmounted() {}
}
使自定义指令挂钩名称与组件生命周期更加一致。
Usage on Components
在3.0
中,通过片段支持,组件可能有多个根节点。当在具有多个根节点的组件上使用自定义指令时,就会产生问题。
为了解释自定义指令如何在3.0
组件上工作的细节,我们需要首先理解自定义指令是如何在3.0
中编译的。对于这样的指令:
<div v-foo="bar"></div>
被编译成
const vFoo = resolveDirective('foo')
return withDirectives(h('div'), [
[vFoo, bar]
])
其中vFoo
将是由用户编写的指令对象,它包含挂载和更新这样的钩子。
withdirective
返回一个克隆的VNode
,将用户钩子封装并注入为VNode
生命周期钩子(更多细节请参见渲染函数API的变化):
{
onVnodeMounted(vnode) {
// call vFoo.mounted(...)
}
}
因此,自定义指令作为VNode数据的一部分完全包括在内。当在组件上使用自定义指令时,这些onVnodeXXX
钩子作为无关的道具向下传递到组件,并最终出现在这个.$attrs
中。
这也意味着可以像模板一样直接连接到元素的生命周期中,这在定制指令太复杂的时候很方便:
<div @vnodeMounted="myHook" />
这与vuejs/rfcs#26
中讨论的属性fallthrough
行为一致。因此,组件上的定制指令规则与其他无关属性相同:由子组件决定在何处以及是否应用它。当子组件在内部元素上使用v-bind="$attrs"
时,它也会应用在它上面的任何定制指令
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- struts2(三)---使用EL表达式,显示Action中的数据
- 02 . 分布式存储之FastDFS 高可用集群部署
- 11 . KubernetesRBAC认证及ServiceAccount、Dashboard
- 12 . Kubernetes之Statefulset 和 Operator
- 01 . SaltStack部署配置及简单应用
- 02 . SaltStack高级用法(Python API)
- 小加载动画
- 日志收集工具简单对比
- [蓝桥杯][2013年第四届真题]幸运数
- 04 . Filebeat简介原理及配置文件和一些案例
- 05 . ELK Stack+Redis日志收集平台
- python开发【第一篇】
- 内置函数--bin() oct() int() hex()
- 08 . Prometheus+Grafana监控haproxy+rabbitmq
- 内置函数值 -- chr() ord() -- 字符和ascii的转换