干货来了,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"
时,它也会应用在它上面的任何定制指令
- ASP.NET应用下基于SessionState的“状态编程框架”解决方案
- 为自定义配置的编辑提供”智能感知”的支持
- 在ASP.NET Core应用中如何设置和获取与执行环境相关的信息?
- 在ASP.NET MVC中如何应用多个相同类型的ValidationAttribute?
- [ASP.NET MVC]如何定制Numeric属性/字段验证消息
- 为.NET Core项目定义Item Template
- 晚绑定场景下对象属性赋值和取值可以不需要PropertyInfo
- 一个关于反序列化的小问题
- 两个简单的扩展方法:TrimPrefix和TrimSuffix
- 谈谈Nullable<T>的类型转换问题
- ASP.NET MVC是如何运行的(3): Controller的激活
- ASP.NET MVC是如何运行的[2]: URL路由
- 一个简单的小程序演示Unity的三种依赖注入方式
- 在Entity Framework中使用存储过程(三):逻辑删除的实现与自增长列值返回
- 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 数组属性和方法
- automagica 调用windows画图以及登录qq
- 数据库PostrageSQL-高级特性
- 数据库PostgreSQL-安装
- CentOS 7 安装 PHP 7.4.0 正式版
- ABAP实现设计模式里的观察者-发布者模式
- 如何在SAP S/4HANA里创建自定义的partner function
- Rust 往事 | Loop 和 While True 之争
- 数字成像系统概述
- 在SAP C4C里使用Restful服务消费SAP S/4HANA的标准功能
- SAP Spartacus里的StorefrontConfig静态类型
- SAP Spartacus B2cStorefrontModule.withConfig的实现
- SAP Spartacus 页面元数据
- leetcode-easy-array-合并两个有序数组
- django配置mysql数据库
- Spring整合WebSocket