聊聊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 + ' ' + lastName}} <!-- 2️⃣使用插值表达式展示全名。 -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: { // 1️⃣在 data 中定义一组数据，里面有 firstName 和 lastName 两个内容；
firstName: 'Oli',
lastName: 'Zhao'
}
})
</script>
</body>
</html>
但需求是实现了，可同时模板上就有了一些逻辑。而模板本身是用来显示就好，并不需要添加逻辑在里面！【相关推荐：vuejs视频教程、web前端开发】
理想的方式是在插值表达式中直接添加 fullName 变量来显示全名：
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
fullName: 'Oli Zhao' // ❗️data 中添加了 fullName！
}
})
</script>
可以看到，当代码这样写时也是没有问题的。
但实际上代码冗余了：原本 data 内已经有了 firstName 和 lastName ，可以用它们组合出全名，但又重新定义了一次 fullName 。
接下来，将介绍另外三种方法来解决这个需求。
1 计算属性 computed
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao'
},
computed: { // 1️⃣计算属性 computed 属于 Vue 实例的方法，直接定义在实例中；
fullName() { // 2️⃣计算属性的值 fullName 是一个函数；
return this.firstName + ' ' + this.lastName // ❗️一定要写上 return 把计算结果返回！
}
}
})
</script>使用计算属性后，代码完全不会冗余， fullName 是根据 firstName 和 lastName 计算出来的，页面上的效果也是一样。
计算属性还有一个非常重要的知识点：
计算属性会基于它们的响应式依赖进行缓存。
也就是说，当计算属性依赖的数据发生改变时，它会重新计算；若没有变化时，则不计算，会一直使用上一次计算的结果（这样也就提高了一些性能）。
在我们的代码中，当 firstName 或 lastName 改变时，fullName 会重新计算，不变时则用缓存的上次计算结果。
<div id="app">
{{fullName}}
{{age}} <!-- 2️⃣把 age 渲染到模板上； -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
age: 18 // 1️⃣data 中添加 age 为 18；
},
computed: {
fullName() {
console.log('计算了一次') // 3️⃣每当执行时 console.log 一次。
return this.firstName + ' ' + 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: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
age: 18
},
methods: { // ❗️在 methods 中定义 fullName 方法，逻辑上与计算属性一样；
fullName() {
console.log('计算了一次')
return this.firstName + ' ' + this.lastName
}
}
})
</script>保存后，刷新页面查看效果时，它会进行一次计算。当我们更改 age 时，它会再计算一次，更改 lastName 时也会进行一次计算：
所以方法是没有缓存机制的，只要页面重新渲染， fullName 方法就会被重新执行一次。
3 侦听器 watch
当使用侦听器时，不可避免的会让代码冗余：
<div id="app">
{{fullName}} <!-- 1️⃣-②：插值表达式内不需要 ()； -->
{{age}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
fullName: 'Oli Zhao', // 1️⃣-①：data 中定义 fullName；
age: 18
},
watch: { // 2️⃣在实例中定义侦听器 watch；
firstName() { /*
2️⃣-①：定义 firstName 方法，对 firstName 进行侦听，
当它改变时，重新对 fullName 赋值；
*/
console.log('计算了一次')
this.fullName = this.firstName + ' ' + this.lastName
},
lastName() { /*
2️⃣-②：定义 lastName 方法，对 lastName 进行侦听，
当它改变时，重新对 fullName 赋值。
*/
console.log('计算了一次')
this.fullName = this.firstName + ' ' + this.lastName
}
}
})
</script>保存后回到页面刷新。当第一次进入页面时，因为我们重新定义过 fullName ，所以 watch 不会进行计算就会显示出来。在修改与 fullName 不想关的数据 age 后，由于我们只用 watch 侦听了 firstName 和 lastName ，所以也不会进行计算。当我们修改 lastName 时，则进行一次计算：
总结：
-
methods会在每次渲染页面都执行一次方法； -
watch和computed都具备缓存机制，但watch的语法比computed的语法复杂了很多。
所以一般情况下，当一个功能通过 watch 、 methods 和 computed 方法都可以实现时，首推“计算属性 computed ”。
以上是聊聊Vue中的计算属性、方法与侦听器的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
PHP与Vue：完美搭档的前端开发利器
Mar 16, 2024 pm 12:09 PM
PHP与Vue：完美搭档的前端开发利器在当今互联网高速发展的时代，前端开发变得愈发重要。随着用户对网站和应用的体验要求越来越高，前端开发人员需要使用更加高效和灵活的工具来创建响应式和交互式的界面。PHP和Vue.js作为前端开发领域的两个重要技术，搭配起来可以称得上是完美的利器。本文将探讨PHP和Vue的结合，以及详细的代码示例，帮助读者更好地理解和应用这两
前端面试官常问的问题
Mar 19, 2024 pm 02:24 PM
在前端开发面试中，常见问题涵盖广泛，包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此，应试者应充分准备这些方面，以展现自己的能力和专业知识。
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
Django是前端还是后端？一探究竟！
Jan 19, 2024 am 08:37 AM
Django是一个Python编写的web应用框架，它强调快速开发和干净方法。尽管Django是一个web框架，但是要回答Django是前端还是后端这个问题，需要深入理解前后端的概念。前端是指用户直接和交互的界面，后端是指服务器端的程序，他们通过HTTP协议进行数据的交互。在前端和后端分离的情况下，前后端程序可以独立开发，分别实现业务逻辑和交互效果，数据的交
Go语言前端技术探秘：前端开发新视野
Mar 28, 2024 pm 01:06 PM
Go语言作为一种快速、高效的编程语言，在后端开发领域广受欢迎。然而，很少有人将Go语言与前端开发联系起来。事实上，使用Go语言进行前端开发不仅可以提高效率，还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性，并提供具体的代码示例，帮助读者更好地了解这一领域。在传统的前端开发中，通常会使用JavaScript、HTML和CSS来构建用户界面
Django：前端和后端开发都能搞定的神奇框架！
Jan 19, 2024 am 08:52 AM
Django：前端和后端开发都能搞定的神奇框架！Django是一个高效、可扩展的Web应用程序框架。它能够支持多种Web开发模式，包括MVC和MTV，可以轻松地开发出高质量的Web应用程序。Django不仅支持后端开发，还能够快速构建出前端的界面，通过模板语言，实现灵活的视图展示。Django把前端开发和后端开发融合成了一种无缝的整合，让开发人员不必专门学习
Golang与前端技术结合：探讨Golang如何在前端领域发挥作用
Mar 19, 2024 pm 06:15 PM
Golang与前端技术结合：探讨Golang如何在前端领域发挥作用，需要具体代码示例随着互联网和移动应用的快速发展，前端技术也愈发重要。而在这个领域中，Golang作为一门强大的后端编程语言，也可以发挥重要作用。本文将探讨Golang如何与前端技术结合，以及通过具体的代码示例来展示其在前端领域的潜力。Golang在前端领域的作用作为一门高效、简洁且易于学习的
如何在JavaScript中获取HTTP状态码的简单方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP状态码获取方法简介：在进行前端开发中，我们常常需要处理与后端接口的交互，而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法，并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时，服务
