Vue3 setup 的作用

从 vue2 升级 vue3，vue3 是可以兼容 vue2。所以 vue3 可以采用 vue2 的选项式 API，但是 vue2 不能使用 vue3 的组合式 API。

由于选项式 API 一个变量存在于多处，如果出现问题，就需要去涵盖多个函数。项目越大，排查的难度也就越大。

---

setup 具体怎么用：

setup 用来写组合式 API，从生命周期的角度，相当于取代了 beforeCreate()

---

setup 的数据和方法如何使用？

1. setup(){} 内部的属性和方法，必须用 return 暴露出来。

   将属性挂载到实例上，否则没有办法使用。
   语法糖：写在 script 开始标签中，内部的属性和方法，无需 return 暴露；
   无法和选项式 API 混用。

2. setup 内部使用时，没有 this

3. 钩子函数可以和 setup 并列存在

4. setup 不能调用生命周期相关函数，或者嵌套存在。

5. 生命周期相关函数可以调用 setup 相关的属性和方法

6. 可以使用 this

---

setup 参数

使用 setup 时，它将接收两个参数：props 和 context

props：

• 表示父组件给子组件传的数据；
• props是响应式的，当数据发生改变时，自动更新
• 因为 props 是响应式的，不能使用 Es6 的解构，如果使用会消除响应式特性(使用 toRefs)

context：

上下文环境。其中包括了，属性，插槽，自定义事件三个部分。

• attrs：是一个非响应式对象，主要接受 no-props(非props)属性。经常用来传递一些样式/标签特有属性。
• slots：是一个 Proxy 对象，其中 slots.default() 获取到一个数组。数组长度表示插槽的数量，数组中的元素是插槽的内容。
• emit：因为在 setup 中没有 this，所以使用 emit 来替换之前的 this.$emit(‘自定义事件名称’，传递的值)。用于子传父时，自定义事件的触发
• 示例：emit(‘自定义事件名称’，传递的值)

---

setup 特性总结：

1. 这个函数会在 created 之前执行。
2. setup 内部没有 this，不能挂载 this 相关的东西
3. setup 内部的属性和方法，必须 return 暴露出来。（语法糖中不需要）
4. setup 内部的属性都不是响应式的；
5. setup 不能调用生命周期相关函数，但生命周期相关函数可以调用 setup

---

setup 在代码中的使用

<script>
import { onMounted, toRefs } from "vue";
export default {
  props: {
    msg: "abc",
  },
  setup(props, context) {
    let { msg } = toRefs(props);
    let { attrs, slots, emit } = context;
    console.log(props, context);
    let num = 10;
    return {
      num,
    };
    // 和setup，嵌套的生命周期
    // onMounted(() => {
    //   console.log("onMounted", num);
    // });
  },
  // 和setup，并列的生命周期
  mounted() {
    console.log("挂载后");
    console.log(this.$options);
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

---

总结：

以上就是 vue3 中 setup 的作用，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog