Vue3學習筆記（1）

安裝

   //使用yarn構建
   //安裝yarn  需要管理員許可權  
   sudo npm i yarn -g  
   yarn create vite
   cd ..
   yarn 
   yarn dev

目錄結構

    見名知義

四種語法範式

vue3中可以不需要根標簽

1. 選項式寫法, vue2寫法 , Vue3相容vue2選項式寫法,不推薦 選項寫法都有組合API實現
2. 組合式寫法, 只使用setup ,相當於vue2中的created(),setup可以理解成是組件生命周期的第一階段,

<template>
//在模版中使用ref響應數據時 不需要.value取值
</template>
<script>
impprt {ref} from 'vue'
export default(
    //組合式寫法入口
    setup(){
        let msg = ref('hello') //num叫ref變數 ref對象
        console.log(msg.value) // 在js中操作需要.value才能取到響應數據值
        return {num} // setup中定義了響應式數據,要在模版中使用, 必須return出去
    }
)
<script>   

3. 選項式+組合式 不推薦
4. 組合式語法糖寫法 推薦

   <script setup lang="ts">
    import { ref } from 'vue';
    let num = ref(100)
    let add = ()=>{
    num.value++
    }
    </script>

    <template>
    <h1>組合式語法糖寫法</h1>
    <h1 v-text="num"></h1>
    <button @click="add">+++</button>
    </template>

    <style scoped>
    </style>

hooks

抽離業務邏輯代碼到單獨的hook文件  定義一個函數 並return所有數據和方法 最後exprot出去,在組件中通過import 導入 ,調用該函數聲明一個對象來接收所有數據和方法

//Surga.vue

    import useCount from './hooks/useCount.ts'
  
    let {num, add, sub} = useCount()
//useCount.ts

    import { ref, reactive } from 'vue';
    function useCount() {
        let num = ref(100)
        let add = () => {
            num.value++
        }
        let sub = () => {
            num.value--
        }
        return{
            num,
            add,
            sub
        }
    }
    export default useCount

setup用法

    //定義在script標簽上  不用return返回  語法糖
    <script setup>
    //dosomething...
    </script>


    //定義在script 內部  需要return返回
    <script>
        exprot default({
            setup(){
                const a = ''
                const fun = ()=>{}
                return {a,fun}
            }
        })
    </script>

響應式 ref

1. ref操作基本數據類型(string,number,boolean)
2. isRef 判斷一個數據是否為ref對象 isRef(xxx) //返回true/false
3. unRef 如果傳遞一個ref對象,得到ref對象的value值;如果傳遞一個非ref對象,得到數據本身
4. customRef 自定義ref

        <script setup >

        import {ref,customRef,onRenderTracked,onRenderTriggered} from 'vue'
        let num = ref(100)
        let add = ()=>{num.value++}
        let sub = ()=>{num.value--}
        //自定義customRef
        let name = customRef((track,trigger)=>{
        let value = ''
        return{
            // 使用name時,調用get
            get(){
            track() //當name被使用時,執行track(),調用onRenderTracked
            return value
            },
            set(val){
            trigger() //當name被修改時,執行trigger(),調用onRenderTriggered
            value = val
            }
        }
        })
        //僅供在開發環境下,用於ref的變數調試
        onRenderTracked((ev)=>console.log('name被訪問了',ev))
        onRenderTriggered((ev)=>console.log('name值被修改了',ev))
        </script>

        <template>
        <h1>組合式API</h1>
        <h1 v-text="num"></h1>
        <button @click="add">+++</button>
        <button @click="sub">---</button>
        <input type="text" v-model="name">
        
        </template>

5. toRef 可以把reactive對象中的某個屬性變成ref對象

// toRef  可以把reactive對象中的某個屬性變成ref對象
let nameToRef = toRef(user,'nickName')  //nameToRef變成了一個ref對象, 該方法接收兩個params, 對象  -  屬性 

6. shallowRef 和 ref() 不同，淺層 ref 的內部值將會原樣存儲和暴露，並且不會被深層遞歸地轉為響應式。只有對 .value 的訪問是響應式的。
7. triggerRef()
   強制觸發依賴於一個淺層 ref 的副作用，這通常在對淺引用的內部值進行深度變更後使用。
8. reactive isReactive(檢查一個對象是否是由 reactive() 或 shallowReactive() 創建的代理。)
9. readonly isReadonly (只讀對象的屬性可以更改，但他們不能通過傳入的對象直接賦值。)
10. isProxy 檢查一個對象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 創建的代理。
11. toRaw 變為原始對象
12. markRaw 標記為原始對象
13. shallowReactive shallowReadonly
14. computed
15. watch
16. watchEffect
    1. watchEffect //{flush:'pre'} 最先執行
    2. watchPostEffect //{flush:'post'} 最後
    3. watchSyncEffect //{flush:'sync'} 按順序同步執行,如果在pre前就先執行

生命周期 鉤子函數

vue2中有8個周期

1. beforeCreate created 被setUp代替
2. 在vue3中生命周期都是組合式API 都是以on開頭
3. 在v2中有beforeDestory/destroyed 在v3中onBeforeUnmount / onUnmounted
4. 新增兩個鉤子函數 onRenderTracked/onRenderTriggered

onBeforeMount

defineProps 用法

defineEmits用法