全局注册(属性/方法):
vue2:
Vue.prototype.xxx = xxx
vue3:
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 添加全局属性
app.config.globalProperties.name = '沐华'
.
在其他组件中调用:
<script setup>
import { getCurrentInstance } from 'vue'
const { appContext } = getCurrentInstance()const global = appContext.config.globalProperties
console.log(global.name) // 沐华
</script>
template
Vue2 中只能有一个根节点,而 Vue3 中支持多个根节点
<template>
<div>1</div>
<div>2</div>
</template>
获取 DOM
Vue3 中获取 DOM 如下:
<template>
<el-form ref="formRef"></el-form>
<child-component />
</template>
<script setup lang="ts">
import ChildComponent from './child.vue'
import { getCurrentInstance } from 'vue'
import { ElForm } from 'element-plus'// 方法一,这个变量名和 DOM 上的 ref 属性必须同名,会自动形成绑定
const formRef = ref(null)
console.log(formRef.value) // 这就获取到 DOM 了// 方法二
const { proxy } = getCurrentInstance()
proxy.$refs.formRef.validate((valid) => { ... })// 方法三,比如在 ts 里,可以直接获取到组件类型
// 可以这样获取子组件
const formRef = ref<InstanceType<typeof ChildComponent>>()
// 也可以这样 获取 element ui 的组件类型
const formRef = ref<InstanceType<typeof ElForm>>()
formRef.value?.validate((valid) => { ... })
初始化
Vue2 中进入页面就请求接口,或者其他一些初始化的操作,一般放在 created 或 mounted,而 Vue3 中 beforeCreated 和 created 这俩钩子就不用了,因为 setup 在这俩之前执行,还要这俩的话就多此一举了
所以以前用在 beforeCreated / created / beforeMount / mounted 这几个钩子里的内容,在 Vue3 中可以直接放在 setup 里,或者放在 onMounted/onBeforeMount 里
<script setup>
import { onMounted } from 'vue'// 请求接口函数
const getData = () => {
xxxApi.then(() => { ... })
}onMounted(() => {
getData()
})
</script>
解除绑定
Vue2 中一般清除定时器、监听之类的操作有两种方法:
- 一是用
$once
搭配hook: BeforeDestroy
使用,这个 Vue3 不支持了 - 二是用
beforeDestroy / deactivated
这俩钩子,Vue3 中只是把钩子函数重命名了一下
<script setup>
import { onBeforeUnmount, onDeactivated } from 'vue'// 组件卸载前,对应 Vue2 的 beforeDestroy
onBeforeUnmount(() => {
clearTimeout(timer)
window.removeAddEventListener('...')
})// 退出缓存组件,对应 Vue2 的 deactivated
onDeactivated(() => {
clearTimeout(timer)
window.removeAddEventListener('...')
})
</script>
ref 和 reactive
这两都是用于创建响应式对象,ref 通常用于创建基础类型,reactive 通常用于创建响应式,这是官方推荐的,现实中也不尽然,有人也用 ref 来定义数组,也有人一个组件只定义一个 reactive,所有数据都放里面,就像 Vue2 的 data 一样,也有人都用
需要知道的有两点:
ref 如果传入的是引用类型,内部源码也是调用 reactive 来实现的
ref 返回的属性在 template 中使用,直接用就是了,但是在 JS 中使用,需要通过 .value 获取,如下。因为 ref 返回的是一个包装对象
<template>
<div>{{ count }}</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const count = ref(1)// 有人这么用
const arr = ref([])
console.log(arr.value) // []// 也有人这么用,一个组件里所有的属性全部定义在一个对象里,有点 Vue2 data 的味道
const data = reactive({
name: '沐华',
age: 18,
...
})
console.log(data.name) // 沐华// 也有人一个组件里 ref 和 reactive 两种都用,随便你
</script>
为什么 ref 要返回一个包装对象?Vue2 中 data 都是返回一个对象这都知道
因为对象引用类型,可以用来做代理或劫持,如果只返回基础类型的话,存储在栈中,执行栈里执行完就回收了,没有办法添加代理或劫持,自然就没办法追踪后续的变化,所以不得不返回一个对象,这样才能有响应式
toRef 和 toRefs
这两共同点就是用来创建响应式的引用的,主要用来取出响应式对象里的属性,或者解构响应式对象,解构出来的属性值依然是响应式属性,如果不用这两直接解构的话是会丢失响应式效果的
主要就是方便我们使用直接变量 xxx,而不需要 data.xxx。并且我们修改 xxx 的时候也是直接修改源对象属性的
这两的区别:带 s 和不带 s,就是单数和复数嘛,意思就是取一个和取一堆咯
<script setup>
import { reactive, toRef, toRefs } from 'vue'
const data = reactive({
name: '沐华',
age: 18
})
// 这样虽然能拿到 name / age,但是会变成普通变量,没有响应式效果了
const { name, age } = data
// 取出来一个响应式属性
const name = toRef(data, 'name')
// 这样解构出来的所有属性都是有响应式的
const { name, age } = toRefs(data)
// 不管是 toRef 还是 toRefs,这样修改是会把 data 里的 name 改掉的
// 就是会改变源对象属性,这才是响应式该有的样子
name.value = '沐沐华华'
</script>
watch 与 watchEffect
watch
就是用来监听一个已有属性,发生变化的时候做某些操作,Vue2 中常用有如下三种写法
watch: {
userId: 'getData',
userName (newName, oldName) {
this.getData()
},
userInfo: {
handler (newVal, newVal) { this.getData() },
immediate: true,
deep: true
}
}
而 Vue3 中监听的写法就丰富得多了
Vue3 的 watch
是一个函数,能接收三个参数,参数一是监听的属性,参数二是接收新值和老值的回调函数,参数三是配置项
<script setup>
import { watch, ref, reactive } from 'vue'
const name = ref('沐华')
const data = reactive({
age: 18,
money: 100000000000000000000,
children: []
})
// 监听 ref 属性
watch(name, (newName, oldName) => { ... })
// 监听其他属性、路由或者状态管理的都这样
watch(
() => data.age,
(newAge, oldAge) => { ... }
)
// 监听多个属性,数组放多个值,返回的新值和老值也是数组形式
watch([data.age, data.money], ([newAge, newMoney], [oldAge, oldMoney]) => { ... })
// 第三个参数是一个对象,为可配置项,有5个可配置属性
watch(data.children, (newList, oldList) => { ... }, {
// 这两个和 Vue2 一样,没啥说的
immediate: true,
deep: true,
// 回调函数的执行时机,默认在组件更新之前调用。更新后调用改成post
flush: 'pre', // 默认值是 pre,可改成 post 或 sync
// 下面两个是调试用的
onTrack (e) { debugger }
onTrigger (e) { debugger }
})
</script>
关于副作用,watch 和后面说到的 watchEffect 是一样的。
在 watch 回调函数中能接收第三个参数 onInvalidate,为清除副作用的函数,首次触发监听的回调函数(handler)不会执行 onInvalidate,之后每次触发默认会先执行 onInvalidate
就是说默认它的执行机制在更新之前调用,比如如下代码,当 key 触发更新时会先打印 222 再打印 沐华,如果需要在更新之后调用,可以在 watch 第三个配置项中添加 flush: post,
// 回调函数接收一个参数,为清除副作用的函数
watch(key, (newKey, oldKey, onInvalidate) => {
console.log('沐华')
// 获取DOM默认获取到的是更新前的dom,如果是flush: post,可以获取到更新后的dom
console.log('DOM节点:', dom.innterHTML)
onInvalidate(() => {
console.log(2222)
})
})
onInvalidate
的使用场景就是:比如监听的回调函数(handler)里有一些异步操作,当再次触发 watch
的时候可以用它来对前面未完成的异步任务执行取消/忽略/重置/初始化某些操作,比如取消上一次触发 watch
时未完成的请求
watchEffect
Vue3 中除了 watch
还增加了一个 watchEffect
。区别是:
watch 是对传入的一个或多个值进行监听,触发时会返回新值和老值,且默认第一次不会执行
watchEffect 是传入一个立即执行函数,所以默认第一次就会执行,且不需要传入监听内容,会自动收集函数内的数据源作为依赖,当依赖发生变化时会重新执行函数(有点像computed的味道),而且不会返回新值和老值
清除副作用和副作用的刷新时机是一样的,区别是 watch 中会作为回调的第三个参数传入,watchEffect 中是回调函数的第一个参数
正常情况下组件销毁/卸载后这两都会自动停止监听,但也有例外,比如异步的方式,在 setTimeout 里创建的监听就都需要手动停止监听,停止方式如下
// 监听方法赋值
const unwatch = watch('key', callback)
const unwatchEffect = watchEffect(() => {})
// 需要停止监听的时候,手动调用停止监听
unwatch()
unwatchEffect()
watchEffect
使用:
<script setup>
import { watchEffect } from 'vue'
// 正常使用
watchEffect(() => {
// 会自动收集这个函数使用到的属性作为依赖,进行监听
// 监听的是 userInfo.name 属性,不会监听 userInfo
console.log(userInfo.name)
})
// 有两个参数,参数一是触发监听回调函数,参数二是可选配置项
watchEffect(() => {...}, {
// 这里是可配置项,意思和 watch 是一样的,不过这只有3个可配置的
flush: 'pre',
onTrack (e) { debugger }
onTrigger (e) { debugger }
})
// 回调函数接收一个参数,为清除副作用的函数,和 watch 的同理
watchEffect(onInvalidate => {
console.log('沐华')
onInvalidate(() => {
console.log(2222)
})
})
</script>
watchEffect
如果需要修改配置项 flush
为 post
或 sync
时,可以直接使用别名,如下
watchEffect(() => {...}, {
flush: 'post',
})
// 和下面这个是一样的
watchPostEffect(() => {})
-----------------------------
watchEffect(() => {...}, {
flush: 'sync',
})
// 和下面这个是一样的
watchSyncEffect(() => {})
Vue3 组件通信的方式
props + defineProps
defineEmits
defineExpose / ref (comp.value.xxx 获取子组件对外暴露的属性;// 调用子组件对外暴露的方法)
useAttrs
v-model(支持多个)
provide / inject
Vuex / Pinia
mitt (Vue3 中没有了 EventBus 跨组件通信,但是现在有了一个替代的方案 mitt.js,原理还是 EventBus,先安装 npm i mitt -S)