watch
watch監聽器用來監聽data中資料的值，隻要監聽的資料一變化，它就能執行相應的函數.
建立監聽器通過watch屬性，它是一個對象.
開發時，能用computed實作的就用computed
需要執行異步操作的時候，就要用到watch
<!DOCTYPE html>
<html >
<head>
<title>computed</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="" id="" v-model='firstName'>
<input type="text" name="" id="" v-model='lastName'>
<h1>全名：{{fullName}}</h1>
<h2>全名：{{watchFullName}}</h2>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
watchFullName: ''
},
//計算屬性是根據data中已有的屬性，計算得到一個新的屬性
//建立計算屬性通過computed關鍵字，它是一個對象
computed: {
fullName() {
return this.firstName + this.lastName
}
},
//watch監聽器用來監聽data中資料的值，隻要監聽的資料一變化，它就能執行相應的函數
//建立監聽器通過watch屬性，它是一個對象
watch: {
//這裡面的函數名很特殊，它是你需要監聽的data的名字，這個函數還包含兩個參數，一個是newVal,一個是oldVal
firstName(newVal, oldVal) {
this.watchFullName = newVal + this.lastName
},
lastName(newVal, oldVal) {
this.watchFullName = this.firstName + newVal
}
}
//開發時，能用computed實作的就用computed
//需要執行異步操作的時候，就要用到watch
})
</script>
</body>
</html>
深度監聽
<!DOCTYPE html>
<html >
<head>
<title>深度監聽</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model='user.name'>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
user: {
name: 'vivi'
}
},
watch: {
//監聽對象不能使用下面這種寫法，要使用深度監聽
// user(newVal, oldVal) {
// console.log('改變了')
// }
user: {
handler(newVal, oldVal) {
console.log(newVal.name)
},
//deep:true表示深度監聽
deep: true
}
}
})
</script>
</body>
</html>
![Element 中遠端搜尋的功能實作[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)