一.簡(jiǎn)介

image.png

2020年9月18日，Vue.js發(fā)布3.0版本，代號(hào)：One Piece（海賊王）

和vue2相比它的變化有哪些

1.性能的提升

• 打包大小減少41%
• 初次渲染快55%, 更新渲染快133%
• 內(nèi)存減少54%

2.源碼的升級(jí)

• 使用Proxy代替defineProperty實(shí)現(xiàn)響應(yīng)式
• 重寫虛擬DOM的實(shí)現(xiàn)和Tree-Shaking

3.擁抱TypeScript

• Vue3可以更好的支持TypeScript

4.新的特性

• 1.Composition API（組合API）
  • setup 配置
  • ref 與 reactive
  • watch與 watchEffect
  • provide 與 inject
• 2.新的內(nèi)置組件
  • Fragment
  • Teleport
  • Suspense
• 3.Composition API（組合API）
  • 新的生命周期鉤子
  • data 選項(xiàng)應(yīng)始終被聲明為一個(gè)函數(shù)
  • 移除 keyCode 支持作為 v-on 的修飾符

二、創(chuàng)建一個(gè)Vue項(xiàng)目

1. 使用 vue-cli 創(chuàng)建

## 查看@vue/cli版本未蝌，確保@vue/cli版本在4.5.0以上
vue --version
## 安裝或者升級(jí)你的@vue/cli
npm install -g @vue/cli
## 創(chuàng)建Vue項(xiàng)目，選擇Vue3
vue create vue_test
## 啟動(dòng)
cd vue_test
npm run serve

2. 使用 vite 創(chuàng)建

官方文檔 ： https://v3.cn.vuejs.org/guide/installation.html#vite
vite官網(wǎng) ：https://vitejs.cn/

• 什么是vite雕憔？—— 是Vue團(tuán)隊(duì)打造的新一代前端構(gòu)建工具。
• 優(yōu)勢(shì)如下：
  • 開發(fā)環(huán)境中糖声，無需打包操作斤彼，可快速的冷啟動(dòng)。
  • 輕量快速的熱重載（HMR）蘸泻。
  • 真正的按需編譯琉苇，不再等待整個(gè)應(yīng)用編譯完成。

• 傳統(tǒng)構(gòu)建 與 vite構(gòu)建對(duì)比圖

  
  
  image.png
  
  

  傳統(tǒng)構(gòu)建模式悦施，是將所有資源都打包好并扇，再上線

  
  
  image.png
  
  而Vite有點(diǎn)按需加載的意思在那里了~
  接下來我們就用Vite來創(chuàng)建一個(gè)Vue3的項(xiàng)目

## 創(chuàng)建工程
npm init vite-app vue3_test_vite
## 進(jìn)入工程目錄
cd vue3_test_vite
## 安裝依賴
npm install
## 運(yùn)行
npm run dev

三、分析文件目錄

1.main

Vue2項(xiàng)目的main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Vue3項(xiàng)目的main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

注意: 可以明顯的看到vue3引入的不在是vue構(gòu)造函數(shù)了抡诞，引入的是一個(gè)名為createApp的工廠函數(shù)
將代碼處理一下把在看看

//vue2
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const vm = new Vue({
  render: h => h(App),
})
console.log(vm)
// 掛載
vm.$mount('#app')

//vue3
import { createApp } from 'vue'
import App from './App.vue'

// 創(chuàng)建應(yīng)用實(shí)例對(duì)象--app(類似于之前Vue2中的vm穷蛹，但app比vm更‘輕’)
const app = createApp(App)
console.log(app)
// 掛載
app.mount('#app')

vue3和vue2的一個(gè)小區(qū)別

分別打印vm 和 app 進(jìn)行對(duì)比 可以很明顯看到vue3的屬性比vue2少很多

image.png

image.png

2.App.vue

在 template 標(biāo)簽里可以沒有根標(biāo)簽了

<template>
    <!-- Vue3組件中的模板結(jié)構(gòu)可以沒有根標(biāo)簽 -->
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

接下來我們來正式學(xué)習(xí)Vue3的內(nèi)容~

四土陪、Composition API(組合式api)

官方文檔: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

1.拉開序幕的setup

