一、基礎(chǔ)知識(shí)

1、vue3 可以沒(méi)有根標(biāo)簽

image.png

2、組合式 API

(1) setup

• 組件用到的數(shù)據(jù)，方法，計(jì)算數(shù)據(jù)，生命周期，都寫(xiě)在setup里面
• 如果重名 ，setup 優(yōu)先，
• vue2可以訪問(wèn)到 vue 3 setup中的屬性和方法
• vue3的setup里面不能訪問(wèn)到vue2的data、methos等 （因?yàn)閠his的指向變了）
• setup執(zhí)行比beforeCreate要早。this是 undefined

使用setup 時(shí)，它將接收兩個(gè)參數(shù)：props 和 context 。

• props:

第一個(gè)參數(shù)是 props ，表示父組件給子組件傳值，props 是響應(yīng)式的，當(dāng)傳入新的 props 時(shí)，自動(dòng)更新。因?yàn)?props 是響應(yīng)式的，不能使用 ES6 解構(gòu)，會(huì)消除prop的響應(yīng)特性，此時(shí)需要借用 toRefs 解構(gòu)

<template>
    <div>
        子組件 ----
       <div>
           {{msg}}  {{height}}
       </div>
    </div>
</template>
<script>
import { ref, reactive, h, onMounted,toRefs} from "vue";
export default {
    props: {
    msg: String,
    height: Number,
    },
    setup(props,context) {
        let { msg , height } = toRefs(props)
        console.log(msg.value)
        console.log(height.value)
        onMounted(()=>{
            console.log('頁(yè)面加載時(shí)')
        })
        return {
        }
    },
}
</script>

• **context **

context 上下文環(huán)境，其中包含了 屬性、插槽、自定義事件三部分。

setup(props,context){
 const { attrs,slots,emit } = context
 // attrs 獲取組件傳遞過(guò)來(lái)的屬性值，
 // slots 組件內(nèi)的插槽
 // emit 自定義事件 子組件
}

1、attrs 是一個(gè)非響應(yīng)式對(duì)象，主要接收 no-props 屬性，經(jīng)常用來(lái)傳遞一些樣式屬性。
2、slots 是一個(gè) proxy 對(duì)象，其中 slots.default() 獲取到的是一個(gè)數(shù)組，數(shù)組長(zhǎng)度由組件的插槽決定，數(shù)組內(nèi)是插槽內(nèi)容。
3、setup 內(nèi)不存在this，所以 emit 用來(lái)替換 之前 this.$emit 的，用于子傳父時(shí)，自定義事件觸發(fā)。

(2) ref 函數(shù) (基礎(chǔ)數(shù)據(jù)響應(yīng)式)（全名：reference）

• js中操作數(shù)據(jù)需要 .value去獲取
• 模板中讀取數(shù)據(jù)不需要 .value
• 接收的數(shù)據(jù)是基本類(lèi)型，也可以是對(duì)象類(lèi)型。對(duì)象類(lèi)型需要.value
• 響應(yīng)式依然是靠 object.defineProperty()的get與set完成的

<template>
  <div class="home">
    名字：{{name}}
    <button @click="changName">改變名字</button>
  </div>
</template>


<script>
  import {ref,reactive,h} from 'vue'
  export default {
    setup(){
      let name = ref('張三')
      function changName(){
        name.value = '李四'
      }
      return {
        name,
        changName
      }
      // return ()=> h('h1','返回一個(gè)渲染函數(shù)')
    }
  }
</script>

(3) reactive 函數(shù) (對(duì)象數(shù)組響應(yīng)式)

• 接收一個(gè) 對(duì)象 或者 數(shù)組
• reactive定義的響應(yīng)式數(shù)據(jù)是深層次的
• 語(yǔ)法：const 代理對(duì)象 = reactive(源對(duì)象)，返回一個(gè)代理對(duì)象（Proxy的實(shí)例對(duì)象,，簡(jiǎn)稱(chēng)：proxy對(duì)象）
• 基于es6的proxy實(shí)現(xiàn)，

<template>
  <div class="home">
    名字：{{ name }} 
    <br>
    工作：{{ job.type }} 
     <br>
    工資：{{ job.salary }}
     <br>
    <button @click="changName">改變名字</button>
  </div>
</template>
<script>
import { ref, reactive, h } from "vue";
export default {
  setup() {
    let name = ref("張三");
    let job = reactive({
      type: "前端",
      salary: "20k",
    });

    function changName() {
      name.value = "李四";
      job.type = "UI";
      job.salary = "10k";
    }
    return {
      name,
      job,
      changName,
    };
  },
};
</script>

[圖片上傳失敗...(image-570d9b-1714965888956)]

(4) toRefs 和 toRef

• toRef: 復(fù)制 reactive 里的單個(gè)屬性并轉(zhuǎn)成 ref
• toRefs: 復(fù)制 reactive 里的所有屬性并轉(zhuǎn)成 ref

(5) unref

• unref() 如果參數(shù)是一個(gè)ref則返回它的value，否則返回參數(shù)本身
• unref(val) 相當(dāng)于val=isRef(val)?val.value:val

3、生命周期

   vue2            ---------------        vue3
beforeCreate                         ->   setup()
Created                              ->   setup()
beforeMount                          ->   onBeforeMount
mounted                              ->   onMounted
beforeUpdate                         ->   onBeforeUpdate
updated                              ->   onUpdated
beforeDestroyed                      ->   onBeforeUnmount
destroyed                            ->   onUnmounted
activated                            ->   onActivated
deactivated                          ->   onDeactivated