Vue的setup语法糖干了什么

通过分别打印普通书写的组件和setup语法糖组件，可以发现，普通组件向外部暴露了许多属性，例如data，props，attrs等等，而使用setup语法糖的组件，却没有暴露任何东西，这是为什么呢。

关键——Expose

原来setup语法糖帮开发者默认添加了expose，它会隐藏组件的各类属性，防止其向外暴露，引发各类数据风险。

<script>
export default {
  expose: [],  // 隐藏其他属性，仅暴露数组内的对象，空数组则全部隐藏
  data: {},
  methods: {},
  setup() {
    return {}
  }
}
</script>

那如果我们想在setup语法糖中主动向外暴露某些属性呢

defineExpose({})，可以实现设置语法糖编写方式的组件中的暴露对象

<script setup>
import { ref } from 'vue'
const msg = "这是一条测试文本"
const result = ref("这是一个测试结果")

defineExpose({
  msg,
  result
})
</script>

如上图代码中，开发者可以利用defineExpose来实现向外暴露开发者想要暴露的对象。