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用法