拉開序幕的 setup

• setup 是所有 composition API 的表演舞臺。組件中所用到的數據、方法等均配置在 setup 中。
• setup 函數可以返回兩種東西
  1. 返回一個對象，對象中的屬性、方法在模板中均可直接使用
  2. 可以返回一個渲染函數 render函數，可以自定義渲染內容。
• vue3 的 compositionAPI 不要與 vue2 的 optionAPI 的數據混用。vue2能訪問到vue3的數據，vue3不能訪問vue2，具體見生命周期。

<script>
import {ref} from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    let a = ref(0);
    const b = ref(2);
    const fn = ()=>{
      console.log(a.value++)
    }
    return {
      a,b,fn
    }
  },
};
</script>

ref 和 ref返回值的value

數據需要用 ref 函數包裝成 RefImpl 的實例才能實現響應式，使用 ref 需在 vue3 庫中 import 一下 ref，修改 ref 值需要修改他的 value 而不是直接改，否則報錯 error Must use '.value' to read or write the value wrapped by 'ref()'，而模板中讀取 ref 數據則不需要 .value

<template>
    <p> a </p>
    <button @click="fn">++</button>
<template>

<script>
import {ref} from 'vue'
export default {
  setup() {
    let a = ref(0);
    const fn = ()=>{
      console.log(a.value++)
    }
    return {
      a,b,fn
    }
  },
};
</script>

如果 ref 的參數是一個對象，那么讀取或修改對象里的值就不用 .value，控制臺輸出這個b的值可以看到是一個proxy的實例，借助了vue3的性函數 reactive 函數實現的

const b = ref({
    b1: 'bbbbb',
    b2: 22222
}) 
;(function(){
    console.log(b.value);
    b.value.b2++
})()

reactive

上面說到 ref 傳入復雜數據類型會借助 reactive 這個函數，往 reative 傳入基礎類型數據則會警告說 value cannot be made reactive，使用 reactive 包裝復雜類型為響應式數據，修改對象里面的值，就不用 .value了。

const b = reactive({
    b1: 'bbbbb',
    b2: 22222
}) 
;(function(){
    console.log(b.value);       //輸出undefined，因為沒有b變成一個proxy對象了
    b.b2++
})()

proxy響應式原理例子

const person = {
    name: 'ming',
    age:18
}
const p = new Proxy(person,{
    get(target,propName){
        console.log(`有人讀取了p身上的${propName}屬性`);
        return Reflect.get(target,propName)
    },
    set(target,propName,value){
        console.log(`有人修改或增加了p身上的${propName}屬性`);
        Reflect.set(target,propName,value)
    },
    deleteProperty(target,propName){
        console.log(`有人刪除了p身上的${propName}屬性`);
        return Reflect.deleteProperty(target,propName)
    }
})

setup注意事項

setup執行時機

setup 會在 beforeCreate 之前執行一次，this 指向為 undefined

setup的參數 props 和 context

setup(props,context){
    console.log(props,context)
}

props 和 context.attrs

• 第一個參數 props 是父組件傳遞過來的數據，context.attrs 類似于vue2里的 $attrs ，是未被props接收的組件通信的數據。
• 在低版本的vue3中，如果傳遞了 props而不在子組件中使用 props 接收，則會發出警告。所以推薦傳遞的 props 都用 props 接收。

context

輸出 context，可以看到熟悉的有 attrs，emit，slots

emit：如果父組件給子組件綁定了自定義事件，如果子組件想要觸發自定義事件，則需要 context.emit() 觸發，不再像vue2那樣$emit觸發

slots：就是插槽相關內容。

computed

類似于 vue2 中的 計算屬性，使用時需要引入 computed ，computed函數里面的參數：如果是簡寫形式是一個函數，如果是完整形式是一個對象

import {computed} from 'vue'

setup(){
    let fullName = computed(()=>{
        return person.firstName + person.lastName
    })
}

完整形式

setup() {
    const person = reactive({
        firstName: '',
        lastName: ''
    })
    let fullName = computed({
        get() {
            return person.firstName + person.lastName
        },
        set(value) {
            person.firstName = value.slice(0, 1)
            person.lastName = value.slice(1)
        }
    })
    return {
        person, fullName
    }
}

