今天这篇文章主要讲解了以下内容:
Vue3.0
中使用watch
Vue3.0
中使用计算属性Vue3.0
中使用vue-router
Vue3.0
中使用vuex
Vue3.0
中使用watch
watch
在Vue3.0
中并不是一个新的概念,在使用Vue2.x
的时候,我们经常会使用watch
来监听Vue
实例上面的一个表达式或者一个函数计算结果的变化。
回顾Vue2.0
中的watch
在Vue2.0
中,我们使用watch
可以通过下面多种方式去监听Vue
实例上面的表达式或者函数计算结果的变化,如下罗列了其中的几种
最常规使用方式
export default { data() { return { name: '子君', info: { gzh: '前端有的玩' } } }, watch: { name(newValue, oldValue) { console.log(newValue, oldValue) }, 'info.gzh': { handler(newValue, oldValue) { console.log(newValue, oldValue) }, // 配置immediate会在watch之后立即执行 immediate: true } } }
我们可以在
watch
属性里面配置要监听的Vue
实例上面的属性,也可以通过.
键路径去监听对象中的某一个属性的变化,也可以通过配置immediate
在监听后立即触发,配置deep
去深度监听对象里面的属性,不论嵌套层级有多深。使用
$watch
监听除了常规的
watch
对象写法之外,Vue
实例上面提供了$watch
方法,可以通过$watch
更灵活的去监听某一个属性的变化。比如这样一个场景,我们有一个表单,然后希望在用户修改表单之后可以监听到表单的数据变化。但是有一个特殊的场景,就是表单的回填数据是异步请求过来的,这时候我们希望在后台请求完数据之后再去监听变化,这时候就可以使用$watch
。如下代码所示:export default { methods: { loadData() { fetch().then(data => { this.formData = data this.$watch( 'formData', () => { // formData数据发生变化后会进入此回调函数 }, { deep: true } ) }) } } }
监听函数表达式
除了监听字符串之外,
$watch
的第一个参数也可以是一个函数,当函数的返回值发生变化之后,触发回调函数this.$watch(() => this.name, () => { // 函数的返回值发生变化,进入此回调函数 })
上文中就是Vue2.0
中我们使用watch
的一些常用写法,对于Vue3.0
,因为其对Vue2.0
做了部分的向下兼容,所以上面的用法在Vue3.0
中基本都可以使用,但是Vue3.0
一个很大的亮点就是composition API
,所以除了Vue2.0
中的写法之外,也可以使用componsition api
中提供的watch
在Vue3.0
中使用watch
在Vue3.0
中,除了Vue2.0
的写法之外,有两个api
可以对数据变化进行监听,第一种是watch
,第二种是watchEffect
。对于watch
,其与Vue2.0
中的$watch
用法基本是一模一样的,而watchEffect
是Vue3.0
新提供的api
watch的用法
下面的示例演示了如何使用watch
import { watch, ref, reactive } from 'vue'
export default {
setup() {
const name = ref('子君')
const otherName = reactive({
firstName: '王',
lastName: '二狗'
})
watch(name, (newValue, oldValue) => {
// 输出 前端有的玩 子君
console.log(newValue, oldValue)
})
// watch 可以监听一个函数的返回值
watch(
() => {
return otherName.firstName + otherName.lastName
},
value => {
// 当otherName中的 firstName或者lastName发生变化时,都会进入这个函数
console.log(`我叫${value}`)
}
)
setTimeout(() => {
name.value = '前端有的玩'
otherName.firstName = '李'
}, 3000)
}
}
watch
除了可以监听单个值或者函数返回值之外,也可以同时监听多个数据源,比如下面代码所示:
export default {
setup() {
const name = ref('子君')
const gzh = ref('前端有的玩')
watch([name, gzh], ([name, gzh], [prevName, prevGzh]) => {
console.log(prevName, name)
console.log(prevGzh, gzh)
})
setTimeout(() => {
name.value = '前端有的玩'
gzh.value = '关注我,一起玩前端'
}, 3000)
}
}
watchEffect的用法
watchEffect
的用法与watch
有所不同,watchEffect
会传入一个函数,然后立即执行这个函数,对于函数里面的响应式依赖会进行监听,然后当依赖发生变化时,会重新调用传入的函数,如下代码所示:
import { ref, watchEffect } from 'vue'
export default {
setup() {
const id = ref('0')
watchEffect(() => {
// 先输出 0 然后两秒后输出 1
console.log(id.value)
})
setTimeout(() => {
id.value = '1'
}, 2000)
}
}
停止执行
Vue2.0
中的$watch
会在调用的时候返回一个函数,执行这个函数可以停止watch
,如下代码所示const unwatch = this.$watch('name',() => {}) // 两秒后停止监听 setTimeout(()=> { unwatch() }, 2000)
在
Vue3.0
中,watch
与watchEffect
同样也会返回一个unwatch
函数,用于取消执行,比如下面代码所示export default { setup() { const id = ref('0') const unwatch = watchEffect(() => { // 仅仅输出0 console.log(id.value) }) setTimeout(() => { id.value = '1' }, 2000) // 1秒后取消watch,所以上面的代码只会输出0 setTimeout(() => { unwatch() }, 1000) } }
清除副作用
想象一下这样的一个场景,界面上面有两个下拉框,第二个下拉框的数据是根据第一个下拉框的数据联动的,当第一个下拉框数据发生变化后,第二个下拉框的数据会通过发送一个网络请求进行获取。这时候我们可以通过
watchEffect
来实现这个功能,比如像下面代码这样import { ref, watchEffect } from 'vue' function loadData(id) { return new Promise(resolve => { setTimeout(() => { resolve( new Array(10).fill(0).map(() => { return id.value + Math.random() }) ) }, 2000) }) } export default { setup() { // 下拉框1 选中的数据 const select1Id = ref(0) // 下拉框2的数据 const select2List = ref([]) watchEffect(() => { // 模拟请求 loadData(select1Id).then(data => { select2List.value = data console.log(data) }) }) // 模拟数据发生变化 setInterval(() => { select1Id.value = 1 }, 3000) } }
现在假如我切换了一下第一个下拉框的数据之后,这时候数据请求已经发出,然后我将这个页面切换到另一个页面,因为请求已经发出,所以我希望在页面离开的时候,可以结束这个请求,防止数据返回后出现异常,这时候就可以使用
watchEffect
为第一个回调函数传入的入参来处理这个情况,如下代码所示function loadData(id, cb) { return new Promise(resolve => { const timer = setTimeout(() => { resolve( new Array(10).fill(0).map(() => { return id.value + Math.random() }) ) }, 2000) cb(() => { clearTimeout(timer) }) }) } export default { setup() { // 下拉框1 选中的数据 const select1Id = ref(0) // 下拉框2的数据 const select2List = ref([]) watchEffect(onInvalidate => { // 模拟请求 let cancel = undefined // 第一个参数是一个回调函数,用于模拟取消请求,关于取消请求,可以了解axios的CancelToken loadData(select1Id, cb => { cancel = cb }).then(data => { select2List.value = data console.log(data) }) onInvalidate(() => { cancel && cancel() }) }) } }
Vue3.0
中使用计算属性
想一想在Vue2.0
中我们一般会用计算属性做什么操作呢?我想最常见的就是当模板中有一个复杂计算的时候,可以先使用计算属性进行计算,然后再在模板中使用,实际上,Vue3.0
中的计算属性的作用和Vue2.0
的作用基本是一样的。
在
Vue2.0
中使用计算属性computed: { getName() { const { firstName, lastName } = this.info return firstName + lastName } },
在
Vue3.0
中使用计算属性<template> <div class="about"> <h1>{{ name }}</h1> </div> </template> <script> import { computed, reactive } from 'vue' export default { setup() { const info = reactive({ firstName: '王', lastName: '二狗' }) const name = computed(() => info.firstName + info.lastName) return { name } } } </script>
和
Vue2.0
一样,Vue3.0
的计算属性也可以设置getter
和setter
,比如上面代码中的计算属性,只设置了getter
,即加入cumputed
传入的参数是一个函数,那么这个就是getter
,假如要设置setter
,需要像下面这样去写export default { setup() { const info = reactive({ firstName: '王', lastName: '二狗' }) const name = computed({ get: () => info.firstName + '-' + info.lastName, set(val) { const names = val.split('-') info.firstName = names[0] info.lastName = names[1] } }) return { name } } }
Vue3.0
中使用vue-router
初始化vue-router
在Vue2.0
中我们使用vue-router
的时候,会通过new VueRouter
的方式去实现一个VueRouter
实例,就像下面代码这样
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: []
})
export default router
但到了Vue3.0
,我们创建VueRouter
的实例发生了一点点变化,就像Vue3.0
在main.js
中初始化Vue
实例需要像下面写法一样
import { createApp } from 'vue'
createApp(App).$mount('#app')
vue-router
也修改为了这种函数的声明方式
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
// vue-router有hash和history两种路由模式,可以通过createWebHashHistory和createWebHistory来指定
history: createWebHashHistory(),
routes
})
router.beforeEach(() => {
})
router.afterEach(() => {
})
export default router
然后在main.js
中,通过
createApp(App).use(router)
来引用到Vue
中
在setup
中使用vue-router
在Vue2.0
中,我们通过this.$route
可以获取到当前的路由,然后通过this.$router
来获取到路由实例来进行路由跳转,但是在setup
中,我们是无法拿到this
的,这也意味着我们不能像Vue2.0
那样去使用vue-router
, 此时就需要像下面这样去使用
import { useRoute, useRouter} from 'vue-router'
export default {
setup() {
// 获取当前路由
const route = useRoute()
// 获取路由实例
const router = useRouter()
// 当当前路由发生变化时,调用回调函数
watch(() => route, () => {
// 回调函数
}, {
immediate: true,
deep: true
})
// 路由跳转
function getHome() {
router.push({
path: '/home'
})
}
return {
getHome()
}
}
}
上面代码我们使用watch
来监听路由是否发生变化,除了watch
之外,我们也可以使用vue-router
提供的生命周期函数
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
export default {
setup() {
onBeforeRouteUpdate(() => {
// 当当前路由发生变化时,调用回调函数
})
}
}
除了onBeforeRouteUpdate
之外,vue-router
在路由离开的时候也提供了一个生命周期钩子函数
onBeforeRouteLeave(() => {
console.log('当当前页面路由离开的时候调用')
})
Vue3.0
中使用vuex
其实vuex
在Vue3.0
中的使用方式和vue-router
基本是一致的
初始化vuex
首先新建store/index.js
,然后添加如下代码
import { createStore } from 'vuex'
export default createStore({
state: {},
mutations: {},
actions: {}
})
然后在main.js
中,通过以下方式使用
createApp(App).use(store)
在setup
中使用vuex
和useRouter
一样,vuex
也提供了useStore
供调用时使用,比如下面这段代码
import router from '@/router'
import store from '@/store'
router.beforeEach(async (to, from, next) => {
if (
to.path !== '/login' &&
store.getters['permission/getRoleMenus'].length === 0
) {
await store.dispatch('permission/loadRoleMenus')
next()
} else {
next()
}
})
其余的使用方式基本和Vue2.0
中的用法是一致的,大家具体可以参考vuex
官方文档
Vue3.0中的生命周期钩子函数
在前文中,我们说到Vue3.0
是兼容一部分Vue2.0
的,所以对于Vue2.0
的组件写法,生命周期钩子函数并未发生变化,但是假如你使用的是componsition api
,那么就需要做一部分调整
取消
beforeCreate
与created
在使用
componsition api
的时候,其实setup
就代替了beforeCreate
与created
,因为setup
就是组件的实际入口函数。beforeDestroy
与destroyed
改名了在
setup
中,beforeDestroy
更名为onBeforeUnmount
,destroyed
更名为onUnmounted
将生命周期函数名称变为
on+XXX
,比如mounted
变成了onMounted
,updated
变成了onUpdated
在setup
中使用生命周期函数的方式
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
}
实际用法与Vue2.0
基本是一致的,只是写法发生了变化,所以学习成本是很低的。
◆ ◆ ◆ ◆ ◆
长按关注小生
你的在看我当成喜欢