1. 理解：Vue3.0中一個(gè)新的配置項(xiàng)，值為一個(gè)函數(shù)肴熏。
2. setup是所有 Composition API（組合API） “ 表演的舞臺(tái) ” 鬼雀。
3. 組件中所用到的：數(shù)據(jù)、方法等等扮超，均要配置在setup中取刃。
4. setup函數(shù)的兩種返回值：
   1. 若返回一個(gè)對(duì)象，則對(duì)象中的屬性出刷、方法, 在模板中均可以直接使用。（重點(diǎn)關(guān)注Ｅ鞅纭）
   2. 若返回一個(gè)渲染函數(shù)：則可以自定義渲染內(nèi)容馁龟。（了解）
5. 注意點(diǎn)：
   1. 盡量不要與Vue2.x配置混用
      • Vue2.x配置（data、methos漆魔、computed...）中可以訪問到setup中的屬性坷檩、方法。
      • 但在setup中不能訪問到Vue2.x配置（data改抡、methos矢炼、computed...）。
      • 如果有重名, setup優(yōu)先阿纤。
   2. setup不能是一個(gè)async函數(shù)句灌，因?yàn)榉祷刂挡辉偈莚eturn的對(duì)象, 而是promise, 模板看不到return對(duì)象中的屬性。（后期也可以返回一個(gè)Promise實(shí)例欠拾，但需要Suspense和異步組件的配合）

案例

<template>
  <h1>個(gè)人信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年齡：{{age}}</h2>
  <h2>性別：{{gender}}</h2>
  <button @click="sayInfo">顯示信息</button>
</template>

<script>
// import {h} from 'vue'
export default {
  name: "App",
  //此處只是測(cè)試一下setup胰锌，暫時(shí)不考慮響應(yīng)式的問題。
  setup(){
    // 數(shù)據(jù)
    let name = "EvenShun"
    let age = 22
    let gender = "男"

    // 方法
    function sayInfo(){
      alert(`我是${name},年齡${age },性別${gender}`)
    }
    return {
      name,
      age, 
      gender,
      sayInfo
    }
    // return ()=> h('h1','EvenShun')
  }
};
</script>

2.ref函數(shù)

• 作用: 定義一個(gè)響應(yīng)式的數(shù)據(jù)
• 語法: const xxx = ref(initValue)
  • 創(chuàng)建一個(gè)包含響應(yīng)式數(shù)據(jù)的 引用對(duì)象（reference對(duì)象藐窄，簡(jiǎn)稱ref對(duì)象）资昧。
  • JS中操作數(shù)據(jù)： xxx.value
  • 模板中讀取數(shù)據(jù): 不需要.value，直接：<div>{{xxx}}</div>
• 備注：
  • 接收的數(shù)據(jù)可以是：基本類型荆忍、也可以是對(duì)象類型格带。
  • 基本類型的數(shù)據(jù)：響應(yīng)式依然是靠Object.defineProperty()的get與set完成的。
  • 對(duì)象類型的數(shù)據(jù)：內(nèi)部 “ 求助 ” 了Vue3.0中的一個(gè)新函數(shù)—— reactive函數(shù)刹枉。

案例

<template>
    <h1>一個(gè)人的信息</h1>
    <h2>姓名：{{name}}</h2>
    <h2>年齡：{{age}}</h2>
    <h3>工作種類：{{job.type}}</h3>
    <h3>工作薪水：{{job.salary}}</h3>
    <button @click="changeInfo">修改人的信息</button>
</template>

<script>
    import {ref} from 'vue'
    export default {
        name: 'App',
        setup(){
            //數(shù)據(jù)
            let name = ref('張三')
            let age = ref(18)
            let job = ref({
                type:'前端工程師',
                salary:'30K'
            })

            //方法
            function changeInfo(){
                // name.value = '李四'
                // age.value = 48
                console.log(job.value)
                // job.value.type = 'UI設(shè)計(jì)師'
                // job.value.salary = '60K'
                // console.log(name,age)
            }

            //返回一個(gè)對(duì)象（常用）
            return {
                name,
                age,
                job,
                changeInfo
            }
        }
    }
</script>

3.reactive函數(shù)

