<!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
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。