Vue3快速上手(尚硅谷張?zhí)煊?課件-部分修改)

Vue2學習筆記

Vue3快速上手

vue3

1.Vue3簡介

2.Vue3帶來了什么

1.性能的提升

  • 打包大小減少41%

  • 初次渲染快55%, 更新渲染快133%

  • 內存減少54%

    ......

2.源碼的升級

  • 使用Proxy代替defineProperty實現響應式

  • 重寫虛擬DOM的實現和Tree-Shaking

    ......

3.擁抱TypeScript

  • Vue3可以更好的支持TypeScript

4.新的特性

  1. Composition API(組合API)

    • setup配置
    • ref與reactive
    • watch與watchEffect
    • provide與inject
    • ......
      watch只追蹤明確監(jiān)聽的屬性,其中被調用的其他屬性發(fā)生變化并不會觸發(fā)。且watch加載時不會被調用,只有依賴的屬性發(fā)生變化才會被調用。
      watchEffect不指明依賴的變量,依賴關系不明確,只要其中被調用的其他屬性發(fā)生變化就會觸發(fā)。
      如以下代碼,count或者 title發(fā)生變化,watchEffect里的內容都會被打印到控制臺
const count = ref(1)
const title = ref('hello')
const doubleCount = computed(()=>count.value*2)
watchEffect(()=>{
  console.log(count .value)
  console.log(title.value)
})
  1. 新的內置組件

    • Fragment
    • Teleport
    • Suspense
  2. 其他改變

    • 新的生命周期鉤子
    • data 選項應始終被聲明為一個函數
    • 移除keyCode支持作為 v-on 的修飾符
    • ......

一、創(chuàng)建Vue3.0工程

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

官方文檔:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@vue/cli版本,確保@vue/cli版本在4.5.0以上
vue --version
## 安裝或者升級你的@vue/cli
npm install -g @vue/cli
## 創(chuàng)建
vue create vue_test
## 啟動
cd vue_test
npm run serve

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

官方文檔:https://v3.cn.vuejs.org/guide/installation.html#vite

vite官網:https://vitejs.cn

  • 什么是vite?—— 新一代前端開發(fā)與構建工具(之前:webpack)
  • 優(yōu)勢如下:
    • 開發(fā)環(huán)境中,無需打包操作,可快速的冷啟動。
    • 輕量快速的熱重載(HMR:一改代碼就做局部更新)。
    • 真正的按需編譯,不再等待整個應用編譯完成。
  • 傳統(tǒng)構建 與 vite構建對比圖


## 創(chuàng)建工程
npm init vite-app <project-name>
## 進入工程目錄
cd <project-name>
## 安裝依賴
npm install
## 運行
npm run dev

3. vue2項目與vue3項目的工程結構比較

1、在main.js中vue3引入的不再是Vue構造函數,而是一個名為createApp的工廠函數。

//import Vue from 'vue'//vue2:調用時通過new關鍵字調用
import {createApp} from 'vue'//vue3:直接調用
import App from './App.vue'
createApp(App).mount('#app')//Vue3寫法
//上一條代碼解析:創(chuàng)建應用實例對象-app(類似于之前vue2中的vm,但是app比vm更輕,屬性和方法較少)
/*const app = createApp(App)
//掛載
app.mount('#app')
*/
//vue2寫法
/*const vm = new Vue({
    el:'#app',
    render:h=>h(App)
})
vm.$mount('#app')
*/

注意:vue3項目下main.js文件中寫法不兼容vue2的寫法
2、組件區(qū)別:vue3可以沒有根標簽,vue2有且僅有一個根標簽
3、開發(fā)工具的區(qū)別:vue3有獨有的開發(fā)工具(圖標有下標'beta')

二、常用 Composition API(組合式API)

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

