watch
watch是一個對象，鍵是需要觀察的表達式，值是對應回調函數，值也可以是方法名，或者包含選項的對象。vue實例將會在實力化得時候調用watch，遍歷watch對象的每一個屬性。
watch基本用法：
<div id="app">
{{name}}
</div>
var vm = new Vue({
el: '#app',
data() {
return {
name: 'ff',
age:'',
sex:'',
}
},
methods: {
changeAge(newVal, oldVal) {
console.log(newVal,oldVal);
}
},
watch: {
name(newVal, oldVal) {
console.log(1);
},
sex:funtion(newVal,oldVal){
console.log(newVal,oldVal)
},
// 注意哦：這裏千萬不要使用箭頭函數，因爲箭頭函數綁定了父級作用域的上下文，使用箭頭函數的時候，this指向的是window，而不是vm對象。
age:'changeAge' //可以使用一個監聽處理函數，操作。每次值發生變化的時候執行這個函數。
},
})
watch中的屬性：
- immediate：初次綁定值的時候監聽數據。
watch有一個特點，當值第一次綁定的時候不會執行監聽函數，只有值發生變化的時候纔會執行。設置immediate可以使得第一次監聽的時候就會執行。
寫法不一樣的是，這裏的監聽的數據要寫成key，value的形式，key是要監聽的數據的屬性名，value中寫一些方法， 包括handler和immediate，監聽的執行操作寫在handler函數中，immediate爲true的時候，會初次執行。
var vm = new Vue({
el: '#app',
data() {
return {
name: 'ff',
love: {
name1: 'yy'
}
}
},
methods: {
changeLove(newVal, oldVal) {
console.log(newVal, oldVal);
}
},
watch: {
love: {
handler:'changeLove'
immediate: true,
},
},
})
- deep：深度監聽，
普通的watch監聽是無法監聽到對象內部的數據變化的，這個時候我們就需要deep屬性，設置deep屬性對對象進行深度監聽。
var vm = new Vue({
el: '#app',
data() {
return {
name: 'ff',
love: {
name1: 'yy',
name2: 'xx',
}
}
},
methods: {
changeLoveName2(newVal, oldVal) {
console.log(newVal, oldVal);
}
},
watch: {
love: {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
immediate: true,
deep: true,
},
'love.name2':{ //當監聽的對象比較大的時候，我們又不需要全部監聽，這個時候我們可以使用這種方法，對對象中的某一個進行監聽。
handler:'changeLoveName2'
}
},
})
注意哦：多維數組是不需要進行深度監聽的，只有對象才需要。
computed
計算屬性的結果會被緩存，當依賴的屬性值發生變化的時候，計算屬性會重新計算，如果沒有發生變化，則使用緩存的值。
computed的出現是爲了將我們在模板字符串中要操作的步驟放到的外部computed中執行。從而使得模板字符串中的代碼簡單明瞭，不摻雜任何js操作。
計算屬性的基本用法
<div id="app">
<div>{{name}} -- {{aDouble}}</div>
<div>{{name}} -- {{age * 2}}</div>
</div>
// 上面這種寫法最終結果都是一樣的，看起來感覺沒有什麼不合適 ，但是當數據很複雜的時候，我們又不想寫一個專門的處理函數對數據進行初始化，這個時候computed就完美的充當了完善數據的這個角色
</div>
var vm = new Vue({
el: '#app',
data() {
return {
name: 'ff',
age: 18
}
},
computed: {
aDouble: function () {
return this.age * 2;
}
}
})
conputed中的get函數
computed中的屬性等同於是data中的屬性。所以也有getter和setter方法，但是默認情況下computed中只是預設了getter，沒有setter方法。
<div id="app">
<div>{{name}} - {{aDouble}} -- {{ aThree }}</div>
</div>
var vm = new Vue({
el: '#app',
data() {
return {
name: 'ff',
age: 18
}
},
computed: {
aThree() {
return this.age * 3;
},
// aThree中有一個默認的get方法，所有athree和下面的aDouble是等價的（不看倍數...）
aDouble: {
get() {
console.log('get')
return this.age * 2;
}
}
}
})
補充一下：當我們計算屬性中的屬性在模板中不使用的時候，我們改變屬性值是不會出發conputed中的屬性變化的。
computed中的set方法
<div id="app">
<div>{{name}} - {{aDouble}} -- {{ aThree }}</div>
</div>
computed: {
aThree() {
return this.age * 3;
},
aDouble: {
get: function (newVal) {
return this.age;
},
set: function (newVal) {
this.age = newVal
return newVal
}
}
},
// 當我們改變aDouble的時候，會出發set方法，然後改變this.age,進而出發get方法，改變aDouble。
// 注意get和set中的newVal是不一樣,get中的newVal是vm對象，二set中的newVal是改變的值（這個newVal我自己定義的，使用其他的也可以。）
watch和computed比較
vuex中保存的computed屬性值使用computed的set是監測不到變化的，這個時候我們就要使用watch來監聽。
v-model綁定computed，用watch監測不到變化，這個時候我們要使用computed中的set才能監聽到。
之前都是用vue，慢慢的都有點忘記了，最近在面試的過程中感覺自己好多東西都知道個大概，但是實際用起來卻要去查api，不知道是不是腦子鏽到了，以後我會將一些知識點慢慢的總結起來，有時間多看看。