日日加班日忙，需求襲來如虎狼。測驗問題堆如山，萬念俱灰歸故鄉。
相關學習推薦：javascript
#最近在工作之餘一直學習Vue3.0相關知識，雖然Vue3.0至今還是rc版，但這並不影響我們去學習。今天這篇文章是我關於Vue3.0的第四篇文章。在前文中我們講解瞭如何透過vite和vuecli建構Vue3.0開發環境，然後介紹了Vue3.0中的setup,reactive,ref等，今天這篇文章主要講解了以下內容:
Vue3.0 中使用watch
Vue3.0中使用計算屬性Vue3.0中使用vue-router
Vue3.0中使用vuex
開始本文前，小編提供了一個Vue3.0開發環境，倉庫位址為gitee.com/f_zijun/vue…，歡迎使用。本文首刊於公眾號【前端有的玩】，這是一個專注於Vue與面試相關的公眾號，提升自己的市場競爭力，就在【前端有的玩】。同時點選以下連結即可存取小編關於Vue3.0的其他相關文章
#學習Vue3.0,先來了解Proxy
使用vite建構一個Vue3.0學習環境
# #Vue3.0中使用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
}
)
})
}
}
}复制代码監聽函數表達式除了監聽字串之外，this.$watch(() => this.name, () => { // 函数的返回值发生变化，进入此回调函数})复制代码上文中就是Vue2.0中我們使用watchVue3.0，因為其對Vue2.0做了部分的向下相容，所以上面的用法在Vue3.0中基本上都可以使用，但是Vue3.0一個很大的亮點就是composition API,所以除了Vue2.0中的寫法之外，也可以使用componsition api中提供的watch在Vue3.0中使用watch
Vue3.0中，除了Vue2.0
api可以對資料變化進行監聽，第一種是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)
}
}复制代码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的用法与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> <p class="about">
<h1>{{ name }}</h1>
</p></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-routervue-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 { useStore } from 'vuex'export default {
setup() {
const store = useStore()
const roleMenus = store.getters['roleMenus']
return {
roleMenus
}
}
}复制代码其余的使用方式基本和Vue2.0中的用法是一致的，大家具体可以参考vuex官方文档
在前文中，我们说到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基本是一致的，只是写法发生了变化，所以学习成本是很低的。
这是小编关于Vue3.0的第四篇文章，每一篇文章都是自己在学习中做的一些总结。小编整理了一个vue3.0的开发环境，仓库地址为 gitee.com/f_zijun/vue…，内部集成了typescript,eslint,vue-router,vuex,ant desigin vue等，希望可以帮到正在学习Vue3.0的你，同时关注公众号【前端有的玩】，带给你不一样的惊喜。喜欢本文，可以给小编一个赞哦。
不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高
以上是使用Vue3.0收穫的知識點（二）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
