Vue开发中计算属性与方法调用之间的区别与联系

晨曦蜗牛

已于 2025-03-10 11:41:16 修改

阅读量1k

点赞数 11

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2025-03-10 11:39:36 首次发布

本文链接：https://blog.csdn.net/solaraceboy/article/details/146148324

文章目录

一概述

在 Vue 中，计算属性（computed）和方法（methods）都可以用于处理数据逻辑，但它们的核心区别在于缓存机制和触发方式。

计算属性示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>

<body>
    <!-- 使用computed -->
    <div id="app">
        <button v-on:click="a++">a+1</button>
        <button v-on:click="b++">b+1</button>
        <p>number + a = {
  
  {add1}}</p>