大家都知道setup是vue3中的组合式API,写法有两种:
写法1:<script setup>
//内容</script>
写法2:<script>
export default {
setup() {
//内容
}
</script>
在使用时不知道大家没有疑惑这两种写法有啥不一样吗?功能使用上几乎没啥区别,setup语法糖更好用。那接下来就试试这两组件有啥不一样
写了两个子组件和一个父组件:
子组件:SetupFun和ScriptSetup
父组件:HomeView
执行结果:
控制台打印两组件后发现有区别,setup()方法可以看到组件内暴露的变量count,语法糖写法看不到,这是为什么呢,紧接着去看看了组件的编译文件
语法糖写法确实把setup转换成了setup方法,但是也多了个方法__expose(),查阅了文档后知道了,expose
方法是用于手动指定向外界暴露的成员。这也就解释了为啥控制台看不到了。
这样使用的好多是什么呢?如何给外界暴露的成员太多,就增加了打破单项数据流的风险,提供给使用者的这种可能,这样看语法糖优于setup()方法。
那如何在setup方法里面也做到不暴露数据成员呢?也写了一下,大家参考,代码如下:
执行效果:
同理如果想在语法糖写法里面想暴露某些数据属性,可以参考以下写法: