vue3基础-组合式API之computed

最新推荐文章于 2024-08-15 10:38:47 发布

_龙衣

最新推荐文章于 2024-08-15 10:38:47 发布

阅读量1k

点赞数

分类专栏： Vue3 基础文章标签： vue.js

本文链接：https://blog.csdn.net/ITxiaodong/article/details/123129836

版权

Vue3 基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了Vue3.x中如何使用`computed`属性，与Vue2.x进行对比。示例展示了在script-setup语法下，可以直接在模板中使用计算属性，无需返回。当`userInfo.name`数据变化时，`fullName`会自动更新。文章通过一个修改用户名的例子，展示了Vue响应式系统的实时更新特性。

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

computed

与Vue2.x中computed配置功能一致

如使用script-setup可不用return，直接在template中使用即可

// 引入 computed
import { computed } from 'vue';

<template>
  <div class="home">

    <div>{{fullName}}</div>
    <button @click="changeUserName">修改名称</button>

  </div>
</template>

// script 操作
const userInfo = reactive({
      name: '张三',
      age: 18,
    });
const fullName = computed(() => `${userInfo.name}是个好人`);
function changeUserName() {
     userInfo.name = '李四';
   }