Vue3.0初体验（组合API使用）

构建项目

• vue-cli需要4.5

• 

• npm init vite-app <project-name>

• vue3.0中文文档

• vue文档，已经能看到vue3.0的东西了

写文章时的代码

<template>
    <h1>{{ msg }}</h1>
    <button @click="numAdd">count is: {{ num }}</button>
    <button @click="changeAge">age is: {{ obj.age }}</button>
    <p ref="hello">Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
    <piTest></piTest>
    <button @click="changeProvide1">changeProvide1</button>
    <button @click="changeProvide2">changeProvide2</button>
</template>

<script>
import {
    onMounted,
    onUpdated,
    reactive,
    ref,
    watch,
    computed,
    provide,
} from "vue";
import piTest from "../components/piTest.vue";
export default {
    name: "HelloWorld",
    props: {
        msg: String,
    },
    data() {
        return {
            count: 0,
        };
    },
    components: {
        piTest,
    },
    setup(props, context) {
        console.log(props);
        console.log(context);

        const name = ref("rmq");
        const like = reactive({ dog: "wangwang", cat: "maomao" });
        const provide1 = provide("name", name);
        const provide2 = provide("like", like);
        const changeProvide1 = () => {
            name.value = "xr";
        };
        const changeProvide2 = () => {
            like.dog = "ww";
            like.cat = "mm";
        };

        // const provide1 = provide("name", "rmq");
        // const provide2 = provide("like", { dog: "wangwang", cat: "maomao" });

        const num = ref(0);
        const numAdd = () => {
            num.value++;
        };
        watch(
            () => num.value,
            (newNum, oldNum) => {
                console.log("newNum:" + newNum);
                console.log("oldNum:" + oldNum);
            }
        );
        const obj = reactive({ name: "rmq", age: 22 });
        const changeAge = () => {
            obj.age++;
        };
        watch(
            () => obj.age,
            (newAge, oldAge) => {
                console.log("newAge:" + newAge);
                console.log("oldAge:" + oldAge);
            }
        );

        const doubleCount = computed(() => num.value * 2);

        const hello = ref("hello");
        onMounted(() => {
            hello.value.style.color = "pink";
        });

        return {
            num,
            numAdd,
            changeAge,
            obj,
            doubleCount,
            hello,
            changeProvide1,
            changeProvide2,
        };
    },
};
</script>

关于watch监听

• 监听简单的数据

    const num = ref(0);
    const numAdd = () => {
        num.value++;
    };
    watch(
        () => num.value,
        (newNum, oldNum) => {
            console.log(newNum);
            console.log(oldNum);
        }
    );
    // 或者
    // watch(num.value, (newNum, oldNum) => {
    //     console.log(newNum);
    //     console.log(oldNum);
    // });

• 监听复杂一点的

        const obj = reactive({ name: "rmq", age: 22 });
        const changeAge = () => {
            obj.age++;
        };
        watch(
            () => obj.age,
            (newAge, oldAge) => {
                console.log("newAge:" + newAge);
                console.log("oldAge:" + oldAge);
            }
        );

• 监听多个

   const num = ref(0);
   const numAdd = () => {
       num.value++;
   };

   const obj = reactive({ name: "rmq", age: 22 });
   const changeAge = () => {
       obj.age++;
   };

   watch([num, () => obj.age], ([newNum, newAge], [oldNum, oldAge]) => {
       console.log(newNum);
       console.log(oldNum);
       console.log(newAge);
       console.log(oldAge);
   });

ref获取Dom

vue3.0的获取DOM和之前有点不同

1. setup中先声明
2. return出去
3. DOM中ref去引用

//<p ref="hello">Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
   const hello = ref("hello");
   onMounted(() => {
       hello.value.style.color = "pink";
   });
    return {
     hello,
 	};

setup()的参数props和context

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

生命周期

选项 API	Hook inside inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

提供和注入

• 用provide，api声明

import {
    onMounted,
    onUpdated,
    reactive,
    ref,
    watch,
    computed,
    provide,
} from "vue";
setup(){
    const provide1 = provide("name", "rmq");
    const provide2 = provide("like", { dog: "wangwang", cat: "maomao" });
}

• 用inject，api使用

<template>
    <h2>piTest</h2>
    <div>{{inject1}}</div>
    <div>{{inject2}}</div>
</template>

<script>
import { inject } from "vue";
export default {
    setup() {
        const inject1 = inject("name");
        const inject2 = inject("like");
        return {
            inject1,
            inject2,
        };
    },
};
</script>

<style>
</style>

• 也可以声明响应式的

     const name = ref("rmq");
     const like = reactive({ dog: "wangwang", cat: "maomao" });
     const provide1 = provide("name", name);
     const provide2 = provide("like", like);
     const changeProvide1 = () => {
         name.value = "xr";
     };
     const changeProvide2 = () => {
         like.dog = "ww";
         like.cat = "mm";
     };