computed
computed(函数)
<template >
<div class="container">
<p>{
{
obj.name}}的年龄是{
{
obj.age}}</p>
<p>{
{
obj2.name}}的年龄是{
{
obj2.age}}</p>
<p>{
{
obj.name}}和{
{
obj2.name}}的年龄和为{
{
computedObj}}</p>
<button @click="changeAge">惦记我改变{
{
obj.name}}的年龄</button>
</div>
</template>
<script>
import {
ref, computed } from "vue";
export default {
setup() {
let obj = ref({
name: "zjq", age: 18 });
let obj2 = ref({
name: "zrh", age: 23 });
let computedObj = computed(() => obj.value.age + obj2.value.age);
function changeAge() {
obj.value.age +=1
}
return {
obj, obj2, computedObj ,changeAge};
}
};
</script>
<style scoped>
</style>
点击按钮后,zjq的年龄+1,他们两个的年龄和+1,达到了我们想要的效果。
并且有一个特点,我们使用computed传递函数的形式返回的computedObj 是只读的数据,我们是修改不了的。
computed(对象)
<template >
<div class="container">
<p>{
{
obj.name}}的年龄是{
{
obj.age}}</p>
<p>{
{
obj2.name}}的年龄是{
{
obj2.age}}</p>
<p>{
{
obj.name}}和{
{
obj2.name}}的年龄和为{
{
computedObj}}</p>
<button @click="changeAge">惦记我改变{
{
obj.name}}的年龄</button>
</div>
</template>
<script>
import {
ref, computed } from "vue";
export default {
setup() {
let obj = ref({
name: "zjq", age: 18 });
let obj2 = ref({
name: "zrh", age: 23 });
// 使用具有 get 和 set 函数的对象来创建可写的 ref 对象
const computedObj = computed({
get: () => obj.value.age + obj2.value.age, //41 42 65
set: val => {
obj.value.age = val - 1; //42
}
});
function changeAge() {
obj.value.age++; //19
computedObj.value++ ; //43
}
return {
obj, obj2, computedObj, changeAge };
}
};
</script>
<style scoped>
</style>
使用具有 get 和 set 函数的对象来创建可写的 ref 对象;
使用computed(对象)返回的是一个ref响应数据,可以对他的值进行改变,需要.value改变,数据是可以改写的。
默认:
点击按钮后
点击按钮后:
1:obj.value.age++; 自加1 =》》》19
触发computed get=》改变年龄之和computedObj 42
2:computedObj.value++ ; 年龄之和自加1=》》》43
触发computed set=》obj.value.age = val - 1; 传入43-1 =42;
3:obj.value.age数值改变,触发computed get=》改变年龄之和computedObj 65