获取 this
Vue2
中每个组件里使用 this
都指向当前组件实例,this
上还包含了全局挂载的东西、路由、状态管理等啥啥都有
但是 Vue3
中 this
的指向发生了变化,this
指向的是当前组件的 Proxy
代理对象,而不是组件实例,所以 this
上没有全局挂载的东西、路由、状态管理等,如果想要获取这些东西,需要通过 getCurrentInstance()
方法获取当前组件实例,然后再获取。
<script setup>
import {getCurrentInstance} from 'vue'
// proxy就是当前组件实例,可以理解为组件级别的 this,没有全局的、路由、状态管理之类的
const {(proxy, appContext)} = getCurrentInstance()
// 这个 global 就是全局实例
const global = appContext.config.globalProperties
</script>
全局注册(属性/方法)
Vue2
中我们要往全局上挂载东西通常就是如下,然后在所有组件里都可以通过 this.xxx
获取到了
Vue.prototype.xxx = xxx
而 Vue3
中不能这么写了,换成了一个能被所有组件访问到的全局对象,就是上面说的全局实例的那个对象,比如在 main.js
中做全局注册
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 添加全局属性
app.config.globalProperties.name = 'leinov'
// 添加全局方法
app.config.globalProperties.say = function () {
console.log('hello')
}
// 全局指令
app.directive('focus', {
mounted(el) {
el.focus()
},
})
// 全局过滤器
app.config.globalProperties.$filters = {
toUpperCase(value) {
return value.toUpperCase()
},
}
// 全局混入
app.mixin({
created() {
console.log('全局混入')
},
})
// 全局组件
app.component('global', {
template: '<div>全局组件</div>',
})
app.mount('#app')
其他组件调用
<template>
<div>
<div>{{ name }}</div>
<div>{{ say() }}</div>
<div>input: <input v-focus /></div>
<div>{{ 'hello' | toUpperCase }}</div>
<global></global>
</div>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
const { appContext } = getCurrentInstance()
const { name, say } = appContext.config.globalProperties
</script>
template
Vue2
中只能一个根元素,Vue3
中可以多个根元素
<!-- vue3 -->
<template>
<div>1</div>
<div>2</div>
</template>
获取 Dom
Vue3
中获取 Dom
<template>
<div>
<div ref="divRef">div</div>
<button @click="change">change</button>
<Child ref="childRef" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const divRef = ref(null)
const childRef = ref(null)
// proxy 获取到
console.log(proxy.$refs.divRef)
const change = () => {
console.log(divRef.value)
console.log(childRef.value)
}
// ts 中获取组件类型
const childRef = ref(InstanceType<typeof Child>)
// 也可以这样 获取 element ui 的组件类型
const formRef = ref<InstanceType<typeof ElForm>>()
formRef.value?.validate((valid) => { ... })
</script>
初始化
Vue2
中进入页面就请求接口,或者其他一些初始化的操作,一般放在 created
或 mounted
,而 Vue3
中 beforeCreated
和 created
这俩钩子就不用了,因为 setup 在这俩之前执行,还要这俩的话就多此一举了
<template>
<div>
<div>{{ count }}</div>
<button @click="add">add</button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { get } from '@/api'
const count = ref(0)
onMounted(async () => {
// 请求接口
const { data } = await get('/api/count')
count.value = data
})
const add = () => {
count.value++
}
</script>
解除绑定
Vue2
中一般清除定时器、监听之类的操作有两种方法:
- 在
beforeDestroy
钩子里清除 - 在
created
钩子里返回一个函数,这个函数里清除
Vue3
中 beforeDestroy
钩子也不用了,因为 setup
在这之前执行,而 setup
里可以使用 onUnmounted
/ deactiated
钩子
<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
返回的属性在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: 'lein',
age: 18,
...
})
console.log(data.name) // lein
// 也有人一个组件里 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: 'lein',
age: 18,
})
// 这样虽然能拿到 name / age,但是会变成普通变量,没有响应式效果了
const { name, age } = data
// 取出来一个响应式属性
const name = toRef(data, 'name')
// 这样解构出来的所有属性都是有响应式的
const { name, age } = toRefs(data)
// 不管是 toRef 还是 toRefs,这样修改是会把 data 里的 name 改掉的
// 就是会改变源对象属性,这才是响应式该有的样子
name.value = 'lein123'
</script>
watch
watch
就是用来监听一个已有属性,发生变化的时候做某些操作,Vue2 中常用有如下三种写法
watch: {
userId: 'getData',
userName (newName, oldName) {
this.getData()
},
userInfo: {
handler (newVal, newVal) { this.getData() },
immediate: true,
deep: true
}
}
Vue3
的 watch
是一个函数,能接收三个参数,参数一是监听的属性,参数二是接收新值和老值的回调函数,参数三是配置项
<script setup>
import { watch, ref, reactive } from 'vue'
const name = ref('lein')
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
回调函数中能接收第三个参数 onInvalidate
,为清除副作用的函数,首次触发监听的回调函数(handler)
不会执行 onInvalidate
,之后每次触发默认会先执行 onInvalidate
就是说默认它的执行机制在更新之前调用,比如如下代码,当 key
触发更新时会先打印 222
再打印 lein
,如果需要在更新之后调用,可以在 watch
第三个配置项中添加 flush: post
,
<script setup>
// 回调函数接收一个参数,为清除副作用的函数
watch(key, (newKey, oldKey, onInvalidate) => {
console.log('lein')
// 获取DOM默认获取到的是更新前的dom,如果是flush: post,可以获取到更新后的dom
console.log('DOM节点:', dom.innterHTML)
onInvalidate(() => {
console.log(2222)
})
})
</script>
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('lein')
onInvalidate(() => {
console.log(2222)
})
})
</script>
watchEffect
如果需要修改配置项 flush
为 post
或 sync
时,可以直接使用别名
watchEffect(() => {...}, {
flush: 'post',
})
// 和下面这个是一样的
watchPostEffect(() => {})
-----------------------------
watchEffect(() => {...}, {
flush: 'sync',
})
// 和下面这个是一样的
watchSyncEffect(() => {})
computed
Vue2
中 computed
最见的使用场景一般有: mapGetters/mapState
获取状态管理的属性、 获取 url
上的属性、条件判断、类型转换之类的,支持函数和对象两种写法
而 Vue3
中 computed
不再是一个对象,而是一个函数,用法其实基本差不多,函数第一个参数是侦听器源,用于返回计算的新值,也支持对象写法,第二个参数可用于调试
<script setup>
import { computed } from 'vue'
const props = defineProps(['visible', 'type'])
const emit = defineEmits(["myClick"])
// 函数写法,计算类型
const isFirst = computed(() => props.type === 1)
// 对象写法
const status = computed({
get () { return props.visible }, // 相当于 Vue2中的 this.visible
set (val) { emit('myClick', val) } // 相当于 Vue2中的 this.$emit('input', val)
})
// computed 第二个参数也是一个对象,调试用的
const hehe = computed(参数一上面两种都可, {
onTrack (e) { debugger }
onTrigger (e) { debugger }
})
</script>
nextTick
nextTick
的使用方法,除了不能用 this
其他的和 Vue2
一模一样,还是三种方式
<script setup>
import { nextTick } from 'vue'
// 方式 一
const handleClick = async () => {
await nextTick()
console.log('lein')
}
// 方式二
nextTick(() => {
console.log('lein')
})
// 方式三
nextTick().then(() => {
console.log('lein')
})
</script>
mixins 和 hooks
Vue2
中逻辑的抽离复用一般用 mixins
,缺点有三:
- 没有独立命名空间,
mixins
会和组件内部产生命名冲突 - 不去翻代码不知道引入的
mixins
里面有啥 - 引入多个
mixins
时不知道自己使用的是来自哪一个mixins
的
Vue3
中逻辑抽离复用的 hooks
语法,其实就是一个函数,可以传参,拿返回值来用。或者可以这样理解:平时要封装公用的方法是怎么写的?Vue3
里就可以怎么写
// xxx.js
expport const getData = () => {}
export default function unInstance () {
...
return {...}
}
// xxx.vue
import unInstance, { getData } from 'xx.js'
const { ... } = unInstance()
onMounted(() => {
getData()
})
组件通信
Vue3 组件通信的方式,有如下几种:
- props + defineProps
- defineEmits
- defineExpose/ref
- useAttrs
- v-model(支持多个)
- provide/inject
- Vuex/Pina
多个 v-model
Vue2
中每个组件上只能写一个 v-model
,子组件没有写 model
的话,默认在 props
接收 value
即可,修改就是用 this.$emit('input')
事件
Vue3
中每个组件每个组件上支持写多个 v-model
,没有了 .sync
和 model
重命名的操作,也不需要了,写 v-model
的时候就需要把命名一起写上去了,如下:
// 父组件写法
<template>
<child v-model:name="name" v-model:age="age" />
</template>
<script setup>
import { ref } from 'vue'
const name = ref('lein')
const age = ref(18)
</script>
// 子组件
<script setup>
const emit = defineEmits(['update:name', 'update:age'])
const handleClick = () => {
console.log('点击了')
emit('update:name', '这是新的名字')
}
</script>
状态管理
Vuex 用法和 Vue2 基本一样,从 0 开始的话建议直接用 Pinia 。
Vuex4 用户法 如下
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Store from './store'
const app = createApp(App)
app.use(Store)
...
// 模块:store/user/index.js
export default {
state: {},
getters: {},
actions: {},
mutations: {}
}
// store/index.js
import { createStore } from 'vuex'
import user from './user'
const store = createStore({
state: {},
getters: {},
actions: {},
mutations: {},
modules: {
user
}
})
export default store
// 需要用到状态管理的 .vue 文件里
<script setup>
import { useStore } from 'vuex'
const store = useStore()
// 打这个 store 打印出来看下,相当于 Vue2 里的 this.$store,用法基本一样
console.log(store)
</script>
路由
Vue-Router 4
使用如下,主要是 route
和 router
打印出来看一下就知道了
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Router from './router'
const app = createApp(App)
app.use(Router)
...
// router/index.js
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// 这个 routes 数组里面就和 vue2 一样写
const routes = [ // ts版这行就是 const routes: Array<RouteRecordRaw> = [
{ path: '/', redirect: { name: 'login' } }
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL), // 项目没用这个就不传
routes
})
export default router
// 需要用到路由的 .vue 文件里
<script setup>
import { useRoute, useRouter } from "vue-router"
// route 对应 Vue2 里的 this.$route
const route = useRoute()
// router 对应 Vue2 里的 this.$router
const router = useRouter()
</script>
CSS 样式穿透
Vue2
中在 scoped
中修改子组件或者组件库中的组件样式,改不了的情况下,就可以用样式穿透,不管是 Less
还是 SASS
都是用 /deep/ .class {}
来做样式穿透,而 Vue3
中就不支持 /deep/
的写法了,换成 :deep(.class)
<style lang="scss" scoped>
// 这样写不生效的话
.el-form {
.el-form-item { ... }
}
// Vue2 中这样写
/deep/ .el-form {
.el-form-item { ... }
}
// Vue3 中这样写
:deep(.el-form) {
.el-form-item { ... }
}
</style>
// 别再这样加一个没有 scoped 的 style 标签了,全都加到全局上去了 //
<style lang="scss">
// .el-form {
// .el-form-item { ... }
// }
//
</style>
CSS 绑定 JS 变量
就是 CSS 中可以使用 JS 的变量来赋值,如下
<template>
<div class="name">沐华</div>
</template>
<script setup>
import { ref } from 'vue'
const str = ref('#f00') // 红色
</script>
<style scoped lang="scss">
.name {
background-color: v-bind(str); // JS 中的色值变量 #f00 就赋值到这来了
}
</style>