《Vue零基础教程》（4）Vue.js计算属性和侦听器

最新推荐文章于 2026-08-18 12:45:55 发布
原创 最新推荐文章于 2026-08-18 12:45:55 发布 · 321 阅读 · 9 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测

本文介绍了Vue中的计算属性和侦听器。计算属性用于对数据进行加工处理，具有缓存特性，适合处理复杂逻辑。文中通过字符串反转案例展示了表达式、方法和计算属性三种实现方式，并对比了它们的优缺点。侦听器(watch)用于监听数据变化并执行相应操作，文中演示了通过侦听器实现全名拼接的功能。计算属性适合数据加工场景，侦听器适合响应数据变化的场景，两者都是Vue中重要的响应式特性。

本文参考视频教程，点击这里查看

1 计算属性

1) 什么是计算属性

计算属性就是基于现有属性计算后的属性

2) 计算属性的作用

计算属性用于对原始数据的再次加工

3) 案例

需求

实现如下效果

使用表达式实现
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 需求: 实现字符串的反转
          eg. abc 转换成  cba 
    -->
    <div id="app">
      请输入一个字符串: <input type="text" v-model="msg" /> <br />
      <!-- 反转字符串的思路
        1. 取出字符串中的每个字符 msg.split('') 形成一个数组
        2. 反转数据. msg.split('').reverse() 形成一个反转数组
        3. 将反转数组拼接. msg.split('').reverse().join('')
      -->
      <!-- 不推荐!! 在模板中书写复杂的表达式 -->
      <h3>反转后的字符串: {{msg.split('').reverse().join('')}}</h3>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: '',
        },
      })
    </script>
  </body>
</html>
使用方法实现
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 需求: 实现字符串的反转
          eg. abc 转换成  cba 
    -->
    <div id="app">
      请输入一个字符串: <input type="text" v-model="msg" /> <br />
      <!-- 反转字符串的思路
        1. 取出字符串中的每个字符 msg.split('') 形成一个数组
        2. 反转数据. msg.split('').reverse() 形成一个反转数组
        3. 将反转数组拼接. msg.split('').reverse().join('')
      -->
      <!-- 不推荐使用方法
        原因: 没有缓存, 每次调用方法, 代码会执行一次
      -->
      <h3>反转后的字符串: {{reverseMsg()}}</h3>
      <h3>反转后的字符串: {{reverseMsg()}}</h3>
      <h3>反转后的字符串: {{reverseMsg()}}</h3>
      <h3>反转后的字符串: {{reverseMsg()}}</h3>
      <h3>反转后的字符串: {{reverseMsg()}}</h3>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: '',
        },
        methods: {
          reverseMsg() {
            console.log('反转函数被执行了...')
            // 返回 反转后的字符串
            return this.msg.split('').reverse().join('')
          },
        },
      })
    </script>
  </body>
</html>
使用计算属性实现
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 需求: 实现字符串的反转
          eg. abc 转换成  cba 
    -->
    <div id="app">
      请输入一个字符串: <input type="text" v-model="msg" /> <br />
      <!-- 反转字符串的思路
        1. 取出字符串中的每个字符 msg.split('') 形成一个数组
        2. 反转数据. msg.split('').reverse() 形成一个反转数组
        3. 将反转数组拼接. msg.split('').reverse().join('')
      -->
      <!-- 推荐使用 计算属性
        1. 有缓存的. 当计算属性生成一次后, 挂载到vm实例. 
          后继的访问, 直接使用vm实例上的属性
        2. 方便调试
      -->
      <h3>反转后的字符串: {{reverseMsg}}</h3>
      <h3>反转后的字符串: {{reverseMsg}}</h3>
      <h3>反转后的字符串: {{reverseMsg}}</h3>
      <h3>反转后的字符串: {{reverseMsg}}</h3>
      <h3>反转后的字符串: {{reverseMsg}}</h3>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: '',
        },
        computed: {
          // 编写一个函数, 这个函数会被做为该计算属性的getter
          reverseMsg() {
            console.log('计算属性被执行了...')
            // 该函数的返回值, 做为访问计算属性的结果
            return this.msg.split('').reverse().join('')
          },
        },
      })
    </script>
  </body>
</html>