• 作用: 定義一個(gè)對(duì)象類型的響應(yīng)式數(shù)據(jù)（基本類型不要用它叽唱，要用ref函數(shù)）
• 語法：const 代理對(duì)象= reactive(源對(duì)象)接收一個(gè)對(duì)象（或數(shù)組），返回一個(gè)代理對(duì)象（Proxy的實(shí)例對(duì)象嘶卧，簡(jiǎn)稱 proxy 對(duì)象）
• reactive 定義的響應(yīng)式數(shù)據(jù)是“深層次的”尔觉。
• 內(nèi)部基于 ES6 的 Proxy 實(shí)現(xiàn)，通過代理對(duì)象操作源對(duì)象內(nèi)部數(shù)據(jù)進(jìn)行操作芥吟。

案例

<template>
    <h1>一個(gè)人的信息</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>年齡：{{person.age}}</h2>
    <h3>工作種類：{{person.job.type}}</h3>
    <h3>工作薪水：{{person.job.salary}}</h3>
    <h3>愛好：{{person.hobby}}</h3>
    <h3>測(cè)試的數(shù)據(jù)c：{{person.job.a.b.c}}</h3>
    <button @click="changeInfo">修改人的信息</button>
</template>

<script>
    import {reactive} from 'vue'
    export default {
        name: 'App',
        setup(){
            //數(shù)據(jù)
            let person = reactive({
                name:'張三',
                age:18,
                job:{
                    type:'前端工程師',
                    salary:'30K',
                    a:{
                        b:{
                            c:666
                        }
                    }
                },
                hobby:['抽煙','喝酒','燙頭']
            })

            //方法
            function changeInfo(){
                person.name = '李四'
                person.age = 48
                person.job.type = 'UI設(shè)計(jì)師'
                person.job.salary = '60K'
                person.job.a.b.c = 999
                person.hobby[0] = '學(xué)習(xí)'
            }

            //返回一個(gè)對(duì)象（常用）
            return {
                person,
                changeInfo
            }
        }
    }
</script>

4.Vue3.0中的響應(yīng)式原理

vue2.x的響應(yīng)式

• 實(shí)現(xiàn)原理：

  • 對(duì)象類型：通過Object.defineProperty()對(duì)屬性的讀取侦铜、修改進(jìn)行攔截（數(shù)據(jù)劫持）专甩。

  • 數(shù)組類型：通過重寫更新數(shù)組的一系列方法來實(shí)現(xiàn)攔截。（對(duì)數(shù)組的變更方法進(jìn)行了包裹）钉稍。

    Object.defineProperty(data, 'count', {
        get () {}, 
        set () {}
    })
  

• 存在問題：

  • 新增屬性涤躲、刪除屬性, 界面不會(huì)更新。
  • 直接通過下標(biāo)修改數(shù)組, 界面不會(huì)自動(dòng)更新贡未。

• 案例 模擬Vue2中實(shí)現(xiàn)響應(yīng)式

//源數(shù)據(jù)
let person = {
    name:'張三',
    age:18
}
//模擬Vue2中實(shí)現(xiàn)響應(yīng)式
let p = {}
Object.defineProperty(p,'name',{
    configurable:true,
    get(){ //有人讀取name時(shí)調(diào)用
        return person.name
    },
    set(value){ //有人修改name時(shí)調(diào)用
        console.log('有人修改了name屬性种樱，我發(fā)現(xiàn)了，我要去更新界面俊卤！')
        person.name = value
    }
})
Object.defineProperty(p,'age',{
    get(){ //有人讀取age時(shí)調(diào)用
        return person.age
    },
    set(value){ //有人修改age時(shí)調(diào)用
        console.log('有人修改了age屬性嫩挤，我發(fā)現(xiàn)了，我要去更新界面消恍！')
        person.age = value
    }
})

Vue3.0的響應(yīng)式

• 實(shí)現(xiàn)原理:

  • 通過Proxy（代理）: 攔截對(duì)象中任意屬性的變化, 包括：屬性值的讀寫岂昭、屬性的添加、屬性的刪除等狠怨。
  • 通過Reflect（反射）: 對(duì)源對(duì)象的屬性進(jìn)行操作约啊。
  • MDN文檔中描述的Proxy與Reflect：

    • Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

    • Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

