开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 23 天，点击查看活动详情
VUE3.x 动画和高级语法
Mixin 混入
-
优先级
- 数据和方法：组件 data ，methods 优先级高于 mixin data，methods 优先级
- 生命周期：生命周期函数，先执行 mixin 里面的，再执行组件里的
- 自定义的属性，组件中的属性优先级高于 mixin 属性的优先级
-
局部 Mixin
mixins:[myMixin], myMixin 是一个自定义组件
-
全局 Mixin app.mixin()
PS：Vue3 中尽量避免使用 Mixin，因为可以使用 CompositionAPI 来代替，可维护性更高。
directive 自定义指令
- 全局自定义指令
- 定义方法：app.directive('focus',{mounted(el){el.focus()}})
- 使用方法：
<input v-focus />
- 局部自定义指令
- 局部指令需要在父组件注册后才可以使用
- 生命周期函数
- directive 也是由生命周期的，所以声明周期函数同样起作用。
- 生命周期函数接受两个参数绑定形式：v-pos:abc="hello"
- el：DOM 元素
- binding： 传递的属性值
- 获取 hello 方法：binding.value
- 获取 abc 方法：binding.tag
Teleport 传送门
- 通过传送门，可以把 VUE 里的标签，直接传送到 VUE 应用之外的顶层标签里去。比如直接传送到标签之下。
- 基本语法：
<teleport to="body">......</teleport>
Plugin-插件
- plugin 插件，目的是把通用性的功能封装起来。
- 创建插件固定语法：
const myPlugin = { install(app , options){}} - app：整个 Vue 的实例，里边有很多东西,options 是传递内容
- 使用插件写法：app.use(myPlugin,{name:'hello'})
- myPlugin：插件名字
- {name:'hello'} : 传递的参数
父子通信 props
和 vue2 一样通过 props 和 emit 进行父子通信，写法上略有差别
<script setup>
// 父传子
defineProps({
value: {
type: Number,
default: 1
}
})
// 子传父
const emit = defineEmits(['change', 'setValue'])
// 模板绑定的监听函数
function changeValue(val) {
emit('change', val)
}
function changeSet(val) {
emit('setValue', val)
}
</script>
父组件的使用方法和 vue2 相同
<child :value="value" @change="change" @setValue="setValue"></child>
计算属性 computed
由于 vue3 中没有 this 指针，因此使用计算属性需要自己自行导入
<script setup>
import { computed } from '@vue/runtime-core'
const value = computed(() => {
return 1 + 1
})
</script>
watch 监听器
watch 监听器的使用比较简单，并不需要导入，直接使用即可。
<script setup>
// dataSources是被监听的变量
watch(() => dataSources, () => {
console.log(dataSources)
})
</script>
全局函数/变量注册
// main.js 注册 element-plus 的一个消息提示
import { ElMessage } from 'element-plus'
app.config.globalProperties.$message.success = () => {
ElMessage({
message: "OK",
type: 'success'
})
}
render 函数和 h 函数
使用 render 函数描述虚拟 Dom 时，vue 提供了一个函数，这个函数是构建虚拟 Dom 所需要的工具，叫做 createElement，约定的简写叫 h
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 23 天，点击查看活动详情
