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 valuehttps://www.cnblogs.com/whokillbill/archive/2023/02/25/= ''
        return{
            // 使用name時,呼叫get
            get(){
            track() //當name被使用時,執行track(),呼叫onRenderTracked
            return value
            },
            set(val){
            trigger() //當name被修改時,執行trigger(),呼叫onRenderTriggered
            value = https://www.cnblogs.com/whokillbill/archive/2023/02/25/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用法

標籤：其他

上一篇：Quill編輯器實作原理初探

下一篇：這些 JavaScript 筆試題你能答對幾道？