溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
