拥抱简洁代码：vue3脚本设置最强解析

Vue3不仅仅是CompositionAPI的一大亮点，友达给我们带来了一个全新的东西——脚本设置，相信大家对设置都不陌生。至于脚本的设置，有同学表示比较难懂，那么接下来这篇文章就让你一目了然。ref和reactive在设置中，我们有两个API，ref和reactive，用于创建一个反应变量。两者的区别在于ref是对基本类型的响应，而reactive是对引用类型的响应。import{ref,reactive}from'vue'constdata=ref('123')constother=reactive({is:'123'})console.log(data.value)console.log(other.is)//这里需要注意的是，reactive对象可以直接访问和修改内部子数据，而data需要使用.value来访问和修改，如下：data.value='666'//okdata='666'//noother.is='666'//okother='666'//不导入自定义组件在之前的optionApi中，我们使用components:{...}导入自定义组件，现在，我们只需要直接导入组件即可使用自定义方法在之前的optionApi中我们习惯在methods中写自定义方法，而这里我们直接定义了一个方法或者变量，可以直接在模板中使用一般在这种情况下，作者建议开发者使用ref，因为ref适用于更广泛的新计算函数和手表。现在我们用更简单的方式来实现计算函数和手表，直接引入组合API直接搞定！import{ref,computed,watch}from'vue'constdata=ref('666')constimComputed=computed(()=>{returndata.value+'something'})constunwatch=watch(data,()=>{console.log('datawasbeenchanged')})在简单直接的获取ref组件之前，我们使用this.$ref.refName的方法获取ref组件。这里setup采用更简单方便的方式获取ref获取props之前的optionApi，需要先在props中定义props，然后获取来自this.xxx，容易造成重名被覆盖等问题，这里vue3使用defineProps来定义props，直接返回response对象。这里，相信开发者看了之后就会大致了解脚本的设置。赶紧拥抱vue3时期的组合api，拥抱脚本设置，让代码看起来更简洁~