日日加班日日忙，需求襲來如虎狼。 測(cè)試問題堆如山，萬念俱灰歸故鄉(xiāng)。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的鄂爾多斯網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

相關(guān)學(xué)習(xí)推薦：javascript

最近在工作之余一直學(xué)習(xí)Vue3.0相關(guān)知識(shí)，雖然Vue3.0至今還是rc版，但這并不影響我們?nèi)W(xué)習(xí)。今天這篇文章是我關(guān)于Vue3.0的第四篇文章。在前文中我們講解了如何通過vite和vuecli搭建Vue3.0開發(fā)環(huán)境，然后介紹了Vue3.0中的setup,reactive,ref等，今天這篇文章主要講解了以下內(nèi)容:

Vue3.0中使用watchVue3.0中使用計(jì)算屬性Vue3.0中使用vue-routerVue3.0中使用vuex

開始本文前，小編提供了一個(gè)Vue3.0開發(fā)環(huán)境，倉(cāng)庫(kù)地址為 gitee.com/f_zijun/vue…，歡迎使用。本文首發(fā)于公眾號(hào)【前端有的玩】，這是一個(gè)專注于Vue與面試相關(guān)的公眾號(hào)，提升自己的市場(chǎng)競(jìng)爭(zhēng)力，就在【前端有的玩】。同時(shí)點(diǎn)擊以下鏈接即可訪問小編關(guān)于Vue3.0的其他相關(guān)文章

學(xué)習(xí)Vue3.0,先來了解一下Proxy

使用vite搭建一個(gè)Vue3.0學(xué)習(xí)環(huán)境

使用Vue3.0收獲的知識(shí)點(diǎn)（一）

Vue3.0中使用watch

watch在Vue3.0中并不是一個(gè)新的概念，在使用Vue2.x的時(shí)候，我們經(jīng)常會(huì)使用watch來監(jiān)聽Vue實(shí)例上面的一個(gè)表達(dá)式或者一個(gè)函數(shù)計(jì)算結(jié)果的變化。

回顧Vue2.0中的watch

在Vue2.0中，我們使用watch可以通過下面多種方式去監(jiān)聽Vue實(shí)例上面的表達(dá)式或者函數(shù)計(jì)算結(jié)果的變化,如下羅列了其中的幾種

最常規(guī)使用方式

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會(huì)在watch之后立即執(zhí)行
      immediate: true
    }
  }
}復(fù)制代碼

我們可以在watch屬性里面配置要監(jiān)聽的Vue實(shí)例上面的屬性，也可以通過.鍵路徑去監(jiān)聽對(duì)象中的某一個(gè)屬性的變化，也可以通過配置immediate在監(jiān)聽后立即觸發(fā)，配置deep去深度監(jiān)聽對(duì)象里面的屬性，不論嵌套層級(jí)有多深。

使用$watch監(jiān)聽

除了常規(guī)的watch對(duì)象寫法之外，Vue實(shí)例上面提供了$watch方法，可以通過$watch更靈活的去監(jiān)聽某一個(gè)屬性的變化。比如這樣一個(gè)場(chǎng)景，我們有一個(gè)表單，然后希望在用戶修改表單之后可以監(jiān)聽到表單的數(shù)據(jù)變化。但是有一個(gè)特殊的場(chǎng)景，就是表單的回填數(shù)據(jù)是異步請(qǐng)求過來的，這時(shí)候我們希望在后臺(tái)請(qǐng)求完數(shù)據(jù)之后再去監(jiān)聽變化，這時(shí)候就可以使用$watch。如下代碼所示:

export default {  methods: {
    loadData() {
      fetch().then(data => {        this.formData = data        this.$watch(          'formData',
          () => {            // formData數(shù)據(jù)發(fā)生變化后會(huì)進(jìn)入此回調(diào)函數(shù)
          },
          {            deep: true
          }
        )
      })
    }
  }
}復(fù)制代碼

監(jiān)聽函數(shù)表達(dá)式

除了監(jiān)聽字符串之外，$watch的第一個(gè)參數(shù)也可以是一個(gè)函數(shù)，當(dāng)函數(shù)的返回值發(fā)生變化之后，觸發(fā)回調(diào)函數(shù)