watch

vue3中 watch 函數監視屬性。

1. 第一個參數為監視的目標，可以是一個ref，也可以是一個數組里包多個ref。也可以是 reactive，注意 ref 不是 ref.value
2. 第二個參數是一個回調函數，回調函數里包含兩個參數 oldValue 和 newValue
3. 第三個參數是配置項，用于開啟 immediate 和 deep

<template>
    <h2>{{ auro }}</h2>
    <button @click="auro += 'o'"></button>
</template>
<script>
import { ref, watch } from 'vue'
export default {
    setup() {
        let auro = ref('auro');
        let panton = ref('panton')
        watch([auro,panton], (newValue, oldValue) => {
            console.log(oldValue, newValue);
        })
        return { auro }
    }
}

watch監視對象的三種情況

監視一個對象

但vue3中監視 reactive 類型數據自動開啟深度監視且關不掉。
同時注意監視 reactive 類型數據無法監測 newValue 和 oldValue，因為是復雜類型數據，改了之后新舊值是一樣的。

監視對象里的屬性

監視對象里的屬性（基礎數據類型），監視的目標要寫成 函數有返回值 形式，這樣子可以監視得到newValue 和 oldValue。
當然也可以是一個數組里包多個函數

export default {
    setup() {
        let bibu = reactive({
            name: 'bibu',
            age: 22
        })
        watch(() => bibu.age, (newValue, oldValue) => {
            console.log(oldValue, newValue);
        })
        
        watch([() => bibu.age,()=>biubiu.name], (newValue, oldValue) => {
            console.log(oldValue, newValue);
        })
        return { auro, bibu }
    }
}

監視對象里的屬性（復雜數據類型），監視目標寫成 函數有返回值 形式以外，還要開啟 deep:true 配置項才能監視得到改變進而使用watch里的回調函數。

export default {
    setup() {
        let bibu = reactive({
            name: 'bibu',
            age: 22,
            hobby: ['抽煙', '喝酒']
        })
        watch(() => bibu.hobby, (newValue, oldValue) => {
            console.log(oldValue, newValue);
            console.log(bibu.hobby);
        }, { deep: true })
        return {bibu}
    }
}

監視 ref 定義的對象

監視ref定義的對象，需要監視這個目標的 value 值才能觸發 watch 的回調函數，相當于監視了一個 reactive ，如果不寫 .value 開啟deep:true 也可以觸發監視回調

wathcEffect函數

watch 是指定監視目標后執行指定的回調。
watchEffect 是不指定監視目標，watchEffect 的回調執行過程中用到哪個目標，就監視哪個目標，并把回調重新執行一次。
注意 watchEffect 相當于開啟了 immediate:true 回調會先執行一次。

watchEffect(()=>{
    let x = a.value
    console.log('watchEffect回調執行了')
})

watchEffect 有點像 computed，都可以檢測到依賴值的變化，但computed注重返回值，watchEffect 則只執行回調

vue3 生命周期鉤子

vue3 除了提供 optionAPI 的生命周期鉤子以外，還提供了 compositionAPI 的生命周期鉤子。
詳情見官方文檔

自定義 hook

自定義一個模塊，模塊里面可以使用各種 vue 的 api，導出之后方便其他vue組件復用。比vue2的mixin好在模塊里面可以使用各種vue的api了，例如響應式數據，生命周期鉤子，此時 組合式api 的好處就顯示出來了。

import { onMounted, onUnmounted, reactive } from "vue";
export default function () {
    const axis = reactive({
        x: 0,
        y: 0
    })
    const clickAxis = (event) => {
        axis.x = event.x;
        axis.y = event.y
    }
    onMounted(
        () => {
            window.addEventListener('click', clickAxis)
        }
    )
    return axis
}

其他組件中導入并使用就可以了

<template>
    <h3>{{ axis }}</h3>
</template>
<script>
import recordClick from '@/hook/recordClick';
export default {
    setup() {
        let axis = recordClick();
        console.log(axis);
        return { axis }
    }
}
</script>

toRef 與toRefs

作用：創建一個 ref 對象，其 value 值指向另一個對象中的某個屬性。
參數一為要指向的對象，參數二為要指向對象的屬性