• 模擬Vue3中實(shí)現(xiàn)響應(yīng)式

        const p = new Proxy(person, {
            //有人讀取p的某個(gè)屬性時(shí)調(diào)用
            get(target, propName) {
                console.log(`有人讀取了p身上的${propName}屬性`)
                return Reflect.get(target, propName)
            },
            //有人修改p的某個(gè)屬性、或給p追加某個(gè)屬性時(shí)調(diào)用
            set(target, propName, value) {
                console.log(`有人修改了p身上的${propName}屬性佣赖，我要去更新界面了恰矩！`)
                Reflect.set(target, propName, value)
            },
            //有人刪除p的某個(gè)屬性時(shí)調(diào)用
            deleteProperty(target, propName) {
                console.log(`有人刪除了p身上的${propName}屬性，我要去更新界面了憎蛤！`)
                return Reflect.deleteProperty(target, propName)
            }
        })
  

5.reactive對(duì)比ref

• 從定義數(shù)據(jù)角度對(duì)比：
  • ref用來定義：基本類型數(shù)據(jù)外傅。
  • reactive用來定義：對(duì)象（或數(shù)組）類型數(shù)據(jù)。
  • 備注：ref也可以用來定義 對(duì)象（或數(shù)組）類型數(shù)據(jù), 它內(nèi)部會(huì)自動(dòng)通過reactive轉(zhuǎn)為代理對(duì)象蹂午。
• 從原理角度對(duì)比：
  • ref通過Object.defineProperty()的get與set來實(shí)現(xiàn)響應(yīng)式（數(shù)據(jù)劫持）栏豺。
  • reactive通過使用Proxy來實(shí)現(xiàn)響應(yīng)式（數(shù)據(jù)劫持）, 并通過Reflect操作源對(duì)象內(nèi)部的數(shù)據(jù)。
• 從使用角度對(duì)比：
  • ref定義的數(shù)據(jù)：操作數(shù)據(jù) 需要 .value豆胸，讀取數(shù)據(jù)時(shí)模板中直接讀取 **不需要
    ** .value奥洼。
  • reactive定義的數(shù)據(jù)：操作數(shù)據(jù)與讀取數(shù)據(jù)：均不需要 .value。

6.setup的兩個(gè)注意點(diǎn)

• setup執(zhí)行的時(shí)機(jī)

  • 在beforeCreate之前執(zhí)行一次晚胡，this是undefined灵奖。

• setup的參數(shù)

  • props：值為對(duì)象，包含：組件外部傳遞過來估盘，且組件內(nèi)部聲明接收了的屬性瓷患。
  • context：上下文對(duì)象
    • attrs: 值為對(duì)象，包含：組件外部傳遞過來遣妥，但沒有在props配置中聲明的屬性, 相當(dāng)于 this.$attrs擅编。
    • slots: 收到的插槽內(nèi)容, 相當(dāng)于 this.$slots。
    • emit: 分發(fā)自定義事件的函數(shù), 相當(dāng)于 this.$emit。

7.計(jì)算屬性與監(jiān)視

1.computed函數(shù)

• 與Vue2.x中computed配置功能一致

• 寫法

  import {computed} from 'vue'
  
  setup(){
      ...
    //計(jì)算屬性——簡(jiǎn)寫
      let fullName = computed(()=>{
          return person.firstName + '-' + person.lastName
      })
      //計(jì)算屬性——完整
      let fullName = computed({
          get(){
              return person.firstName + '-' + person.lastName
          },
          set(value){
              const nameArr = value.split('-')
              person.firstName = nameArr[0]
              person.lastName = nameArr[1]
          }
      })
  }
  

2.watch函數(shù)

• 與Vue2.x中watch配置功能一致