4) 特点

  1. 有缓存
  2. 调试方便

5) 作业

2 侦听器

1) 什么是侦听器

可以通过watch配置项, 监听data中已经存在的属性的改变

2) 语法

watch: {
  // 监听data中的firstName属性
  firstName() {
   // 执行一系列的操作
  },
},

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      姓: <input type="text" v-model="lastName" /> <br />
      名: <input type="text" v-model="firstName" /> <br />
      全名(侦听器实现): {{fullName}}
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            lastName: '',
            firstName: '',
            fullName: '',
          }
        },
        watch: {
          // 侦听lastName的变化, 当lastName变化时, 执行该函数
          lastName() {
            this.fullName = this.lastName + this.firstName
          },
          // 侦听firstName的变化, 当firstName变化时, 执行该函数
          firstName() {
            this.fullName = this.lastName + this.firstName
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>

3) 特点

在watch对应的回调函数中, 可以获取到新值和 旧值

示例

const vm = new Vue({
  el: '#app',
  data: {
    firstName: '',
    lastName: '',
  },
  // 使用watch这个配置项
  watch: {
    // 在watch对应的回调函数中, 可以得到新值和旧值
    // 对于简单数据类型, 可以获取新旧值
    // 对于引用数据类型, 不能获取旧值
    firstName(newValue, oldValue) {
      // 一对多: 监听某一个属性的改变, 做一系列的操作
      console.log('firstName改变了...')
      console.log('新的值:', newValue)
      console.log('旧的值:', oldValue)
    },
  },
})

4) 深度监听

默认情况下watch配置项只会对data中第一层的数据进行侦听.

