聊聊Vue中的计算属性、方法与侦听器-Vue.js-PHP中文网

首页

web前端

Vue.js

聊聊Vue中的计算属性、方法与侦听器

青灯夜游

Mar 29, 2023 pm 05:54 PM

javascript前端vue.js

本篇文章带大家学习Vue，聊聊Vue基础理论实操，介绍一下Vue中的计算属性、方法与侦听器，希望对大家有所帮助！

聊聊Vue中的计算属性、方法与侦听器

需求：在 data 中，有 firstName 和 lastName 两个内容，页面显示“全名 fullName ”。

通过上一篇文章可以知道，我们直接使用插值表达式就能实现这个需求：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>前端一万小时-计算属性、方法与侦听器</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    {{firstName + &#39; &#39; + lastName}} <!-- 2️⃣使用插值表达式展示全名。 -->
  </div>

  <script>
    var vm = new Vue({
      el: &#39;#app&#39;,

      data: { // 1️⃣在 data 中定义一组数据，里面有 firstName 和 lastName 两个内容；
        firstName: &#39;Oli&#39;,
        lastName: &#39;Zhao&#39;
      }
    })
  </script>
</body>
</html>

但需求是实现了，可同时模板上就有了一些逻辑。而模板本身是用来显示就好，并不需要添加逻辑在里面！【相关推荐：vuejs视频教程、web前端开发】

理想的方式是在插值表达式中直接添加 fullName 变量来显示全名：

<div id="app">
  {{fullName}}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;,
      fullName: &#39;Oli Zhao&#39; // ❗️data 中添加了 fullName！
    }
  })
</script>

可以看到，当代码这样写时也是没有问题的。

但实际上代码冗余了：原本 data 内已经有了 firstName 和 lastName ，可以用它们组合出全名，但又重新定义了一次 fullName 。

接下来，将介绍另外三种方法来解决这个需求。

1 计算属性 `computed`

<div id="app">
  {{fullName}}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;
    },

    computed: { // 1️⃣计算属性 computed 属于 Vue 实例的方法，直接定义在实例中；

      fullName() { // 2️⃣计算属性的值 fullName 是一个函数；

        return this.firstName + &#39; &#39; + this.lastName // ❗️一定要写上 return 把计算结果返回！
      }
    }
  })
</script>

使用计算属性后，代码完全不会冗余， fullName 是根据 firstName 和 lastName 计算出来的，页面上的效果也是一样。

计算属性还有一个非常重要的知识点：

计算属性会基于它们的响应式依赖进行缓存。

也就是说，当计算属性依赖的数据发生改变时，它会重新计算；若没有变化时，则不计算，会一直使用上一次计算的结果（这样也就提高了一些性能）。

在我们的代码中，当 firstName 或 lastName 改变时，fullName 会重新计算，不变时则用缓存的上次计算结果。

<div id="app">
  {{fullName}}

  {{age}} <!-- 2️⃣把 age 渲染到模板上； -->
  
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;,

      age: 18 // 1️⃣data 中添加 age 为 18；
    },
    computed: {
      fullName() {
        console.log(&#39;计算了一次&#39;) // 3️⃣每当执行时 console.log 一次。
        return this.firstName + &#39; &#39; + this.lastName
      }
    }
  })
</script>

保存刷新网页后，可以看到计算属性 计算了一次 。当在控制台输入 vm.age = 20 更改 age 后，页面重新渲染了，“18”变为了“20”，但控制台没有再次输出 计算了一次 ，即计算属性没有进行重新计算。

而当我们更改 lastName 后，会重新计算一次：

2 方法 `methods`

第二种是我们已经非常熟悉的方法 methods ：

<div id="app">

  <!-- ❗️注意：在插值表达式内，计算属性通过属性的名字就可以用，但调用方法时，
	一定要加上 () 来进行调用！ -->
  {{fullName()}}

  {{age}}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;,
      age: 18
    },

    methods: { // ❗️在 methods 中定义 fullName 方法，逻辑上与计算属性一样；
      fullName() { 
        console.log(&#39;计算了一次&#39;)
        return this.firstName + &#39; &#39; + this.lastName
      }
    }

  })
</script>

保存后，刷新页面查看效果时，它会进行一次计算。当我们更改 age 时，它会再计算一次，更改 lastName 时也会进行一次计算：

所以方法是没有缓存机制的，只要页面重新渲染， fullName 方法就会被重新执行一次。

3 侦听器 `watch`

当使用侦听器时，不可避免的会让代码冗余：