• 兩個(gè)小“坑”：

  • 監(jiān)視r(shí)eactive定義的響應(yīng)式數(shù)據(jù)時(shí)：oldValue無法正確獲取爱态、強(qiáng)制開啟了深度監(jiān)視（deep配置失效）谭贪。
  • 監(jiān)視r(shí)eactive定義的響應(yīng)式數(shù)據(jù)中某個(gè)屬性時(shí)：deep配置有效。

  //情況一：監(jiān)視r(shí)ef定義的響應(yīng)式數(shù)據(jù)
  watch(sum,(newValue,oldValue)=>{
    console.log('sum變化了',newValue,oldValue)
  },{immediate:true})
  
  //情況二：監(jiān)視多個(gè)ref定義的響應(yīng)式數(shù)據(jù)
  watch([sum,msg],(newValue,oldValue)=>{
    console.log('sum或msg變化了',newValue,oldValue)
  }) 
  
  /* 情況三：監(jiān)視r(shí)eactive定義的響應(yīng)式數(shù)據(jù)
            若watch監(jiān)視的是reactive定義的響應(yīng)式數(shù)據(jù)锦担，則無法正確獲得oldValue＜笫丁！
            若watch監(jiān)視的是reactive定義的響應(yīng)式數(shù)據(jù)洞渔，則強(qiáng)制開啟了深度監(jiān)視 
  */
  watch(person,(newValue,oldValue)=>{
    console.log('person變化了',newValue,oldValue)
  },{immediate:true,deep:false}) //此處的deep配置不再奏效
  
  //情況四：監(jiān)視r(shí)eactive定義的響應(yīng)式數(shù)據(jù)中的某個(gè)屬性
  watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job變化了',newValue,oldValue)
  },{immediate:true,deep:true}) 
  
  //情況五：監(jiān)視r(shí)eactive定義的響應(yīng)式數(shù)據(jù)中的某些屬性
  watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
    console.log('person的job變化了',newValue,oldValue)
  },{immediate:true,deep:true})
  
  //特殊情況
  watch(()=>person.job,(newValue,oldValue)=>{
      console.log('person的job變化了',newValue,oldValue)
  },{deep:true}) //此處由于監(jiān)視的是reactive素定義的對(duì)象中的某個(gè)屬性套媚，所以deep配置有效
  

• watch監(jiān)視r(shí)ef數(shù)據(jù)的說明
  如果監(jiān)聽的是ref(基本數(shù)據(jù)類型) watch第一個(gè)參數(shù)直接傳要監(jiān)聽的名
  監(jiān)聽的是ref(引用數(shù)據(jù)類型) 需要開啟deep為true

            //數(shù)據(jù)
            let sum = ref(0)
            let msg = ref('你好啊')
            let person = ref({
                name:'張三',
                age:18,
                job:{
                    j1:{
                        salary:20
                    }
                }
            })

            console.log(person)

            watch(sum,(newValue,oldValue)=>{
                console.log('sum的值變化了',newValue,oldValue)
            })

            watch(person,(newValue,oldValue)=>{
                console.log('person的值變化了',newValue,oldValue)
            },{deep:true})

3.watchEffect函數(shù)

• watch的套路是：既要指明監(jiān)視的屬性，也要指明監(jiān)視的回調(diào)磁椒。

• watchEffect的套路是：不用指明監(jiān)視哪個(gè)屬性堤瘤，監(jiān)視的回調(diào)中用到哪個(gè)屬性，那就監(jiān)視哪個(gè)屬性浆熔。

• watchEffect有點(diǎn)像computed：

  • 但computed注重的計(jì)算出來的值（回調(diào)函數(shù)的返回值）宙橱，所以必須要寫返回值。
  • 而watchEffect更注重的是過程（回調(diào)函數(shù)的函數(shù)體）蘸拔，所以不用寫返回值。

  //watchEffect所指定的回調(diào)中用到的數(shù)據(jù)只要發(fā)生變化环葵，則直接重新執(zhí)行回調(diào)调窍。
  watchEffect(()=>{
      const x1 = sum.value
      const x2 = person.age
      console.log('watchEffect配置的回調(diào)執(zhí)行了')
  })
  

8.生命周期

• vue2.x的生命周期

  
  
  image.png

• vue3.0的生命周期

  
  
  image.png

• Vue3.0中可以繼續(xù)使用Vue2.x中的生命周期鉤子，但有有兩個(gè)被更名：

  • beforeDestroy改名為 beforeUnmount
  • destroyed改名為 unmounted

• Vue3.0也提供了 Composition API 形式的生命周期鉤子张遭，與Vue2.x中鉤子對(duì)應(yīng)關(guān)系如下：

  • beforeCreate===>setup()
  • created=======>setup()
  • beforeMount ===>onBeforeMount
  • mounted=======>onMounted
  • beforeUpdate===>onBeforeUpdate
  • updated =======>onUpdated
  • beforeUnmount ==>onBeforeUnmount
  • unmounted =====>onUnmounted

