vue3声明变量方法

解决方案

在Vue 3中声明变量主要依赖于组合式API（Composition API）和选项式API。使用组合式API时，我们通过setup()函数来声明变量，这使得代码逻辑更加清晰且易于维护；而在选项式API中，则是在data()函数中进行声明。接下来将这两种方式下声明变量的方法。

一、组合式API - setup()函数中声明变量

1. ref定义基本类型变量

当需要定义一个基本类型的变量如数字、字符串等时，可以使用ref。它会返回一个响应式的且可变的引用对象。

javascript

  <div>{{ count }}</div>
  <button>增加</button>
</p>


import { ref } from 'vue';

export default {
  setup() {
    // 声明一个名为count的基本类型变量，初始值为0
    const count = ref(0);

    // 定义修改count的方法
    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};


<p>

这里需要注意的是，当我们想要改变ref定义的变量时，要通过.value属性来访问和修改它的值。

2. reactive定义对象类型变量

对于对象类型的复杂数据结构，推荐使用reactive。它可以创建一个响应式的对象，并且内部所有属性都是响应式的，不需要像ref那样使用.value。

javascript

  <div>{{ user.name }} - {{ user.age }}</div>
  <button>更新用户信息</button>
</p>


import { reactive } from 'vue';

export default {
  setup() {
    // 声明一个对象类型的变量user
    const user = reactive({
      name: '张三',
      age: 20
    });

    // 修改user对象中的属性
    const updateUser = () => {
      user.name = '李四';
      user.age = 25;
    };

    return {
      user,
      updateUser
    };
  }
};


<p>