如果第一层的数据是引用类型(如, 数组, 对象). 需要开启深度监听

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      姓: <input type="text" v-model="lastName" /> <br />
      名: <input type="text" v-model="firstName" /> <br />
      <!-- 侦听器: 一因多果(关注一个已经存在的属性的改变) -->
      <!-- 
        1. 如果是基本类型数据, 可以获取到新旧值
        2. 默认是浅层次的侦听
        3. 如果是引用类型, 如果需要深层次数据的改变, 开启深度侦听
       -->
      全名(侦听器实现): {{fullName}}
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            lastName: '',
            firstName: '',
            fullName: '',
            obj: { name: 'xiaoming' },
          }
        },
        watch: {
          // 侦听lastName的变化, 当lastName变化时, 执行该函数
          lastName(newValue, oldValue) {
            console.log('新的值: ', newValue)
            console.log('旧的值: ', oldValue)
            this.fullName = this.lastName + this.firstName
          },
          // 侦听firstName的变化, 当firstName变化时, 执行该函数
          firstName() {
            this.fullName = this.lastName + this.firstName
          },
          // obj() {
          //   console.log('obj被修改了')
          // },
          obj: {
            handler() {
              console.log('obj被修改了...')
            },
            deep: true,
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>

5) 回调执行的时机

默认情况下

watch在DOM更新之前调用. 得到的是 DOM更新之前的数据

可以通过flush: 'post'设置在DOM更新之后调用回调

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">{{msg}}</div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            msg: 'hello',
          }
        },
        watch: {
          // 默认情况下. watch在DOM更新之前调用. 得到的是 DOM更新之前的数据
          // msg() {
          //   console.log(app.innerHTML)
          // },
          msg: {
            handler() {
              console.log('更新之后的DOM', app.innerHTML)
            },
            flush: 'post',
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>

3 计算属性 VS 侦听器

  1. 是否会在vm实例中挂载新属性?
    1. computed会
    2. watch不会
  2. 对应关系
    1. computed是多对一, 可以同时监听多个值改变, 最终计算得到一个新的属性
    2. watch是一对多, 主要监听一个属性的变化, 执行多种逻辑
  3. 能否获取新旧值?
    1. computed不能
    2. watch能

4 综合作业

标签
#vue.js #javascript #前端
GIS遥遥
关注
Vue.js 计算属性的基本使用，复杂使用 ，set 和 get，计算属性与methods的对比 和 计算属性与侦听器
qq_52499703的博客
07-27 2831
Vue.js 计算属性的基本使用，复杂使用 ，set 和 get，计算属性与methods的对比 和 计算属性与侦听器
Vue.js教学第五章：计算属性与侦听器详解
weixin_74149145的博客
05-18 905
Vue.js中的计算属性和侦听器是处理数据变化和响应的两个重要工具。计算属性允许基于一个或多个数据属性定义新属性，其值会随依赖数据的变化自动更新，具有缓存机制，能有效提高性能并简化模板逻辑。侦听器则用于监听数据变化并执行相应操作，适用于需要执行副作用或复杂逻辑的场景。两者可以相互配合，计算属性用于数据处理和展示，侦听器用于响应数据变化并执行特定操作。通过合理使用计算属性和侦听器，可以提高代码的效率和可维护性。
【vue教程】四. Vue 计算属性和侦听器
前端探索者
07-21 1808
本文详细介绍了 Vue 的计算属性和侦听器，以及生命周期钩子函数。计算属性提供了一种声明性描述一个值是如何根据组件中其他数据计算得来的方式，侦听器允许我们对数据的变化做出响应，而生命周期钩子函数则让我们可以在 Vue 实例的不同阶段执行特定的逻辑。在下一篇文章中，我们将探讨 Vue 的路由管理，包括 Vue Router 的配置和使用。欢迎在文章下方留言，分享学习 Vue 计算属性、侦听器和生命周期钩子函数的心得体会，或提出在学习过程中遇到的问题。我们将在后续的文章中提供解答和指导。
Vue计算属性、侦听器
2401_87079968的博客
12-29 1161
computed:监听数据的变化，返回计算结果 watch:监听数据的变化，进行额外操作
Vue学习-计算属性和侦听器
weixin_59357453的博客
04-05 2152
这是一篇Vue-计算属性和侦听器的学习记录
Vue.js - 计算属性与侦听器 【0基础向 Vue 基础学习】
迪幻的博客
05-27 1640
本文为 Vue.js 专栏的第二篇文章，给大家详细讲解了 Vue 框架中的计算属性与侦听器
JavaScript中的计算属性、方法和侦听器详解
yk_dflkg的博客
05-16 1135
在现代JavaScript开发中，特别是使用Vue、React等前端框架时，计算属性、方法和侦听器是三个非常重要的概念。这些功能帮助开发者更高效地管理数据和处理逻辑，创建响应式的用户界面。本教程将深入讲解这三个概念，从基础原理到实际应用，帮助新手全面理解和掌握它们。计算属性、方法和侦听器是Vue.js和现代前端开发中不可或缺的工具。了解它们各自的特点和适用场景，可以帮助我们写出更加高效、可维护的代码。计算属性适合用于数据转换和派生值计算，尤其是当这些值会被多次使用时。它们的缓存机制使其在性能上具有优势。
Vue.js 的计算属性和侦听器：提升数据处理与交互的关键工具
FFNCL的博客
03-20 1418
计算属性是 Vue.js 赋予开发者基于响应式依赖进行复杂计算的有力工具。它能缓存计算结果，仅当相关依赖发生变化时才重新计算。这一特性使得在处理频繁使用且计算成本较高的数据时，性能得到显著提升。在 Vue 实例的computed选项中定义计算属性函数。以一个电商场景为例，假设有一个商品列表，每个商品对象包含price（价格）和quantity（数量）属性，需要计算商品总价。首先在 Vue 组件的datadata() {return {然后在computed选项中定义计算商品总价的计算属性});
《WebGIS之Vue零基础教程》（5）计算属性与侦听器
分享GIS开发学习资料，3S最新资讯
04-25 1029
::info计算属性就是基于现有属性计算后的属性。
Vue：计算属性和侦听器
ChinaDragon10的博客
05-31 981
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
光脚丫思考Vue3与实战：第05章 计算属性和侦听器 第02节 侦听器
热门推荐
光脚丫思考的专栏
05-27 2万+
下面是本文的屏幕录像的在线视频： 温馨提示： 1、视频下载：线上视频被压缩处理，可以下载高清版本： 链接：https://pan.baidu.com/s/1MiGKmrzp40i1ZD_4borteQ提取码：wc59 2、示例代码：https://pan.baidu.com/s/1rCqbY_j35FcRWRZbuOfHqg提取码：79kh 下图是文章大纲： 一、概述 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维...
深入理解Vue 3：计算属性与侦听器的艺术
https://blog.cmdragon.cn/
05-30 1531
Vue.js作为当今流行的前端框架之一，以其响应式数据绑定和组件化架构著称。随着技术的不断演进，Vue3带来了许多令人期待的新特性，这些特性不仅使得Vue.js更加高效和灵活，也为开发者提供了更好的开发体验。Composition API：Vue 3引入了Composition API，它是对原有Options API的补充，使得代码更加模块化和可复用。通过组合式API，开发者可以更方便地组织和重用逻辑。
vue中的计算属性和侦听器
九仞山的专栏
06-08 977
详细介绍了vue3中计算属性和侦听器的使用方法和异同点
计算属性computed和侦听器watch的区别
weixin_51465537的博客
03-14 1688
用于基于响应式数据进行计算。结果会被缓存，只有相关依赖发生变化时才重新计算。适用于衍生数据的场景。用于观察响应式数据的变化执行自定义操作。不缓存结果，每次数据变化都会触发操作。适用于需要在数据变化时执行异步操作或复杂逻辑的场景。通常情况下，计算属性适用于简单的数据计算，而watch更适用于对数据变化做一些异步或复杂处理的情况。
vue2（7）计算属性和侦听器的学习笔记
反贪局
03-29 602
Vue.js 提供了计算属性和侦听器两种功能，它们用于处理复杂的逻辑和响应数据的变化。计算属性用于声明式地处理数据，而侦听器则用于观察和响应数据的变化，并执行相应的逻辑。计算属性和侦听器是 Vue.js 中非常强大的特性，它们允许我们以声明式的方式处理复杂的逻辑和响应数据的变化。计算属性适用于基于其他数据创建派生值，并具有缓存机制以提高性能；而侦听器则适用于在数据变化时执行异步操作或开销较大的逻辑。掌握这些特性对于构建高效和可维护的 Vue.js 应用非常重要。
Vue计算属性和侦听器
weixin_43108180的博客
06-23 1142
计算属性和侦听器以及指令补充
Vue 计算属性与侦听器：如何高效处理数据变化
lb320的博客
03-04 928
计算属性是基于 Vue 实例的响应式数据进行计算并返回结果的属性。它的特点是缓存机制：只有当依赖的响应式数据发生变化时，计算属性才会重新计算，否则直接返回缓存的结果。侦听器用于监听 Vue 实例中某个特定数据的变化，并在数据变化时执行一些逻辑。与计算属性不同，侦听器更适合处理异步操作或副作用。计算属性：适合处理依赖多个数据的复杂计算，具有缓存机制，性能更优。侦听器：适合监听单个数据的变化，执行异步操作或副作用。在实际开发中，应根据具体需求选择合适的工具。如果需要缓存结果并简化模板逻辑，优先使用计算属性。
计算属性 vs 侦听器：Vue 中的响应式原理
severwinter_的博客
12-15 666
计算属性是基于它们的依赖进行缓存的属性。换句话说，只有在依赖的响应式数据发生变化时，计算属性才会重新计算，否则会直接返回缓存的结果。这使得计算属性在性能上优于每次访问都需要计算的普通方法。侦听器是一种允许你观察数据变动并执行某些操作的机制。当某个数据变动时，侦听器会触发回调函数，这使得你能够对数据变化做出响应。与计算属性不同，侦听器并不缓存其结果，而是每次数据变化时都会执行回调函数。Vue 提供了计算属性和侦听器两种强大的响应式工具，它们的选择取决于实际需求。计算属性。
Vue Router 4.x风格导航守卫全面升级
最新发布
梦曦i的博客
08-18 177
uni-router v2.2.0 版本带来两项重要更新：1）彻底移除 next() 回调模式，统一采用返回值模式；2）新增 onBeforeRouteLeave 组件内离开守卫。本次升级使守卫系统与 Vue Router 4.x 完全一致，解决了表单编辑等场景下无法优雅拦截页面离开的问题。组件内守卫支持同步/异步操作，自动随组件卸载清理，无需手动管理全局守卫。迁移时需将所有 next() 调用改为对应的返回值形式，路由拦截逻辑现可更自然地封装在组件内部。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值