计算属性，方法与侦听器

2024-12-25 技术教程

可以看到，刷新页面输出“计算了一次”，改变firstName又输出“计算了一次”，而改变age不会再输出“计算了一次”。如果fullName依赖的firstName、lastName没有改变，则不会再重新计算，因为已经把它们缓存了起来

当然还可以通过methods的方式来实现，但是只要页面重新渲染，fullName就会重新执行一次，它没缓存。所以，同样的功能，用computed会比methods更好

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script> </head><body> //注意fullName()的() <div id="app">{{fullName()}} {{age}}</div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { firstName: "Tom", lastName: "Cat", age: 18 /*fullName: "Tom Cat" //然而这样会有冗余变量，可以用computed来解决*/ }, /*//计算属性 computed: { fullName: function() { console.log("计算了一次") return this.firstName + " " + this.lastName //别忘了return } }*/ //当然还可以通过methods的方法来实现： methods: { fullName: function() { console.log("计算了一次") return this.firstName + " " + this.lastName } } }) </script></body></html>

也可以用监听(watch)的方式：

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script> </head><body> <div id="app">{{fullName}} {{age}}</div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { firstName: "Tom", lastName: "Cat", age: 18, fullName: "Tom Cat" //然而这样会有冗余变量，可以用computed来解决 }, /*//计算属性 computed: { fullName: function() { console.log("计算了一次") return this.firstName + " " + this.lastName //别忘了return } }*/ /*//当然还可以通过methods的方法来实现： methods: { fullName: function() { console.log("计算了一次") return this.firstName + " " + this.lastName } }*/ //还可以用监听的方式： watch: { firstName: function() { console.log("计算了一次"); this.fullName = this.firstName + " " + this.lastName }, lastName: function() { console.log("计算了一次"); this.fullName = this.firstName + " " + this.lastName } } }) </script></body></html>

（看得出来，只有在监听的发生改变才会执行）