<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.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
}
}
})
</script>
</body>
</html>
可以看到，刷新页面输出“计算了一次”，改变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>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.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>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.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>
（看得出来，只有在监听的发生改变才会执行）
总结：如果一个功能可以通过method、computed、watch来实现，首选computed。因为它和watch一样会缓存，而且写的代码比watch少，更优于不缓存的method
原文地址：https://blog.51cto.com/5660061/2418984