Vue 3 script setup 语法糖到底做了什么?setup语法糖和setup函数写法到底有啥区别

script setup 它是一个语法糖,相当于包含在 setup 函数里面. 返回的值会自动注入到当前作用域中.

script setup 是一个语法糖，它相当于在 setup 函数中包含的代码。它允许你在一个组件中同时定义数据和逻辑，并通过一个简单的语法来声明组件的属性和事件。

要了解清楚这两种写法的差异,就要看他们的编译结果.因为最终运行的一定不是这个单文件组件,而是单文件组件编译出来的结果.

需要用到vite-plugin-inspect插件.进行配置.查看编译结果.

setup 语法糖编译结果会自动调用 expose() 方法,而 setup 函数的编译结果不会调用 expose() 方法.

• setup 函数写法:

expose: [], 暴露这个组件实例中的哪些成员.

如果做了这个配置,就不会暴露其他乱七八糟的成员了.只会暴露你配置的东西.

• setup 语法糖

使用 setup 语法糖的话,它会自动给你加上.这就导致了用这种模式产生的组件,它的组件实例里面,实际上是没有暴露任何东西的.

setup 语法糖编译结果会自动调用 expose() 方法,而 setup 函数的编译结果不会调用 expose() 方法.

setup 语法为什么要这么做?

组件实例里面有这些东西不好吗? 为什么这个语法要多此一举,去阻止它暴露这些东西呢?

---

是因为暴露这些东西实际上不是一件好事.因为这就提供了一种可能,你在这个组件之外,你可以通过 ref 给这个组件加个 ref,然后去拿到这个组件的实例.this.$refs.xxx,通过这个实例去访问这些组件内部的成员.然后执行某种操作,这样就打破了单向数据流的规则.

这个是组件内部的数据,你就给外部提供了一种改动它的可能性. 这种做法式有很大的隐患的.单向数据流一旦被打破,代码就离屎山越来越近啦.

所以为了解决这个问题,vue3 就加入了整个expose.而在 setup 语法糖里面,会自动调用expose方法,防止你向外暴露太多东西. 如果你一定要暴露的话,就自行调用这个方法.

setup 语法糖里面,暴露某些东西,可以使用 defineExpose 方法. 编译的时候,会转换为 expose 方法.

这也就是为什么 defineExpose,defineProps,defineEmits 使用不需要导入,因为它们不参与运行的.它们只是用来在编译阶段做语法糖的.

运行环境里面压根就没有这些函数,它只是在编译环境里面,给你做了一个对应.

所以,以后在写 Vue3 的时候,尽量使用 setup 语法糖.因为它会隐式的帮你去做这件事情.

如果说你没有手动的声明就表示那么它默认情况下,不会向外界暴露任何东西,就保护了单向数据流.这是一个强约束. 强约束永远是好于规范的.