vue3的生命周期

• vue2的beforeCreate和create變成了setup
• 除了setup外大部分還是vue2的名字，只是在前面加了個(gè)on
• vue2的destroyed和beforDestroy變成了onUnmounted（尤大的解釋是Unmounted更加語(yǔ)義化，卸載的意思比vue2的銷(xiāo)毀更加形象）
• 關(guān)于調(diào)試函數(shù)，目前官方文檔也沒(méi)有過(guò)多講解

vue3的watch的變化和watchEffect()

在vue2里面采用的是一個(gè)對(duì)象的形式，然后在里面去監(jiān)聽(tīng)不同的值，在vue3已經(jīng)發(fā)生了改變：

import {watch} from 'vue'

watch(a, (newVal, oldVal) => {
    console.log(newVal, '===', oldVal)
})

vue3的watch基礎(chǔ)用法已經(jīng)改變，想要使用watch，必須先引入，vue3現(xiàn)在的語(yǔ)法類(lèi)似各類(lèi)ui框架一樣要按需引入</br>
這里的wacth函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是我們要檢測(cè)的值，第二個(gè)是回調(diào)函數(shù)，和以前一樣擁有新舊兩個(gè)值</br>
同時(shí)，vue3的watch支持同時(shí)監(jiān)聽(tīng)多個(gè)值，以數(shù)組的形式:

import {watch} from 'vue'

watch([a, b], ([newValA, newValB], [oldValA, oldValB]) => {
    console.log(newValA, newValB, '===', oldValA, oldValB)
})

監(jiān)聽(tīng)多個(gè)值，對(duì)應(yīng)的回調(diào)函數(shù)的形參里的新舊值就也是多個(gè)，這樣的監(jiān)聽(tīng)會(huì)讓我們的業(yè)務(wù)做某些對(duì)比判斷的時(shí)候更加的靈活</br>
watchEffect是vue3提出的一個(gè)新的API:

import {watchEffect} from 'vue'
watchEffect(() => console.log(name))

它是一個(gè)方法，接收一個(gè)回調(diào)函數(shù)，他不需要去指定監(jiān)聽(tīng)誰(shuí)，它會(huì)去自動(dòng)收集依賴(lài)，只要在回調(diào)函數(shù)中使用了的屬性，在發(fā)生變化的時(shí)候，都會(huì)去觸發(fā)這個(gè)回調(diào)函數(shù)，這樣就會(huì)變得非常簡(jiǎn)單，在業(yè)務(wù)中，我們不必去特意的監(jiān)聽(tīng)某某屬性，而是直接把他寫(xiě)在其回調(diào)函數(shù)中，就可以自動(dòng)幫我們收集依賴(lài)

其它

• Composition API

  • Compositon API不是一個(gè)api，而是很多個(gè)API組合的一套API，我們統(tǒng)稱(chēng)為這名字，vue2中,我們會(huì)在methods，computed，watch，data中等等定義屬性和方法，共同處理頁(yè)面邏輯，我們稱(chēng)這種方式為Options API，這樣的方式在項(xiàng)目過(guò)大的時(shí)候我們發(fā)現(xiàn)，一個(gè)methods定義數(shù)十個(gè)方法的時(shí)候，還得準(zhǔn)備知道每個(gè)方法的this，作用，干嘛的就會(huì)變得非常麻煩，而Composition API就是解決這個(gè)問(wèn)題的
  • vue3 Composition API中，我們的代碼是根據(jù)邏輯功能來(lái)組織的，一個(gè)功能所定義的所有api會(huì)放在一起（更加的高內(nèi)聚，低耦合），這樣做，即使項(xiàng)目很大，功能很多，我們都能快速的定位到這個(gè)功能所用到的所有API

• createApp()
  vue2中是使用new Vue的方式，vue3使用createApp的方式，本質(zhì)是沒(méi)有太大的區(qū)別，但是呢，在之前我們每次注冊(cè)一些全局的組建，mixin，plugins，prototype等，都會(huì)是這樣的方式，Vue.mixin(...xxx)這樣的方式，會(huì)造成，全局只有一個(gè)app的實(shí)例，這樣就會(huì)造成實(shí)例污染，而在vue3中，createApp會(huì)返回一個(gè)全新的app，可以很好的避免這個(gè)問(wèn)題

• Vue3如何注冊(cè)全局組件

    app.component('componentName', component)

• Vue3如何注冊(cè)自定義指令

/** v-snine */
app.directive('snine', {
  inserted: function (el) {
    el.snine()
  },
})

• Vue3如何全局混入

const app = createApp(App)
app.mixin({
  beforeCreate() {
    console.log('我是全局mixin')
  },
})

• Vue3如何全局掛載屬性和方法

const app = createApp(App)
    
// 全局ctx(this) 上掛載 $axios 需要掛載在globalProperties
app.config.globalProperties.$axios = axios

• Vue3已經(jīng)移除了filter

• Vue2和Vue3的生命周期可以混用

• Vue3中可以使用vue2的寫(xiě)法