Vue3定义对象|极客教程

Vue3定义对象

在Vue3中定义对象是非常常见的操作，对象在Vue3中通常用来存储组件的数据、方法和计算属性等信息。本文将详细介绍在Vue3中如何定义对象，以及一些常见的使用方式。

基本语法

在Vue3中，定义一个对象可以使用普通的JavaScript对象字面量, 也可以使用reactive函数将普通JavaScript对象转换为响应式对象。以下是两种定义对象的方式示例：

使用普通JavaScript对象字面量

const user = {
  name: 'Alice',
  age: 25,
  email: 'alice@example.com'
};

使用`reactive`函数

import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 25,
  email: 'alice@example.com'
});

在上面的示例中，我们定义了一个名为user的对象，其中包含了name、age和email等属性。如果我们需要对user对象进行更改和监听，推荐使用reactive函数转换为响应式对象。

访问和修改对象属性

无论是使用普通JavaScript对象字面量还是使用reactive函数定义的对象，在Vue3中访问和修改对象属性的方式是一样的。可以通过点号.或者中括号[]来访问和修改对象的属性值。以下是访问和修改对象属性的示例：

// 访问对象属性
console.log(user.name); // 输出：Alice

// 修改对象属性
user.age = 26;
console.log(user.age); // 输出：26

// 使用中括号访问和修改对象属性
console.log(user['email']); // 输出：alice@example.com
user['email'] = 'alice_new@example.com';
console.log(user['email']); // 输出：alice_new@example.com

动态添加属性

除了直接在定义对象时指定属性外，我们也可以在运行时动态地向对象添加属性。可以直接使用赋值语句或者Vue.set函数来动态添加属性。以下是示例代码：

// 直接赋值添加属性
user.city = 'New York';
console.log(user.city); // 输出：New York

// 使用Vue.set函数添加属性
import { reactive, toRefs } from 'vue';
const state = reactive({
  count: 0
});

// 动态添加属性
Vue.set(state, 'city', 'Paris');
console.log(state.city); // 输出：Paris

计算属性

在Vue3中，我们可以使用computed函数定义计算属性，计算属性可以依赖于对象的属性，并且在相关属性发生变化时自动重新计算值。以下是定义计算属性的示例：

import { computed } from 'vue';

const user = reactive({
  firstName: 'Alice',
  lastName: 'Smith'
});

const fullName = computed(() => {
  return ` ${user.firstName}$ {user.lastName}`;
});

console.log(fullName.value); // 输出：Alice Smith

// 修改属性值
user.lastName = 'Johnson';
console.log(fullName.value); // 输出：Alice Johnson

监听对象属性

如果希望监听对象属性的变化，并在属性发生变化时执行相应的操作，可以使用watch函数进行监听。以下是一个简单的示例：

// 创建目标对象
const target = reactive({
  count: 0
});

// 监听count属性的变化
watch(() => target.count, (newValue, oldValue) => {
  console.log(`count属性变化，旧值为： ${oldValue}，新值为：$ {newValue}`);
});

// 修改count属性值
target.count = 10;
// 输出：count属性变化，旧值为：0，新值为：10