vue3:组合式 API：setup()

前端报刊

已于 2022-10-11 11:18:35 修改

阅读量1k

点赞数

分类专栏： vue3 文章标签： vue.js elementui javascript

于 2022-10-11 10:50:28 首次发布

本文链接：https://blog.csdn.net/qq_36995521/article/details/127259291

版权

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.简单使用

<template>
  <div>
    <el-button type="primary" @click="handleClick">增加</el-button>
    {{ count }}
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
export default {
  setup() {
    const count = ref<number>(0);
    return {
      count,
    };
  },
  methods: {
    handleClick() {
      this.count++;
    },
  },
};
</script>

<style scoped></style>

1.setup()钩子函数

ref()是响应式API，

我们可以利用响应式API来声明响应式的状态，

在setup()函数中返回的对象会暴露给模板和组件实例，

并且暴露的对象中其他的选项也可以通过组件实例来获取setup()中暴露的属性。

2.setup自身不含有对实例的访问权，因此，不能在setup中通过this进行访问。

如果在setup中通过this进行访问的话，值为undefined。

我们可以在选项式API中去访问组合式API中暴露的值，反过来则不行。