this.$watch(() => this.name, () => {  // 函數(shù)的返回值發(fā)生變化，進(jìn)入此回調(diào)函數(shù)})復(fù)制代碼

上文中就是Vue2.0中我們使用watch的一些常用寫法，對(duì)于Vue3.0，因?yàn)槠鋵?duì)Vue2.0做了部分的向下兼容，所以上面的用法在Vue3.0中基本都可以使用，但是Vue3.0一個(gè)很大的亮點(diǎn)就是composition API,所以除了Vue2.0中的寫法之外，也可以使用componsition api中提供的watch

在Vue3.0中使用watch

在Vue3.0中，除了Vue2.0的寫法之外，有兩個(gè)api可以對(duì)數(shù)據(jù)變化進(jìn)行監(jiān)聽，第一種是watch,第二種是watchEffect。對(duì)于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 可以監(jiān)聽一個(gè)函數(shù)的返回值
    watch(      () => {        return otherName.firstName + otherName.lastName
      },
      value => {        // 當(dāng)otherName中的 firstName或者lastName發(fā)生變化時(shí)，都會(huì)進(jìn)入這個(gè)函數(shù)
        console.log(`我叫${value}`)
      }
    )

    setTimeout(() => {
      name.value = '前端有的玩'
      otherName.firstName = '李'
    }, 3000)
  }
}復(fù)制代碼

watch除了可以監(jiān)聽單個(gè)值或者函數(shù)返回值之外，也可以同時(shí)監(jiān)聽多個(gè)數(shù)據(jù)源，比如下面代碼所示:

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 = '關(guān)注我,一起玩前端'
    }, 3000)
  }
}復(fù)制代碼

watchEffect的用法

watchEffect的用法與watch有所不同，watchEffect會(huì)傳入一個(gè)函數(shù)，然后立即執(zhí)行這個(gè)函數(shù)，對(duì)于函數(shù)里面的響應(yīng)式依賴會(huì)進(jìn)行監(jiān)聽，然后當(dāng)依賴發(fā)生變化時(shí)，會(huì)重新調(diào)用傳入的函數(shù)，如下代碼所示:

import { ref, watchEffect } from 'vue'export default {
  setup() {    const id = ref('0')
    watchEffect(() => {      // 先輸出 0 然后兩秒后輸出 1
      console.log(id.value)
    })

    setTimeout(() => {
      id.value = '1'
    }, 2000)
  }
}復(fù)制代碼

停止執(zhí)行

Vue2.0中的$watch會(huì)在調(diào)用的時(shí)候返回一個(gè)函數(shù)，執(zhí)行這個(gè)函數(shù)可以停止watch，如下代碼所示

const unwatch = this.$watch('name',() => {})// 兩秒后停止監(jiān)聽setTimeout(()=> {
  unwatch()
}, 2000)復(fù)制代碼

在Vue3.0中，watch與watchEffect同樣也會(huì)返回一個(gè)unwatch函數(shù)，用于取消執(zhí)行，比如下面代碼所示

export default {
  setup() {    const id = ref('0')    const unwatch = watchEffect(() => {      // 僅僅輸出0
      console.log(id.value)
    })

    setTimeout(() => {
      id.value = '1'
    }, 2000)    // 1秒后取消watch，所以上面的代碼只會(huì)輸出0
    setTimeout(() => {
      unwatch()
    }, 1000)
  }
}復(fù)制代碼

清除副作用

想象一下這樣的一個(gè)場(chǎng)景，界面上面有兩個(gè)下拉框，第二個(gè)下拉框的數(shù)據(jù)是根據(jù)第一個(gè)下拉框的數(shù)據(jù)聯(lián)動(dòng)的，當(dāng)?shù)谝粋€(gè)下拉框數(shù)據(jù)發(fā)生變化后，第二個(gè)下拉框的數(shù)據(jù)會(huì)通過發(fā)送一個(gè)網(wǎng)絡(luò)請(qǐng)求進(jìn)行獲取。這時(shí)候我們可以通過watchEffect來實(shí)現(xiàn)這個(gè)功能，比如像下面代碼這樣

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 選中的數(shù)據(jù)
    const select1Id = ref(0)    // 下拉框2的數(shù)據(jù)
    const select2List = ref([])
    watchEffect(() => {      // 模擬請(qǐng)求
      loadData(select1Id).then(data => {
        select2List.value = data        console.log(data)
      })
    })  // 模擬數(shù)據(jù)發(fā)生變化
    setInterval(() => {
      select1Id.value = 1
    }, 3000)
  }
}復(fù)制代碼