• 示例

    import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
    export default {
        name: 'Demo',
        
        setup(){
            console.log('---setup---')
            //數(shù)據(jù)
            let sum = ref(0)

            //通過組合式API的形式去使用生命周期鉤子
            onBeforeMount(()=>{
                console.log('---onBeforeMount---')
            })
            onMounted(()=>{
                console.log('---onMounted---')
            })
            onBeforeUpdate(()=>{
                console.log('---onBeforeUpdate---')
            })
            onUpdated(()=>{
                console.log('---onUpdated---')
            })
            onBeforeUnmount(()=>{
                console.log('---onBeforeUnmount---')
            })
            onUnmounted(()=>{
                console.log('---onUnmounted---')
            })

            //返回一個(gè)對(duì)象（常用）
            return {sum}
        },
     }

9.自定義hook函數(shù)

• 什么是hook邓萨？—— 本質(zhì)是一個(gè)函數(shù)，把setup函數(shù)中使用的Composition API進(jìn)行了封裝菊卷。

• 類似于vue2.x中的mixin缔恳。

• 自定義hook的優(yōu)勢(shì): 復(fù)用代碼, 讓setup中的邏輯更清楚易懂。

• 示例
  創(chuàng)建一個(gè)hooks文件夾洁闰，里面創(chuàng)建文件usePoint.js

import { reactive, onMounted, onBeforeUnmount } from "vue";
export default function() {
  //實(shí)現(xiàn)鼠標(biāo)“打點(diǎn)”相關(guān)的數(shù)據(jù)
  let point = reactive({
    x: 0,
    y: 0,
  });

  //實(shí)現(xiàn)鼠標(biāo)“打點(diǎn)”相關(guān)的方法
  function savePoint(event) {
    point.x = event.pageX;
    point.y = event.pageY;
    console.log(event.pageX, event.pageY);
  }

  //實(shí)現(xiàn)鼠標(biāo)“打點(diǎn)”相關(guān)的生命周期鉤子
  onMounted(() => {
    window.addEventListener("click", savePoint);
  });

  onBeforeUnmount(() => {
    window.removeEventListener("click", savePoint);
  });

  return point;
}

在組件里使用

<template>
    <h2>我是HelloWorld組件</h2>
    <h2>當(dāng)前點(diǎn)擊時(shí)鼠標(biāo)的坐標(biāo)為：x：{{point.x}}歉甚，y：{{point.y}}</h2>
</template>

<script>
    import usePoint from '../hooks/usePoint'
    export default {
        name:'HelloWorld',
        setup(){
            const point = usePoint()
            return {point}
        }
    }
</script>

10.toRef

• 作用：創(chuàng)建一個(gè) ref 對(duì)象，其value值指向另一個(gè)對(duì)象中的某個(gè)屬性扑眉。
• 語法：const name = toRef(person,'name')
• 應(yīng)用: 要將響應(yīng)式對(duì)象中的某個(gè)屬性單獨(dú)提供給外部使用時(shí)纸泄。

• 擴(kuò)展：toRefs 與toRef功能一致，但可以批量創(chuàng)建多個(gè) ref 對(duì)象腰素，語法：toRefs(person)

• 示例

<template>
    <h4>{{person}}</h4>
    <h2>姓名：{{name}}</h2>
    <h2>年齡：{{age}}</h2>
    <h2>薪資：{{job.j1.salary}}K</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增長(zhǎng)年齡</button>
    <button @click="job.j1.salary++">漲薪</button>
</template>

<script>
    import {ref,reactive,toRef,toRefs} from 'vue'
    export default {
        name: 'Demo',
        setup(){
            //數(shù)據(jù)
            let person = reactive({
                name:'張三',
                age:18,
                job:{
                    j1:{
                        salary:20
                    }
                }
            })

            // const name1 = person.name
            // console.log('%%%',name1)

            // const name2 = toRef(person,'name')
            // console.log('####',name2)

            const x = toRefs(person)
            console.log('******',x)

            return {
                person,
                // name:toRef(person,'name'),
                // age:toRef(person,'age'),
                // salary:toRef(person.job.j1,'salary'),
                ...toRefs(person)
            }
        }
    }
</script>

三聘裁、其它 Composition API

1.shallowReactive 與 shallowRef

