watch屬性
watch可以監視data中指定數據的變化，然後觸發這個watch中對應的function處理函數，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字符串拼接</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" id="f" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstname: "",
lastname: "",
fullname: ""
},
watch: {
"firstname": function (newval, oldval) {
this.fullname = newval + "-" + this.lastname;
},
"lastname": function (newval) {
this.fullname = this.firstname + "-" + newval;
}
},
})
</script>
</body>
</html>
watch中數據對應的函數具有兩個參數，新值和舊值。
運行如下：
fullname屬性會動態的隨着firstname和lastname值的變化而變化。
watch還能用於監聽非dom元素如router的地址變化，如下示例：
"$route.path": function (newval, oldval) {
console.log("路由地址變化...");
}
這很有用！
computed屬性
同樣對於上述案例，我們還可以使用vue對象的computed屬性進行對上述案例的重構，在computed屬性中，我們可以定義一些稱爲計算屬性的函數，在使用的時候當作屬性而非方法。如下案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字符串拼接</title>
<script src="vue/vue.js"></script>
<script src="vue/vue-router.js"></script>
</head>
<body>
<div id="app">
<input type="text" id="f" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstname: "",
lastname: "",
},
computed: {
"fullname": function () {
return this.firstname + "-" + this.lastname
}
},
})
</script>
</body>
</html>
這也實現了上述效果。而且需要注意的是，該值的計算結果會被緩存，也就是說改變之後，computed中方法只會運行一次，如果同時還有取值，則會從緩存中獲得。如下：
<body>
<div id="app">
<input type="text" id="f" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
{{fullname}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstname: "",
lastname: "",
},
computed: {
"fullname": function () {
console.log("ok")
return this.firstname + "-" + this.lastname
}
},
})
</script>
</body>
運行結果：
以上。