現(xiàn)在假如我切換了一下第一個(gè)下拉框的數(shù)據(jù)之后，這時(shí)候數(shù)據(jù)請(qǐng)求已經(jīng)發(fā)出，然后我將這個(gè)頁面切換到另一個(gè)頁面，因?yàn)檎?qǐng)求已經(jīng)發(fā)出，所以我希望在頁面離開的時(shí)候，可以結(jié)束這個(gè)請(qǐng)求，防止數(shù)據(jù)返回后出現(xiàn)異常，這時(shí)候就可以使用watchEffect為第一個(gè)回調(diào)函數(shù)傳入的入?yún)硖幚磉@個(gè)情況，如下代碼所示

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 選中的數(shù)據(jù)
    const select1Id = ref(0)    // 下拉框2的數(shù)據(jù)
    const select2List = ref([])
    watchEffect(onInvalidate => {      // 模擬請(qǐng)求
      let cancel = undefined
      // 第一個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，用于模擬取消請(qǐng)求，關(guān)于取消請(qǐng)求，可以了解axios的CancelToken
      loadData(select1Id, cb => {
        cancel = cb
      }).then(data => {
        select2List.value = data        console.log(data)
      })
      onInvalidate(() => {
        cancel && cancel()
      })
    })
  }
}復(fù)制代碼

Vue3.0中使用計(jì)算屬性

想一想在Vue2.0中我們一般會(huì)用計(jì)算屬性做什么操作呢？我想最常見的就是當(dāng)模板中有一個(gè)復(fù)雜計(jì)算的時(shí)候，可以先使用計(jì)算屬性進(jìn)行計(jì)算，然后再在模板中使用，實(shí)際上，Vue3.0中的計(jì)算屬性的作用和Vue2.0的作用基本是一樣的。

在Vue2.0中使用計(jì)算屬性

computed: {
    getName() {      const { firstName, lastName } = this.info      return firstName + lastName
    }
  },復(fù)制代碼

在Vue3.0中使用計(jì)算屬性

復(fù)制代碼

和Vue2.0一樣，Vue3.0的計(jì)算屬性也可以設(shè)置getter和setter，比如上面代碼中的計(jì)算屬性，只設(shè)置了getter,即加入cumputed傳入的參數(shù)是一個(gè)函數(shù)，那么這個(gè)就是getter,假如要設(shè)置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
    }
  }
}復(fù)制代碼

Vue3.0中使用vue-router初始化vue-router

在Vue2.0中我們使用vue-router的時(shí)候，會(huì)通過new VueRouter的方式去實(shí)現(xiàn)一個(gè)VueRouter實(shí)例，就像下面代碼這樣

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const router = new VueRouter({  mode: 'history',  routes: []
})export default router復(fù)制代碼

但到了Vue3.0,我們創(chuàng)建VueRouter的實(shí)例發(fā)生了一點(diǎn)點(diǎn)變化，就像Vue3.0在main.js中初始化Vue實(shí)例需要像下面寫法一樣

import { createApp } from 'vue'createApp(App).$mount('#app')復(fù)制代碼

vue-router也修改為了這種函數(shù)的聲明方式

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復(fù)制代碼

然后在main.js中，通過

createApp(App).use(router)復(fù)制代碼

來引用到Vue中

在setup中使用vue-router

在Vue2.0中，我們通過this.$route可以獲取到當(dāng)前的路由，然后通過this.$router來獲取到路由實(shí)例來進(jìn)行路由跳轉(zhuǎn)，但是在setup中，我們是無法拿到this的，這也意味著我們不能像Vue2.0那樣去使用vue-router, 此時(shí)就需要像下面這樣去使用

