Vue3中组合API setup

1vue3合成API---setup()

vue3最重要的新特性之一：作用：之前vue对象规定了我们必须把一类数据放到某一结构，这样在一定程度上对我们的代码进行了强制的分割。在vue3中我们引入setup()合成API的语法，他可以将某数据关联的内容都整合到一部分，即时setup()中的内容越来越多,也会围绕着大而不乱的形式开发项目

2setup()特点：

<1>setup()结构中定义的变量，函数都需要return之后才可以在模板中使用

<2>setup()是处于created生命周期之前的函数，也就是说date,methods中的数据是无法访问到的,setup()结构的this指向undefind

ref:ref在setup()中只能包装字符串或数字形式的数据（值），使其变为响应式数据

reactive 在setup中包装对象，数组形式的数据（对象/数组），使其变为响应式数据（date中双相绑定的数据）

toRefs可以直接在html模板中使用对象的属性名当变量，不需要用.访问

3setup中生命周期函数：

1 - 开始创建组件---- - setup();
2 - 组件挂载到页面之前执行---- - onBeforeMount();
3 - 组件挂载到页面之后执行---- - onMounted();
4 - 组件更新之前---- - onBeforeUpdate();
5 - 组件更新之后---- - onUpdated();

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
import { onMounted } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  mounted() {
    console.log("mounted outside setup <vue2>");
  },
  setup(props) {
    onMounted(() => {
		console.log("onMounted in setup <vue3>")
    });

    return {
    };
  },
};
</script>