vue 3.0新特性以及简要

vue 3.0定义变量 以及方法

1.setup函数是用来定义方法与变量的,我们可以用ref或者reactive来定义基本数据类型或者复杂数据类型

2 在setup中直接定义方法,且通过ref定义的变量获取使用都需要.value

3.定义的变量，以及方法名称必须return出去才能使用

        setup(){
            //定义变量
            const count = ref(0);//通过ref定义一个number类型的数字
            const objFn = reactive({});//通过reactive定义一个对象
            
            //定义方法
            const add=()=>{
                count.value++
              }
              
            return {
                   count,
                   objFn,
                   add
                };
        }
      

vue3.0 生命周期简介

  生命周期使用前需要在vue中引入在使用

    import {onMounted,onMounted,onMounted,onUpdated,onBeforeUnmount,onUnmounted} from "vue"

    setup() {
      //因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行所以不需要显式地定义它们。
      //换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写,
      //这些生命周期钩子注册函数只能在 setup() 期间同步使用，
        console.log(" ===> 相当于 vue2.x 中 beforeCreated, created")
         //vue 挂载前
        onBeforeMount() {
            console.log("===> 相当于 vue2.x 中 beforeMount")
        },
        //vue 挂载后
        onMounted() {
            console.log("===> 相当于 vue2.x 中 mounted")
        },
        //vue 修改前
        onMounted() {
            console.log("===> 相当于 vue2.x 中 beforeUpdate")
        },
        //vue 修改后
        onUpdated() {
            console.log("===> 相当于 vue2.x 中 updated")
        },
        //vue 销毁前
        onBeforeUnmount() {
            console.log("===> 相当于 vue2.x 中 beforeDestroy")
        },
        //vue 销毁后
        onUnmounted() {
            console.log("===> 相当于 vue2.x 中 destroyed")
        },
        onErrorCaptured() {
            console.log("===> 相当于 vue2.x 中 errorCaptured")
        }
        return {}
    },
   

vue3.0 组件传值

1. 使用props传值

  //父组件
   <template>
      <div class="home"><HelloWorld :msg="count" /></div>
   </template>
    <script>
        import { ref } from "vue";
        // 引入子组件
        import HelloWorld from "@/components/HelloWorld.vue";
        export default {
          name: "father",
          setup() {
            let count = ref(0);
            return {
              count,
            };
          },
          //注册组件
          components: {
            HelloWorld,
          },
        };
    </script>

   // 子组件
     <template>
        <div class="hello">{{ count }}</div>
    </template>
    <script>
    import { ref } from "@vue/reactivity";
    export default {
      name: "son",
      props: {
        //指定接收的值，必须指定类型
        msg: {
          type: Number,
        },
      },
      setup(props) {
        let count = ref(props.msg);
        return {
          count,
        };
      },
    };
    </script>

2. 使用provide与inject传值

    // 父组件
    <template>
      <div>
        <HelloWorld />
      </div>
    </template>
    
    <script>
    import { provide} from "@vue/composition-api";  // 父组件引入 provide
    import HelloWorld from "./components/HelloWorld";  // 引入子组件
    export default {
      name: "app",
      components: {
        HelloWorld
      },
      setup() {
        // provide('数据名称', 要传递的数据)
        provide("age,"18")
      }
    };
    </script>
    

// 子组件
<template>
    <div>
        <h3>{{ customVal }}</h3>
    </div>
</template>

<script>
// 子组件导入 inject
import { inject } from "@vue/composition-api";
export default {
    setup() {
        //调用 inject 函数，通过指定的数据名称，获取到父级共享的数据
        const customVal = inject("customVal");
        return {
            customVal
        };
    }
};
</script>