<div id="app">

  {{fullName}} <!-- 1️⃣-②：插值表达式内不需要 ()； -->

  {{age}}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;,
      fullName: &#39;Oli Zhao&#39;, // 1️⃣-①：data 中定义 fullName；
      age: 18
    },

    watch: {  // 2️⃣在实例中定义侦听器 watch；

      firstName() { /*
      							2️⃣-①：定义 firstName 方法，对 firstName 进行侦听，
                    当它改变时，重新对 fullName 赋值；
                     */
        console.log(&#39;计算了一次&#39;)
        this.fullName = this.firstName + &#39; &#39; + this.lastName
      },

      lastName() { /*
      						 2️⃣-②：定义 lastName 方法，对 lastName 进行侦听，
                   当它改变时，重新对 fullName 赋值。
                    */
        console.log(&#39;计算了一次&#39;)
        this.fullName = this.firstName + &#39; &#39; + this.lastName
      }
    }

  })
</script>

保存后回到页面刷新。当第一次进入页面时，因为我们重新定义过 fullName ，所以 watch 不会进行计算就会显示出来。在修改与 fullName 不想关的数据 age 后，由于我们只用 watch 侦听了 firstName 和 lastName ，所以也不会进行计算。当我们修改 lastName 时，则进行一次计算：

总结：

methods 会在每次渲染页面都执行一次方法；
watch 和 computed 都具备缓存机制，但 watch 的语法比 computed 的语法复杂了很多。

所以一般情况下，当一个功能通过 watch 、 methods 和 computed 方法都可以实现时，首推“计算属性 computed ”。

（学习视频分享：vuejs入门教程、编程基础视频）

以上是聊聊Vue中的计算属性、方法与侦听器的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：掘金社区。如有侵权，请联系admin@php.cn删除

vue.js的功能：增强前端的用户体验Apr 19, 2025 am 12:13 AM

Vue.js通过多种功能提升用户体验：1.响应式系统实现数据即时反馈；2.组件化开发提高代码复用性；3.VueRouter提供平滑导航；4.动态数据绑定和过渡动画增强交互效果；5.错误处理机制确保用户反馈；6.性能优化和最佳实践提升应用性能。

vue.js：定义其在网络开发中的作用Apr 18, 2025 am 12:07 AM

Vue.js在Web开发中的角色是作为一个渐进式JavaScript框架，简化开发过程并提高效率。1)它通过响应式数据绑定和组件化开发，使开发者能专注于业务逻辑。2)Vue.js的工作原理依赖于响应式系统和虚拟DOM，优化性能。3)实际项目中，使用Vuex管理全局状态和优化数据响应性是常见实践。

了解vue.js：主要是前端框架Apr 17, 2025 am 12:20 AM

Vue.js是由尤雨溪在2014年发布的渐进式JavaScript框架，用于构建用户界面。它的核心优势包括：1.响应式数据绑定，数据变化自动更新视图；2.组件化开发，UI可拆分为独立、可复用的组件。

Netflix的前端：React（或VUE）的示例和应用Apr 16, 2025 am 12:08 AM

Netflix使用React作为其前端框架。1)React的组件化开发模式和强大生态系统是Netflix选择它的主要原因。2)通过组件化，Netflix将复杂界面拆分成可管理的小块，如视频播放器、推荐列表和用户评论。3)React的虚拟DOM和组件生命周期优化了渲染效率和用户交互管理。

前端景观：Netflix如何处理其选择Apr 15, 2025 am 12:13 AM

Netflix在前端技术上的选择主要集中在性能优化、可扩展性和用户体验三个方面。1.性能优化：Netflix选择React作为主要框架，并开发了SpeedCurve和Boomerang等工具来监控和优化用户体验。2.可扩展性：他们采用微前端架构，将应用拆分为独立模块，提高开发效率和系统扩展性。3.用户体验：Netflix使用Material-UI组件库，通过A/B测试和用户反馈不断优化界面，确保一致性和美观性。

React与Vue：Netflix使用哪个框架？Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVueDirectly.1）TeamExperience：selectBasedAsedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects，vueforsimplerprojects，reactforforforecomplexones.3）cocatizationNeedsneeds：reactofficatizationneedneeds：reactofferizationneedneedneedneeds：reactoffersizatization needeffersefersmoreflexiblesimore.4）ecosyaka

框架的选择：是什么推动了Netflix的决定？Apr 13, 2025 am 12:05 AM

Netflix在框架选择上主要考虑性能、可扩展性、开发效率、生态系统、技术债务和维护成本。1.性能与可扩展性：选择Java和SpringBoot以高效处理海量数据和高并发请求。2.开发效率与生态系统：使用React提升前端开发效率，利用其丰富的生态系统。3.技术债务与维护成本：选择Node.js构建微服务，降低维护成本和技术债务。