Vue3 手把手教你自定义组件——setup版

最新推荐文章于 2024-05-10 12:27:58 发布

姑老爷呀

最新推荐文章于 2024-05-10 12:27:58 发布

阅读量1.6w

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/pfourfire/article/details/125381688

版权

刚开始尝试Vue 3的时候用的组合式API都是这样的写法

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
    ...
    return {
        ...
    }
  }
}

乍一看感觉不如原来的Options API啊，什么逻辑都写到setup里面了，好臃肿的一个方法。

但事实上，Vue 3在对响应式重新设计之后，让我们可以通过ref和reactive方法来创建声明一个响应式变量，也就意味着我们很多逻辑可以不依赖this.data进行开发和编写，甚至一些响应式逻辑都可以多组件复用。

在了解了这些点之后，即便我们可以将逻辑拆分独立，通过解构的方式导入setup中，让我们代码更加高内聚低耦合，但我们依然避免不了，复杂组件需要return无数的方法或者变量提供给模板使用。

但是，在<script setup> 语法糖出现之后，这个问题得到了极大的改善，不管是import的组件也好，还是声明的变量也罢，都可以不用一个个return了。

编译器会帮助我们转换成setup()函数的内容，这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。

所以，还不赶紧学起来？

关注