1.拉開序幕的setup

  1. 理解:setup是Vue3.0中一個新的配置項,值為一個函數。
  2. setup是所有Composition API(組合API)“ 表演的舞臺 ”
  3. 組件中所用到的:數據、方法等等,均要配置在setup中。
  4. setup函數的兩種返回值:
    1. 若返回一個對象,則對象中的屬性、方法, 在模板中均可以直接使用。(常用,重點關注?。?br> 2.若返回一個渲染函數(需要手動引入):則可以自定義渲染內容。(了解)
      import {h} from 'vue` //... setup(){ //... return ()=>{return h(...)} }
  5. 注意點:
    1. 盡量不要與Vue2.x配置混用
      • Vue2.x配置(data、methos、computed...)中可以訪問到setup中的屬性、方法。
      • 但在setup中不能訪問到Vue2.x配置(data、methos、computed...)。
      • 如果有重名, setup優(yōu)先。
    2. setup不能是一個async函數,因為返回值不再是return的對象, 而是promise, 模板看不到return對象中的屬性。(后期也可以返回一個Promise實例,但需要Suspense和異步組件的配合)

2.ref函數

  • 作用: 定義一個響應式的數據
  • 語法: const xxx = ref(initValue)
    • 創(chuàng)建一個包含響應式數據的\color{#DD5145}{引用對象(reference對象,簡稱ref對象)}
    • JS中操作數據: xxx.value
    • 模板中讀取數據: 不需要.value,直接:<div>{{xxx}}</div>
      用法:
      1、引入:import {ref} from 'vue
      2、使用(定義響應式數據):let key = ref('value') 把數據變?yōu)橐脤崿F的實例對象RefImpl,簡稱引用對象
      3、注意:在vue3要實現響應式,修改時:oldData.value=newData 解析使用時:直接{{}},無需.value
  • 備注:
    • 接收的數據可以是:基本類型、也可以是對象類型。
    • 基本類型的數據:響應式依然是靠Object.defineProperty()getset完成的。
    • 對象類型的數據:內部 “ 求助 ”了Vue3.0中的一個新函數—— reactive函數。

3.reactive函數

  • 作用: 定義一個\color{#DD5145}{對象類型}的響應式數據(基本類型不要用它,要用ref函數)
  • 語法:const 代理對象= reactive(源對象)接收一個對象(或數組),返回一個\color{#DD5145}{代理對象(Proxy的實例對象,簡稱proxy對象}
  • reactive定義的響應式數據是“深層次的”。
  • 內部基于 ES6 的 Proxy 實現,通過代理對象操作源對象內部數據進行操作。

4.Vue3.0中的響應式原理

vue2.x的響應式

  • 實現原理:

    • 對象類型:通過Object.defineProperty()對屬性的讀取、修改進行攔截(數據劫持)。

    • 數組類型:通過重寫更新數組的一系列方法來實現攔截。(對數組的變更方法進行了包裹)。

      Object.defineProperty(data, 'count', {
          get () {}, 
          set () {}
      })
      
  • 存在問題:

    • 新增屬性、刪除屬性, 界面不會更新。
      (vue2的解決方法:this.$set(object,'key','value') this.$delete(object,'key')
    • 直接通過下標修改數組, 界面不會自動更新。
      (vue2的解決方法:this.$set(object,index,'value')
vue2響應式存在的問題及解決方案

Vue3.0的響應式

  • 實現原理:


    Vue3.0的響應式
    • 通過Proxy(代理): 攔截對象中任意屬性的變化, 包括:屬性值的讀寫、屬性的添加、屬性的刪除等。
    • 通過Reflect(反射): 對源對象的屬性進行操作。
    • MDN文檔中描述的Proxy與Reflect:

5.reactive對比ref

  • 從定義數據角度對比:
    • ref用來定義:\color{#FF0000}{基本類型數據} 。
    • reactive用來定義:\color{#FF0000}{對象(或數組)類型(引用類型)}。
    • 備注:ref也可以用來定義\color{#FF0000}{對象(或數組)類型數據}, 它內部會自動通過reactive轉為\color{#FF0000}{代理對象}
  • 從原理角度對比:
    • ref通過Object.defineProperty()getset來實現響應式(數據劫持)。
    • reactive通過使用\color{#FF0000}{Proxy}來實現響應式(數據劫持), 并通過\color{#FF0000}{Reflect}操作\color{#FF0000}{源對象}內部的數據。
  • 從使用角度對比:
    • ref定義的數據:操作數據\color{#FF0000}{需要}.value,讀取數據時模板中直接讀取\color{#FF0000}{不需要}.value。
    • reactive定義的數據:操作數據與讀取數據:\color{#FF0000}{均不需要}.value。

6.setup的兩個注意點

  • setup執(zhí)行的時機

    • 在beforeCreate之前執(zhí)行一次,this是undefined(無法通過this.獲取數據)。
  • setup的參數

    • props:值為對象,包含:組件外部傳遞過來,且組件內部聲明接收了的屬性。
    • context:上下文對象
      • attrs: 值為對象,包含:組件外部傳遞過來,但沒有在props配置中聲明的屬性, 相當于vue2的 this.$attrs
      • slots: 收到的插槽內容, 相當于vue2的 this.$slots。
      • emit: 分發(fā)自定義事件的函數, 相當于vue2的 this.$emit。

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

1.computed函數

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

  • 寫法

    import {computed} from 'vue'
    
    setup(){
        ...
      //計算屬性——簡寫:沒有考慮計算屬性被修改的情況
        let fullName = computed(()=>{
            return person.firstName + '-' + person.lastName
        })
        //計算屬性——完整
        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函數

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

  • 兩個小“坑”:

    • 監(jiān)視reactive定義的響應式數據時:oldValue無法正確獲取、強制開啟了深度監(jiān)視(deep配置失效)。
    • 監(jiān)視reactive定義的響應式數據中某個屬性時:deep配置有效。
      watch三個參數:監(jiān)視的對象、回調函數、配置(可不寫)
    //情況一:監(jiān)視ref定義的響應式數據
    watch(sum,(newValue,oldValue)=>{
      console.log('sum變化了',newValue,oldValue)
    },{immediate:true})
    //情況二:監(jiān)視多個ref定義的響應式數據
    watch([sum,msg],(newValue,oldValue)=>{
      console.log('sum或msg變化了',newValue,oldValue)
    }) 
    
    /* 情況三:監(jiān)視reactive定義的響應式數據
              若watch監(jiān)視的是reactive定義的響應式數據,則無法正確獲得oldValue??!
              若watch監(jiān)視的是reactive定義的響應式數據,則強制開啟了深度監(jiān)視 
    */
    watch(person,(newValue,oldValue)=>{
      console.log('person變化了',newValue,oldValue)
    },{immediate:true,deep:false}) //此處的deep配置不再奏效
    
    //情況四:監(jiān)視reactive定義的響應式數據中的某個屬性(得把監(jiān)視的對象寫成一個函數,返回監(jiān)視的屬性)
    watch(()=>person.job,(newValue,oldValue)=>{
      console.log('person的job變化了',newValue,oldValue)
    },{immediate:true,deep:true}) 
    
    //情況五:監(jiān)視reactive定義的響應式數據中的某些屬性
    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素定義的對象中的某個屬性,所以deep配置有效
    

總結:監(jiān)視ref定義的數據時,直接監(jiān)視,第一個參數是監(jiān)視的數據(情況1+2);監(jiān)視reactive定義的數據時,第一個參數是\color{#FF0000}{帶返回值的函數}且deep默認打開無法關閉,監(jiān)視對象中的對象,開啟deep。
注意:watchref定義的變量時是否需要.value
基本類型:不需要(.value就變成監(jiān)視具體的值,報錯)
引用類型:可以.value也可以開啟深度監(jiān)視deep:true(但引用類型一般用reactive定義)。

3.watchEffect函數

  • watch的套路是:既要指明監(jiān)視的屬性,也要指明監(jiān)視的回調。

  • watchEffect的套路是:不用指明監(jiān)視哪個屬性,監(jiān)視的回調中用到哪個屬性,那就監(jiān)視哪個屬性。

  • watchEffect有點像computed:

    • 但computed注重的計算出來的值(回調函數的返回值),所以必須要寫返回值。
    • 而watchEffect更注重的是過程(回調函數的函數體),所以不用寫返回值。
    //watchEffect所指定的回調中用到的數據只要發(fā)生變化,則直接重新執(zhí)行回調。
    watchEffect(()=>{
        const x1 = sum.value
        const x2 = person.age
        console.log('watchEffect配置的回調執(zhí)行了')
    })
    

8.生命周期

vue2.x的生命周期:
[圖片上傳失敗...(image-d8ad27-1650959268445)]
vue3.x的生命周期:
[圖片上傳失敗...(image-b53d78-1650959268445)]

  • Vue3.0中可以繼續(xù)使用Vue2.x中的生命周期鉤子,但有有兩個被更名:
    • beforeDestroy(銷毀)改名為 beforeUnmount(卸載)
    • destroyed改名為 unmounted
  • Vue3.0也提供了 Composition API(組合式API) 形式的生命周期鉤子,與Vue2.x中鉤子對應關系如下:
    • beforeCreate===>setup()
    • created=======>setup()
    • beforeMount ===>onBeforeMount
    • mounted=======>onMounted
    • beforeUpdate===>onBeforeUpdate
    • updated =======>onUpdated
    • beforeUnmount ==>onBeforeUnmount
    • unmounted =====>onUnmounted

9.自定義hook函數

  • 什么是hook?—— 本質是一個函數,把setup函數中使用的Composition API進行了封裝。

  • 類似于vue2.x中的mixin。

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

10.toRef

  • 作用:創(chuàng)建一個 ref 對象,其value值指向另一個對象中的某個屬性。

  • 語法:const name = toRef(person,'name')

  • 應用: 要將響應式對象中的某個屬性單獨提供給外部使用時。

  • 擴展:toRefstoRef功能一致,但可以批量創(chuàng)建多個 ref 對象,語法:toRefs(person)

三、其它 Composition API

1.shallowReactive 與 shallowRef

  • shallowReactive:只處理對象最外層屬性的響應式(淺響應式)。

  • shallowRef:只處理基本數據類型的響應式, 不進行對象的響應式處理。

  • 什么時候使用?

    • 如果有一個對象數據,結構比較深, 但變化時只是外層屬性變化 ===> shallowReactive。
    • 如果有一個對象數據,后續(xù)功能不會修改該對象中的屬性,而是生新的對象來替換 ===> shallowRef。

2.readonly 與 shallowReadonly

  • readonly: 讓一個響應式數據變?yōu)橹蛔x的(深只讀)。
  • shallowReadonly:讓一個響應式數據變?yōu)橹蛔x的(淺只讀)。
  • 應用場景: 不希望數據被修改時。

3.toRaw 與 markRaw

  • toRaw:
    • 作用:將一個由reactive生成的\color{#FF0000}{響應式對象}轉為\color{#FF0000}{普通對象}.
    • 使用場景:用于讀取響應式對象對應的普通對象,對這個普通對象的所有操作,不會引起頁面更新。
      (注意:toRaw只能處理reactive定義的)
  • markRaw:
    • 作用:標記一個對象,使其永遠不會再成為響應式對象。
    • 應用場景:
      1. 有些值不應被設置為響應式的,例如復雜的第三方類庫等。
      2. 當渲染具有不可變數據源的大列表時,跳過響應式轉換可以提高性能。

4.customRef

  • 作用:創(chuàng)建一個自定義的 ref,并對其依賴項跟蹤和更新觸發(fā)進行顯式控制。

customRfm

e.g. 修改keyword ,過一會響應(- 實現防抖效果:)
防抖:當用戶連續(xù)輸入時,等用戶輸入結束后一次性響應結果

<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準備好的內置ref
          //自定義一個myRef,value:傳遞的參數,delay:延遲
          function myRef(value,delay){
              let timer;
              //通過customRef去實現自定義
              return customRef((track,trigger)=>{
                                    //track:追蹤     trigger:通知vue重新解析模板
                  return{
                      get(){//讀取MyRef中數據時調用
                          track() //通知Vue追蹤value的變化
                          return value//給啥返回啥
                      },
                       set(newValue){//修改MyRef中數據時調用,newValue:修改后的值
                          clearTimeout(timer)//如果之前有定時器,就清除(防抖)
                          timer = setTimeout(()=>{
                              value = newValue
                              trigger() //告訴Vue去更新界面
                          },delay)
                      }
                  }
              })
          }
          let keyword = myRef('hello',500) //使用程序員自定義的ref
          return {
              keyword
          }
      }
  }
</script>

5.provide 與 inject

provide:提供(數據)
inject:注入(數據)


provide 與 inject
  • 作用:實現\color{#DD5145}{祖與后代組件間/跨級組件}通信

  • 套路:父組件有一個 provide 選項來提供數據,后代組件有一個 inject 選項來開始使用這些數據

  • 具體寫法:

    1. 祖組件中:

      setup(){
         ......
          let car = reactive({name:'奔馳',price:'40萬'})
          provide('car',car)
          ......
      }
      
    2. 后代組件中:

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

6.響應式數據的判斷

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

四、Composition API 的優(yōu)勢

1.Options API 存在的問題

使用傳統(tǒng)OptionsAPI中,新增或者修改一個需求,就需要分別在data,methods,computed里修改 。


image.png
111.gif
222.gif

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

我們可以更加優(yōu)雅的組織我們的代碼,函數。讓相關功能的代碼更加有序的組織在一起。


333.gif

444.gif

五、新的組件

1.Fragment

  • 在Vue2中: 組件必須有一個根標簽
  • 在Vue3中: 組件可以沒有根標簽, 內部會將多個標簽包含在一個Fragment虛擬元素中
  • 好處: 減少標簽層級, 減小內存占用

2.Teleport

  • 什么是Teleport?—— Teleport 是一種能夠將我們的\color{#DD5145}{組件html結構}移動到指定位置的技術。

    <teleport to="移動位置">
      <div v-if="isShow" class="mask">
          <div class="dialog">
              <h3>我是一個彈窗</h3>
              <button @click="isShow = false">關閉彈窗</button>
          </div>
      </div>
    </teleport>
    

3.Suspense

Suspense底層原理:插槽slot

  • 等待異步組件時渲染一些額外內容,可能會造成頁面抖動的情況,使用Suspense包裹組件能有效的解決這個問題,讓應用有更好的用戶體驗

  • 使用步驟:

    • 異步引入組件

      //import Child from './components/Child.vue'//靜態(tài)引入
      import {defineAsyncComponent} from 'vue'
      const Child = defineAsyncComponent(()=>import('./components/Child.vue'))//動態(tài)/異步引入
      
    • 使用Suspense包裹組件,并配置好defaultfallback

      <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的轉移

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

    • 例如:注冊全局組件、注冊全局指令等。

      //注冊全局組件
      Vue.component('MyButton', {
        data: () => ({
          count: 0
        }),
        template: '<button @click="count++">Clicked {{ count }} times.</button>'
      })
      
      //注冊全局指令
      Vue.directive('focus', {
        inserted: el => el.focus()
      }
      
  • Vue3.0中對這些API做出了調整:

    • 將全局的API,即:Vue.xxx調整到應用實例(app)上

      2.x 全局 API(Vue 3.x 實例 API (app)
      Vue.config.xxxx app.config.xxxx
      Vue.config.productionTip \color{#DD5145}{移除}
      Vue.component app.component
      Vue.directive app.directive
      Vue.mixin app.mixin
      Vue.use app.use
      Vue.prototype app.config.globalProperties

2.其他改變

  • data選項應始終被聲明為一個函數。

  • 過度類名的更改:

    • 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;
      }
      
  • \color{#DD5145}{移除}keyCode作為 v-on 的修飾符,同時也不再支持config.keyCodes(自定義按鍵別名)

  • \color{DD5145}{移除}v-on.native修飾符

    • 父組件中綁定事件

      <my-component
        v-on:close="handleComponentEvent"
        v-on:click="handleNativeClickEvent"
      />
      
    • 子組件中聲明自定義事件

      <script>
        export default {
          emits: ['close']//聲明close是自定義事件
        }
      </script>
      
  • \color{#DD5145}{移除}過濾器(filter)

    過濾器雖然這看起來很方便,但它需要一個自定義語法,打破大括號內表達式是 “只是 JavaScript” 的假設,這不僅有學習成本,而且有實現成本!建議用方法調用或計算屬性去替換過濾器。

  • ......

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Vue3快速上手 1.Vue3簡介 2020年9月18日,Vue.js發(fā)布3.0版本,代號:One Piece(海...
    冷r閱讀 2,962評論 1 38
  • Vue3快速上手 1.Vue3簡介 2020年9月18日,Vue.js發(fā)布3.0版本,代號:One Piece(海...
    危笑v演繹閱讀 354評論 0 0
  • Vue3快速上手 1.Vue3簡介 2020年9月18日,Vue.js發(fā)布3.0版本,代號:One Piece(海...
    不再猶豫_c61b閱讀 479評論 0 0
  • Vue3 API 匯總手冊 setup setup 函數是一個新的組件選項。作為在組件內使用 Compositio...
    硅谷干貨閱讀 1,709評論 0 14
  • # Vue3的改進及特點 1.性能的提升:打包大小減少 41%,初次渲染快 55%,更新快 133%,內存使用減少...
    華爾街的主導曲閱讀 19,976評論 1 3