import { useRoute, useRouter } from 'vue-router'export default {
  setup() {    // 獲取當(dāng)前路由
    const route = useRoute()    // 獲取路由實(shí)例
    const router = useRouter()    // 當(dāng)當(dāng)前路由發(fā)生變化時(shí)，調(diào)用回調(diào)函數(shù)
    watch(() => route, () => {      // 回調(diào)函數(shù)
    }, {      immediate: true,      deep: true
    })  // 路由跳轉(zhuǎn)
    function getHome() {
      router.push({        path: '/home'
      })
    }  return {
      getHome()
    }
  }
}復(fù)制代碼

上面代碼我們使用watch來監(jiān)聽路由是否發(fā)生變化，除了watch之外，我們也可以使用vue-router提供的生命周期函數(shù)

import { onBeforeRouteUpdate, useRoute } from 'vue-router'export default {
  setup() {
    onBeforeRouteUpdate(() => {      // 當(dāng)當(dāng)前路由發(fā)生變化時(shí)，調(diào)用回調(diào)函數(shù)
    })
  }
}復(fù)制代碼

除了onBeforeRouteUpdate之外，vue-router在路由離開的時(shí)候也提供了一個(gè)生命周期鉤子函數(shù)

onBeforeRouteLeave(() => {   console.log('當(dāng)當(dāng)前頁面路由離開的時(shí)候調(diào)用')
})復(fù)制代碼

Vue3.0中使用vuex

其實(shí)vuex在Vue3.0中的使用方式和vue-router基本是一致的

初始化vuex

首先新建store/index.js,然后添加如下代碼

import { createStore } from 'vuex'export default createStore({  state: {},  mutations: {},  actions: {}
})復(fù)制代碼

然后在main.js中，通過以下方式使用

createApp(App).use(store)復(fù)制代碼

在setup中使用vuex

和useRouter一樣，vuex也提供了useStore供調(diào)用時(shí)使用,比如下面這段代碼

import { useStore } from 'vuex'export default {
  setup() {
    const store = useStore()
    const roleMenus = store.getters['roleMenus']
    return {
      roleMenus
    }
  }
}復(fù)制代碼

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

Vue3.0中的生命周期鉤子函數(shù)

在前文中，我們說到Vue3.0是兼容一部分Vue2.0的，所以對(duì)于Vue2.0的組件寫法，生命周期鉤子函數(shù)并未發(fā)生變化，但是假如你使用的是componsition api,那么就需要做一部分調(diào)整

取消beforeCreate與created

在使用componsition api的時(shí)候，其實(shí)setup就代替了beforeCreate與created,因?yàn)?code>setup就是組件的實(shí)際入口函數(shù)。

beforeDestroy與destroyed改名了

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

將生命周期函數(shù)名稱變?yōu)?code>on+XXX，比如mounted變成了onMounted,updated變成了onUpdated

在setup中使用生命周期函數(shù)的方式

setup() {
    onMounted(() => {      console.log('mounted!')
    })
    onUpdated(() => {      console.log('updated!')
    })
    onUnmounted(() => {      console.log('unmounted!')
    })
  }復(fù)制代碼

實(shí)際用法與Vue2.0基本是一致的，只是寫法發(fā)生了變化，所以學(xué)習(xí)成本是很低的。

總結(jié)

這是小編關(guān)于Vue3.0的第四篇文章，每一篇文章都是自己在學(xué)習(xí)中做的一些總結(jié)。小編整理了一個(gè)vue3.0的開發(fā)環(huán)境，倉(cāng)庫(kù)地址為 gitee.com/f_zijun/vue…，內(nèi)部集成了typescript,eslint,vue-router,vuex,ant desigin vue等，希望可以幫到正在學(xué)習(xí)Vue3.0的你，同時(shí)關(guān)注公眾號(hào)【前端有的玩】，帶給你不一樣的驚喜。喜歡本文，可以給小編一個(gè)贊哦。

結(jié)語

不要吹滅你的靈感和你的想象力; 不要成為你的模型的奴隸。 ——文森特?梵高

網(wǎng)站名稱：使用Vue3.0收獲的知識(shí)點(diǎn)（二）
文章地址：http://weahome.cn/article/cgpseh.html