使用Vue3.0收获的知识点（二）

日日加班日日忙，需求袭来如虎狼。 测试问题堆如山，万念俱灰归故乡。

相关学习推荐：javascript

最近在工作之余一直学习Vue3.0相关知识，虽然Vue3.0至今还是rc版，但这并不影响我们去学习。今天这篇文章是我关于Vue3.0的第四篇文章。在前文中我们讲解了如何通过vite和vuecli搭建Vue3.0开发环境，然后介绍了Vue3.0中的setup,reactive,ref等，今天这篇文章主要讲解了以下内容:

1. Vue3.0中使用watch
2. Vue3.0中使用计算属性
3. Vue3.0中使用vue-router
4. Vue3.0中使用vuex

开始本文前，小编提供了一个Vue3.0开发环境，仓库地址为 gitee.com/f_zijun/vue…，欢迎使用。本文首发于公众号【前端有的玩】，这是一个专注于Vue与面试相关的公众号，提升自己的市场竞争力，就在【前端有的玩】。同时点击以下链接即可访问小编关于Vue3.0的其他相关文章

学习Vue3.0,先来了解一下Proxy

使用vite搭建一个Vue3.0学习环境

使用Vue3.0收获的知识点（一）

Vue3.0中使用watch

watch在Vue3.0中并不是一个新的概念，在使用Vue2.x的时候，我们经常会使用watch来监听Vue实例上面的一个表达式或者一个函数计算结果的变化。

回顾Vue2.0中的watch

在Vue2.0中，我们使用watch可以通过下面多种方式去监听Vue实例上面的表达式或者函数计算结果的变化,如下罗列了其中的几种

1. 最常规使用方式

   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去深度监听对象里面的属性，不论嵌套层级有多深。

2. 使用$watch监听

   除了常规的watch对象写法之外，Vue实例上面提供了$watch方法，可以通过$watch更灵活的去监听某一个属性的变化。比如这样一个场景，我们有一个表单，然后希望在用户修改表单之后可以监听到表单的数据变化。但是有一个特殊的场景，就是表单的回填数据是异步请求过来的，这时候我们希望在后台请求完数据之后再去监听变化，这时候就可以使用$watch。如下代码所示:

   export default {  methods: {     loadData() {       fetch().then(data => {        this.formData = data        this.$watch(          'formData',           () => {            // formData数据发生变化后会进入此回调函数           },           {            deep: true           }         )       })     }   } }复制代码

3. 监听函数表达式

   除了监听字符串之外，$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)   } }复制代码

1. 停止执行

   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)   } }复制代码

   2. 清除副作用

      想象一下这样的一个场景，界面上面有两个下拉框，第二个下拉框的数据是根据第一个下拉框的数据联动的，当第一个下拉框数据发生变化后，第二个下拉框的数据会通过发送一个网络请求进行获取。这时候我们可以通过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的作用基本是一样的。

1. 在Vue2.0中使用计算属性

     computed: {     getName() {      const { firstName, lastName } = this.info      return firstName + lastName     }   },复制代码

2. 在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-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 { useStore } from 'vuex'export default {   setup() {     const store = useStore()     const roleMenus = store.getters['roleMenus']     return {       roleMenus     }   } }复制代码

其余的使用方式基本和Vue2.0中的用法是一致的，大家具体可以参考vuex官方文档

Vue3.0中的生命周期钩子函数

在前文中，我们说到Vue3.0是兼容一部分Vue2.0的，所以对于Vue2.0的组件写法，生命周期钩子函数并未发生变化，但是假如你使用的是componsition api,那么就需要做一部分调整

1. 取消beforeCreate与created

   在使用componsition api的时候，其实setup就代替了beforeCreate与created,因为setup就是组件的实际入口函数。

2. beforeDestroy与destroyed 改名了

   在setup中，beforeDestroy更名为onBeforeUnmount,destroyed更名为onUnmounted

3. 将生命周期函数名称变为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的你，同时关注公众号【前端有的玩】，带给你不一样的惊喜。喜欢本文，可以给小编一个赞哦。

结语

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高