• shallowReactive：只處理對(duì)象最外層屬性的響應(yīng)式（淺響應(yīng)式）。

• shallowRef：只處理基本數(shù)據(jù)類型的響應(yīng)式, 不進(jìn)行對(duì)象的響應(yīng)式處理弓千。

• 什么時(shí)候使用?

  • 如果有一個(gè)對(duì)象數(shù)據(jù)衡便，結(jié)構(gòu)比較深, 但變化時(shí)只是外層屬性變化 ===> shallowReactive。
  • 如果有一個(gè)對(duì)象數(shù)據(jù)，后續(xù)功能不會(huì)修改該對(duì)象中的屬性镣陕，而是生新的對(duì)象來替換 ===> shallowRef谴餐。

2.readonly 與 shallowReadonly

• readonly: 讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的（深只讀）。
• shallowReadonly：讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的（淺只讀）茁彭。
• 應(yīng)用場(chǎng)景: 不希望數(shù)據(jù)被修改時(shí)总寒。

3.toRaw 與 markRaw

• toRaw：
  • 作用：將一個(gè)由reactive生成的 響應(yīng)式對(duì)象轉(zhuǎn)為普通對(duì)象。
  • 使用場(chǎng)景：用于讀取響應(yīng)式對(duì)象對(duì)應(yīng)的普通對(duì)象理肺，對(duì)這個(gè)普通對(duì)象的所有操作摄闸，不會(huì)引起頁面更新。
• markRaw：
  • 作用：標(biāo)記一個(gè)對(duì)象妹萨，使其永遠(yuǎn)不會(huì)再成為響應(yīng)式對(duì)象。
  • 應(yīng)用場(chǎng)景:
    1. 有些值不應(yīng)被設(shè)置為響應(yīng)式的乎完，例如復(fù)雜的第三方類庫等熏兄。
    2. 當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時(shí)，跳過響應(yīng)式轉(zhuǎn)換可以提高性能树姨。

4.customRef

• 作用：創(chuàng)建一個(gè)自定義的 ref摩桶，并對(duì)其依賴項(xiàng)跟蹤和更新觸發(fā)進(jìn)行顯式控制。

• 實(shí)現(xiàn)防抖效果：

  <template>
    <input type="text" v-model="keyword">
    <h3>{{keyword}}</h3>
  </template>
  
  <script>
    import {ref,customRef} from 'vue'
    export default {
        name:'Demo',
        setup(){
            // let keyword = ref('hello') //使用Vue準(zhǔn)備好的內(nèi)置ref
            //自定義一個(gè)myRef
            function myRef(value,delay){
                let timer
                //通過customRef去實(shí)現(xiàn)自定義
                return customRef((track,trigger)=>{
                    return{
                        get(){
                            track() //告訴Vue這個(gè)value值是需要被“追蹤”的
                            return value
                        },
                        set(newValue){
                            clearTimeout(timer)
                            timer = setTimeout(()=>{
                                value = newValue
                                trigger() //告訴Vue去更新界面
                            },delay)
                        }
                    }
                })
            }
            let keyword = myRef('hello',500) //使用程序員自定義的ref
            return {
                keyword
            }
        }
    }
  </script>
  

5.provide 與 inject

image.png

• 作用：實(shí)現(xiàn) 祖與后代組件間 通信

• 套路：父組件有一個(gè) provide 選項(xiàng)來提供數(shù)據(jù)帽揪，后代組件有一個(gè) inject 選項(xiàng)來開始使用這些數(shù)據(jù)

• 具體寫法：

  1. 祖組件中：

     setup(){
        ......
         let car = reactive({name:'奔馳',price:'40萬'})
         provide('car',car)
         ......
     }
     

  2. 后代組件中：

     setup(props,context){
        ......
         const car = inject('car')
         return {car}
        ......
     }
     

6.響應(yīng)式數(shù)據(jù)的判斷

• isRef: 檢查一個(gè)值是否為一個(gè) ref 對(duì)象
• isReactive: 檢查一個(gè)對(duì)象是否是由 reactive 創(chuàng)建的響應(yīng)式代理
• isReadonly: 檢查一個(gè)對(duì)象是否是由 readonly 創(chuàng)建的只讀代理
• isProxy: 檢查一個(gè)對(duì)象是否是由 reactive 或者 readonly 方法創(chuàng)建的代理

