vue3的生命周期

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

vue3的watch的變化和watchEffect()

在vue2里面采用的是一個(gè)對象的形式，然后在里面去監(jiān)聽不同的值牺荠，在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)在的語法類似各類ui框架一樣要按需引入</br>
這里的wacth函數(shù)接收兩個(gè)參數(shù)曙咽，第一個(gè)參數(shù)是我們要檢測的值，第二個(gè)是回調(diào)函數(shù)挑辆，和以前一樣擁有新舊兩個(gè)值</br>
同時(shí)，vue3的watch支持同時(shí)監(jiān)聽多個(gè)值孝情，以數(shù)組的形式:

import {watch} from 'vue'

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

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

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

它是一個(gè)方法箫荡，接收一個(gè)回調(diào)函數(shù)魁亦，他不需要去指定監(jiān)聽誰，它會(huì)去自動(dòng)收集依賴羔挡，只要在回調(diào)函數(shù)中使用了的屬性洁奈，在發(fā)生變化的時(shí)候，都會(huì)去觸發(fā)這個(gè)回調(diào)函數(shù)绞灼，這樣就會(huì)變得非常簡單利术，在業(yè)務(wù)中，我們不必去特意的監(jiān)聽某某屬性低矮，而是直接把他寫在其回調(diào)函數(shù)中印叁，就可以自動(dòng)幫我們收集依賴

其它

• Composition API

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

• createApp()
  vue2中是使用new Vue的方式寸莫，vue3使用createApp的方式，本質(zhì)是沒有太大的區(qū)別档冬，但是呢膘茎，在之前我們每次注冊一些全局的組建，mixin酷誓，plugins披坏，prototype等，都會(huì)是這樣的方式盐数，Vue.mixin(...xxx)這樣的方式棒拂，會(huì)造成，全局只有一個(gè)app的實(shí)例玫氢，這樣就會(huì)造成實(shí)例污染帚屉，而在vue3中，createApp會(huì)返回一個(gè)全新的app漾峡，可以很好的避免這個(gè)問題

• Vue3如何注冊全局組件

    app.component('componentName', component)

• Vue3如何注冊自定義指令

/** 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的寫法