watch
顧名思義，watch 就是監聽的意思，其專門用來觀察和響應Vue例項上的資料的變動。
能使用watch屬性的場景基本上都可以使用computed屬性，而且computed屬性開銷小，效能高，因此能使用computed就儘量使用computed屬性
但是當您想要執行非同步或昂貴的操作以響應不斷變化的資料時，這時watch就派上了大用場。
其應用場景一般都是搜尋框之類的，需要不斷的響應資料的變化
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model=content >
</div>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
content:""
}
},
watch:{
content(){
console.log(this.content);
}
},
})
</script>
</body>
</html>
複製程式碼執行效果：
但是如果你有一個搜尋按鈕，當你點選搜尋按鈕的時候，才會進行資料的響應和操作的時候，這時候最好使用
computed
computed
computed 就是計算屬性，其可以當成一個data資料來使用。
使用計算屬性要注意幾點：
-
computed是在HTML DOM載入後馬上執行的，如賦值操作； -
計算屬性計算時所依賴的屬性一定是響應式依賴，否則計算屬性不會執行。
-
計算屬性是基於依賴進行快取的，就是說在依賴沒有更新的情況，呼叫計算屬性並不會重新計算，可以減少開銷。所以可以說
computed的值在getter執行後是會進行快取的，只有在它依賴的屬性值改變之後，下一次獲取computed的值時才會重新呼叫對應的getter來計算出對應的新值。
其一般應用於比較複雜的渲染資料計算或者不必重新計算數值的情況
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{Name}}
</div>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
firstName:"Fan",
lastName:"JunYang"
}
},
computed:{
Name(){
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
複製程式碼上面就是一個經典的案例，當你改變了其中一個值的時候，另一個值並不會進行重新計算，從而減少了開銷。
methods
methods 就是方法。
他沒有快取，他也不像computed在DOM載入後可以自動執行，他必須有一定的觸發條件才能執行，如點選事件等；
我們可以將同一函式定義為一個methods或者一個computed。對於最終的結果，兩種方式確實是相同的。
但是最大的區別在於：
-
computed計算屬性是基於它們的依賴進行快取的。如果你進行多次訪問的時候（在不改變值的情況下），計算屬性會立即返回資料，而不必再次執行函式。並且他還可以自動執行。 -
而
methods只要發生重新渲染，就必定執行該函式，他必須有一定的觸發條件才能執行。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{Name1}}</span>
<br />
<span>{{Name}}</span>
<br />
<button @click='Name2()'>點我</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
firstName:"Fan",
lastName:"JunYang",
Name:""
}
},
computed:{
Name1(){
return this.firstName + " " + this.lastName
}
},
methods:{
Name2(){
return this.Name = this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
複製程式碼執行效果：
