Vue3学习笔记（1）

安装

   //使用yarn构建

   //安装yarn  需要管理员权限

   sudo npm i yarn -g

   yarn create vite

   cd ..

   yarn

   yarn dev

目录结构

    见名知义

四种语法范式

vue3中可以不需要根标签

选项式写法, vue2写法 , Vue3兼容vue2选项式写法,不推荐选项写法都有组合API实现
组合式写法, 只使用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>

选项式+组合式不推荐
组合式语法糖写法推荐

   <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

ref操作基本数据类型(string,number,boolean)
isRef 判断一个数据是否为ref对象 isRef(xxx) //返回true/false
unRef 如果传递一个ref对象,得到ref对象的value值;如果传递一个非ref对象,得到数据本身
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>

toRef 可以把reactive对象中的某个属性变成ref对象

// toRef  可以把reactive对象中的某个属性变成ref对象

let nameToRef = toRef(user,'nickName')  //nameToRef变成了一个ref对象, 该方法接收两个params, 对象  -  属性

shallowRef 和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。
triggerRef()

强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。
reactive isReactive(检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。)
readonly isReadonly (只读对象的属性可以更改，但他们不能通过传入的对象直接赋值。)
isProxy 检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。
toRaw 变为原始对象
markRaw 标记为原始对象
shallowReactive shallowReadonly
computed
watch
watchEffect
1. watchEffect //{flush:'pre'} 最先执行
2. watchPostEffect //{flush:'post'} 最后
3. watchSyncEffect //{flush:'sync'} 按顺序同步执行,如果在pre前就先执行

生命周期钩子函数

vue2中有8个周期

beforeCreate created 被setUp代替
在vue3中生命周期都是组合式API 都是以on开头
在v2中有beforeDestory/destroyed 在v3中onBeforeUnmount / onUnmounted
新增两个钩子函数 onRenderTracked/onRenderTriggered

onBeforeMount

巴特西

Vue3学习笔记（1）

安装

目录结构

四种语法范式

vue3中可以不需要根标签

hooks

setup用法

响应式 ref

生命周期钩子函数

defineProps 用法

defineEmits用法

最新文章

热门文章

巴特西

Vue3学习笔记（1）

安装

目录结构

四种语法范式

vue3中可以不需要根标签

hooks

setup用法

响应式 ref

生命周期 钩子函数

defineProps 用法

defineEmits用法

最新文章

热门文章

生命周期钩子函数