Vue3 Composition API 之 setup 函数

举报
青年码农 发表于 2022/09/02 23:17:25 2022/09/02
【摘要】 点击上方“青年码农”关注 回复“源码”可获取各种资料 Vue 3 中引入的一种新的编写 Vue 组件的方式,可以将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。 在说 Vue3 之前,我们先看看 Vue2 项目中是如何编写逻辑代码的,新建一个组件 <template> &nb...

点击上方“青年码农”关注

回复“源码”可获取各种资料

Vue 3 中引入的一种新的编写 Vue 组件的方式,可以将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。

在说 Vue3 之前,我们先看看 Vue2 项目中是如何编写逻辑代码的,
新建一个组件


       <template>
         <div></div>
       </template>
       <script>
       export default {
         name: "demo",
         props: {},
         data() {
           return {};
         },
         created() {},
         watch: {},
         computed: {},
         methods: {}
       };
       </script>
       <style></style>
   
  

每个属性都有自己的功能,比如 data 定义数据、methods 中定义方法、computed 中定义计算属性、watch 中监听属性改变,小项目中这种方式确实能带来很大的便利,但是当我们组件变得更大,更复杂时,逻辑会不断增长,那么同一个功能的逻辑就会被拆分的很分散。尤其是对于后面接手的同事,可读性会很低,很难理解。一个功能会跳到多个地方,比较容易出差错,而且后期维护会很复杂。

是不是可以将一个功能点涉及到的数据和逻辑组织到一起,Composition API 就这么诞生了,它很好的解决了上面的问题。接下来认识下 Composition API,由于对 TS 支持更友好,所以 demo 用 ts 做示例


       <template>
         <div>
           <a-button type="primary" @click="getValue(22)">Primary Button</a-button>
           <a-input v-model:value="count"></a-input>
           <div>{{ count }}</div>
           <div>{{ x }}-{{ y }}</div>
           <a-button @click="add">点击</a-button>
           <div>{{ counter.count }}</div>
         </div>
       </template>
       <script setup lang="ts">
       import { ref, onMounted } from "vue";
       import { postLogin } from "@/api/user";
       import { useMouse } from "@/hooks/main";
       import { useCounterStore } from "@/store/modules/counter";
       defineProps<{ msg: string }>();
       // 获取鼠标位置信息
       const { x, y } = useMouse();
       const counter = useCounterStore();
       function add() {
         counter.count++;
         counter.$patch({ count: counter.count });
         counter.increment();
       }
       // 获取数据
       function getdata(title?: string) {
         postLogin({ username: "22", password: "33" })
           .then(res => {
             console.log(res);
           })
           .catch(err => {
             console.log("0000");
           });
       }
       // 获取值
       const count = ref(0);
       function getValue(value?: any): void {
         count.value = value;
       }
       </script>
       <style scoped lang="less">
       .read-the-docs {
         color: #888;
       }
       .vue {
         .vue-child {
           font-size: 40px;
           background: @main-color-theme1;
         }
       }
       </style>
   
  

代码中我们可以看到,少了一些选项,功能点逻辑更加集中,看不懂没关系,这里只是演示,后面会详细讲解,这篇文章主要讲解 Composition API 的 setup 函数

一 setup 函数

setup 其实就是组件的另外一个选项,只不过这个选项强大到我们可以使用它来替代之前所编写的大部分其他选项,比如:methods、computed、data、生命周期等选项。

参数


       props:父组件传递过来的属性
       context:是一个普通的 JavaScript 对象,它暴露三个组件的 property
   
  
props

因为 props 是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性。如果需要解构 prop,可以通过使用 setup 函数中的 toRefs 来安全地完成此操作。

Vue3.0 使用


       <script>
       export default {
         setup (props) {
          return {}
         }
       }
       </script>
   
  

Vue3.2 使用


       <script setup>
       export default {
         const props = defineProps({
           treeCode: String,
         });
       }
       </script>
   
  

script setup 是一种编译时语法糖,可在 SFC 内使用 Composition API 时极大地提升工作效率。

context

里面包含有三个属性 attrs、slots 和 emit

(1)attrs:里面包含了所有的非 props 属性。
(2)slots:父组件传递过来的插槽。
(3)emit:当我们组件内部需要发出事件时会用到 emit。

Vue3.0 使用


       <script>
       export default {
         setup (props.{attrs,slots,emit}) {
          return {}
         }
       }
       </script>
   
  

Vue3.2 使用


       <script setup>
       export default {
         // defineProps
         const props = defineProps({
           treeCode: String,
         });
         // defineEmits
         const emit = defineEmits(['on-confirm'])
         // useSlots
         const slots = useSlots()
       }
       </script>
   
  

在 script setup 使用 slots 和 attrs 的情况应该是很比较少见的,大部分人是(SFC)模式开发,在 template 通过 slot 标签就可以渲染插槽,可以在模板中通过 和attrs 来访问它们。主要在 JSX /TSX 使用比较多。

this

setup 不可以使用 this

setup() 自身并不含对组件实例的访问权,即在 setup() 中访问 this 会是 undefined。我们可以理解为:this未指向当前的组件实例,在setup被调用之前,data,methods,computed等都没有被解析,但是组件实例确实在执行setup函数之前就已经被创建好了。

文章来源: blog.csdn.net,作者:NMGWAP,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/NMGWAP/article/details/126654168

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。