vue3-computed计算属性和reactive响应式系统结合使用
目录
vue3-computed计算属性和reactive响应式系统结合使用
1.前言
vue3中使用reactive函数创建一个响应式对象，当对象数据发生变化的时候，依赖这些数据的计算属性和模板会自动的更新。
2.实例
2.1 简写
<template>
<div>
<p>用户名: {{ userName }}</p>
<p>用户名的大写形式: {{ upperCaseName }}</p>
<button @click="changeName">更改用户名</button>
</div>
</template>
<script>
import { reactive, computed } from 'vue';
export default {
name: 'UserComponent',
setup() {
// 使用reactive创建响应式对象
const state = reactive({
name: 'messi'
});
// 定义计算属性upperCaseName，根据state.name计算得到大写形式
const upperCaseName = computed(() => state.name.toUpperCase());
// 定义一个方法来更改用户名
const changeName = () => {
state.name = 'ronaldo';
};
// 返回需要在模板中使用的变量和方法
return {
userName: state.name,
upperCaseName,
changeName
};
}
};
</script>
<style scoped>
/* 样式部分可以根据需要添加 */
</style>reactive用于创建一个响应式的state对象，该对象包含一个name属性。computed用于定义一个计算属性upperCaseName，它的值是基于state.name计算得出的大写形式。- 当
state.name的值改变时，upperCaseName会自动更新，因为它是计算属性，会跟踪它的依赖并自动重新计算。 changeName是一个方法，用于更改state.name的值。- 这些变量和方法通过
setup函数的返回对象暴露给模板，使得模板可以访问和使用它们
2.2 考虑读写
<template>
<div>
<p>姓名: {{ fullName }}</p>
<p>年龄: {{ age }}</p>
<input v-model="firstName" placeholder="修改名">
<input v-model="lastName" placeholder="修改姓">
</div>
</template>
<script>
import { reactive, computed } from 'vue';
export default {
setup() {
// 使用reactive创建响应式对象
const state = reactive({
firstName: 'messi',
lastName: 'Lionel',
age: 34,
});
// 定义计算属性，考虑读和写操作
const fullName = computed({
get: () => `${state.firstName} ${state.lastName}`,
set: (newValue) => {
[state.firstName, state.lastName] = newValue.split(' ');
}
});
return {
firstName: state.firstName,
lastName: state.lastName,
age: state.age,
fullName,
};
},
};
</script>
<style scoped>
div {
padding: 20px;
}
input {
margin-top: 10px;
}
</style>reactive用于创建响应式对象state，它包含了组件的状态数据。computed定义了一个计算属性fullName，它既有get方法也有set方法。get方法返回firstName和lastName组成的完整名字；set方法允许你通过设置fullName来修改firstName和lastName。v-model指令用于在输入框和计算属性fullName之间创建双向绑定，这意味着当用户在输入框中输入内容时，fullName会自动更新，并且反过来，fullName的变化也会反映在输入框中。