计算属性
计算属性的值是一个函数，并且是内置缓存的；
示例：
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >计算属性、方法、侦听器</ > < src="./vue.js"></ ></head><body> <div id="app"> {{fullName}} {{age}} </div> < > var vm = new Vue({ el:"#app", data:{ firstName:"Dell", lastName:"Lee", age:28 }, //计算属性 computed:{ fullName:function(){ console.log("计算了一次")； return this.firstName + " " + this.lastName } } }) </ ></body></html>输出：
缓存机制：在本例中，计算属性为 fullName ,它依赖两个变量--firstName 和 lastName,当它依赖的变量没有发生任何改变的时候，计算属性就不会重新计算了，而用一直用上一次的计算结果，这样可以提高性能。（28已经变为27，但并没有“计算了一次”，依赖的值没有改变就不会再次计算）
依赖的值发生改变则再次计算
方法
示例：通过方法可以实现和上面同样的功能
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >计算属性、方法、侦听器</ > < src="./vue.js"></ ></head><body> <div id="app"> {{fullName()}} {{age}} </div> < > var vm = new Vue({ el:"#app", data:{ firstName:"Dell", lastName:"Lee", age:28 }, methods:{ fullName:function(){ console.log("计算了一次")； return this.firstName + " "+ this.lastName； } } }) </ ></body></html>输出：
但 方法 中没有缓存机制，所以其性能不如 计算属性
侦听器
侦听器通过 侦听 firstName 和 lastName 的值是否发生变化，当发生变化时，就给 fullName 重新赋值
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >计算属性、方法、侦听器</ > < src="./vue.js"></ ></head><body> <div id="app"> {{fullName()}} {{age}} </div> < > var vm = new Vue({ el:"#app", data:{ firstName:"Dell", lastName:"Lee", fullName:"Dell Lee", age:28 }, watch:{ firstName:function(){ console.log("计算了一次")； this.fullName = this.firstName + " "+ this.lastName； }, lastName:function(){ console.log("计算了一次")； this.fullName = this.firstName + " "+ this.lastName； } } }) </ ></body></html>
只要监听的值不发生变化，就不会改变，同样有缓存机制
当监听的值发生变化，就会改变，会执行计算
继续阅读与本文标签相同的文章
-
Java 学习（28）---(线程的控制 / 生命周期 /解决安全问题）
2026-05-26栏目： 教程
-
SQL--( 初识 MyBatis)
2026-05-26栏目： 教程
-
SQL--(MyBatis 实战）
2026-05-26栏目： 教程
-
初识 Vue（28）---（Vue 中的动画封装）
2026-05-26栏目： 教程
-
初识 Vue（27）---（Vue 中的列表过渡）
2026-05-26栏目： 教程