VueJs中setup的使用(上)

最新推荐文章于 2024-08-13 16:04:45 发布

itclanCoder

最新推荐文章于 2024-08-13 16:04:45 发布

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/wzc_coder/article/details/128451199

版权

本文介绍了Vue.js中setup函数的使用，包括声明式渲染和响应式状态的概念。setup函数可以直接作为script标签的属性使用，提供更简洁的代码和更好的性能。在模板中可以直接使用setup中定义的响应式数据，而在逻辑代码中需要通过.value访问。同时，setup函数执行在beforeCreate钩子之前，并且可以返回对象或渲染函数。官方推荐优先使用setup标签语法，但在特定场景下可使用setup选项式API。

摘要由CSDN通过智能技术生成

前言

在写组合式API代码时,首先接触到的是setup这个函数,在一些项目代码里,你会看到有的直接在script标签上添加setup标识,有的在选项式API

方式里,以setup()函数,配置选项的方式出现在单文件组件里

什么时候用setup()函数方式,什么时候不用,对于有些新手同学,有些困惑,以及它的一个使用特点和规则,都是需要知道的

在学习setup之前,先写一个常见的数字加减的示例,介绍两个概念声明式渲染与响应式

数字加减选项式API实现

如下是选项式示例代码如下所示

<template>
  <div class="base-vue3-setup">
      <p><el-input-number v-model="num" @change="handleChange" :min="1"></el-input-number></p>
      <p>num: {
   {num}}</p>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            num:0
        }
    },
    methods: {
      handleChange(value) {
        this.num = value;
      }
    },
  };
</script>
<style scoped>
  .base-vue3-setup {
    text-align: center;
  }
</style>

以上是使用选项式API实现的,响应式数据挂载在配置选项data()函数下,而方法绑定在methiods下

数字加减组合式API实现

如下是组合式API代码

<template>
   <div class="base-vue3-setup">
      <p><el-input-number v-model="num" @change="handleChangeCom" :min="1"></el-input-number></p>
      <p>num: {
   {num}}</p>
  </div> 
</template>
<script setup>
import {ref} from "vue";
const num = ref(0);
function handleChangeCom(value) {
    num1.value = value