四硝清、Composition API 的優(yōu)勢(shì)

1.Options API 存在的問題

使用傳統(tǒng)OptionsAPI中，新增或者修改一個(gè)需求转晰，就需要分別在data芦拿，methods，computed里修改 查邢。

image.png

2.Composition API 的優(yōu)勢(shì)

我們可以更加優(yōu)雅的組織我們的代碼蔗崎，函數(shù)。讓相關(guān)功能的代碼更加有序的組織在一起扰藕。

image.png

五缓苛、新的組件

1.Fragment

• 在Vue2中: 組件必須有一個(gè)根標(biāo)簽
• 在Vue3中: 組件可以沒有根標(biāo)簽, 內(nèi)部會(huì)將多個(gè)標(biāo)簽包含在一個(gè)Fragment虛擬元素中
• 好處: 減少標(biāo)簽層級(jí), 減小內(nèi)存占用

2.Teleport

• 什么是Teleport？—— Teleport 是一種能夠?qū)⑽覀兊?strong>組件html結(jié)構(gòu)移動(dòng)到指定位置的技術(shù)实胸。

  <teleport to="移動(dòng)位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一個(gè)彈窗</h3>
            <button @click="isShow = false">關(guān)閉彈窗</button>
        </div>
    </div>
  </teleport>
  

3.Suspense

• 等待異步組件時(shí)渲染一些額外內(nèi)容他嫡，讓應(yīng)用有更好的用戶體驗(yàn)

• 使用步驟：

  • 異步引入組件

    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
    

  • 使用Suspense包裹組件，并配置好default 與 fallback

    <template>
        <div class="app">
            <h3>我是App組件</h3>
            <Suspense>
                <template v-slot:default>
                    <Child/>
                </template>
                <template v-slot:fallback>
                    <h3>加載中.....</h3>
                </template>
            </Suspense>
        </div>
    </template>
    

六庐完、其他

1.全局API的轉(zhuǎn)移

• Vue 2.x 有許多全局 API 和配置钢属。

  • 例如：注冊(cè)全局組件、注冊(cè)全局指令等门躯。

    //注冊(cè)全局組件
    Vue.component('MyButton', {
      data: () => ({
        count: 0
      }),
      template: '<button @click="count++">Clicked {{ count }} times.</button>'
    })
    
    //注冊(cè)全局指令
    Vue.directive('focus', {
      inserted: el => el.focus()
    }
    

• Vue3.0中對(duì)這些API做出了調(diào)整：

  • 將全局的API淆党，即：Vue.xxx調(diào)整到應(yīng)用實(shí)例（app）上

    2.x 全局 API（Vue）	3.x 實(shí)例 API (app)
    Vue.config.xxxx	app.config.xxxx
    Vue.config.productionTip	移除
    Vue.component	app.component
    Vue.directive	app.directive
    Vue.mixin	app.mixin
    Vue.use	app.use
    Vue.prototype	app.config.globalProperties

2.其他改變

• data選項(xiàng)應(yīng)始終被聲明為一個(gè)函數(shù)。

• 過度類名的更改：

  • Vue2.x寫法

    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-leave,
    .v-enter-to {
      opacity: 1;
    }
    

  • Vue3.x寫法

    .v-enter-from,
    .v-leave-to {
      opacity: 0;
    }
    
    .v-leave-from,
    .v-enter-to {
      opacity: 1;
    }
    

• 移除 keyCode作為 v-on 的修飾符，同時(shí)也不再支持config.keyCodes

• 移除 v-on.native修飾符

  • 父組件中綁定事件

    <my-component
      v-on:close="handleComponentEvent"
      v-on:click="handleNativeClickEvent"
    />
    

  • 子組件中聲明自定義事件

    <script>
      export default {
        emits: ['close']
      }
    </script>
    

• 移除 過濾器（filter）

  過濾器雖然這看起來很方便染乌，但它需要一個(gè)自定義語法山孔，打破大括號(hào)內(nèi)表達(dá)式是 “只是 JavaScript” 的假設(shè)，這不僅有學(xué)習(xí)成本荷憋，而且有實(shí)現(xiàn)成本台颠！建議用方法調(diào)用或計(jì)算屬性去替換過濾器。

• ......