const person = reactive({
    name: 'ming',
    age: 18,
    hobby: ['電影','音樂']
})

return {
    name: toRef(person,'name'),
    age: toRef(person,'age')
}

如果不使用 toRef ，則在模板中使用這些數據需要 person.name,person.age這樣使用，用了 toRef 之后，就可以單獨把 reactive 里面的單條數據包裝為一個 ref 數據輸出給模板使用。

<template>
    <p>{{name}}</p>
</template>

toRefs 則是把 reactive 整個對象的每一條數據都包裝成 ref 輸出出去，然后再用展開運算符展開return給模板使用。

const person = reactive({
    name: 'ming',
    age: 18,
    hobby: ['電影','音樂']
})

return {
    ...toRefs(person)
}

如果直接展開person，那么數據不是響應式的，用 toRefs 則是響應式的

shallowReactive 與 shallowRef

shallowReactive：只處理對象最外層的屬性為響應式。
shallowRef：只處理自身為響應式，如果傳入一個復雜類型的則改復雜類型內部的數據不改為響應式。

let person = shallowReactive({
    name: 'ming',
    age: 18,
    hobby: ['電影','音樂']
})
//此時 hobby 里面的每一項改變都不會觸發頁面更新

shallowRef 官方解釋：
創建一個跟蹤自身 .value 變化的 ref，但不會使其值也變成響應式的。

const foo = shallowRef({})
// 改變 ref 的值是響應式的
foo.value = {}
// 但是這個值不會被轉換。isReactive(foo.value) // false

readonly 與 shallowReadonly

readonly：讓一個響應式數據變為只讀的（深只讀）
shallowReadonly：讓一個響應式數據變為淺只讀

let person = reactive({
    name: 'ming',
    hobby: ['kk','vv']
})
person = shallowReadonly(person)

toRaw 與 markRaw

toRaw：
作用：將一個 reacttive 響應式對象傳入轉換為普通對象后return，官方文檔說不建議保留對原始對象的持久引用。
markRaw：
作用：標記一個對象，使其永遠不會再成為響應式對象。

customRef

創建一個自定義的 ref，并對其依賴項跟蹤和更新觸發進行顯式控制。它需要一個工廠函數，該函數接收 track 和 trigger 函數作為參數，并且應該返回一個帶有 get 和 set 的對象。
官網示例：使用自定義 ref 通過 v-model 實現 debounce 的示例：

function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })}

export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }}

provide 與 inject 祖后通信

provide接收兩個參數，第一個參數是為這個通信的東西起個名字，第二個參數是需要通信的值。
祖先組件中

export default {
  components: {
    HelloWorld,
  },
  setup() {
    const person = reactive({
      name: "ming",
      age: 18
    })
    provide('ming', person)
  }
}

后代組件中

export default {
    setup() {
        let qiming = inject('ming')
        console.log(qiming);
        return { qiming }
    }
}

響應式數據的判斷API

• isRef：檢查一個值是否為一個ref對象
• isReactive：檢查是否由 reactive 創建的響應式代理
• isReadonly：檢查是否只讀
• isProxy：

Fragment 組件

現在的 vue3 不需要根標簽了，使用 Fragment 實現了虛擬根標簽，在開發者工具可以看到

Teleport 組件

teleport 組件可以實現將DOM節點轉移至任何 vue 應用上的節點，在to屬性指定即可，例如全局遮罩組件轉移至根組件

<teleport to="body">
</teleport>

suspense 組件

異步展示組件時會用到，提供兩個插槽，默認插槽是真正要展示的內容，替補插槽是如果默認插槽內容沒加載完就展示的內容。
可見文檔案例

<template>
  <suspense>
    <template #default>
      <todo-list />
    </template>
    <template #fallback>
      <div>
        Loading...
      </div>
    </template>
  </suspense></template>

<script>export default {
  components: {
    TodoList: defineAsyncComponent(() => import('./TodoList.vue'))
  }}</script>

Vue3 其他更改

vue3 全局 API

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

vue3 動畫類名

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 的修飾符

移除 v-on.native 修飾符

給組件綁定原生事件不用再加 native，如果想把原生事件改為自定義事件，在子組件中使用 emits 配置項聲明
父組件：

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

子組件：

export default {
    emits:['click']
}