vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考：請說下Vue中computed 和 watch 的區別( 面試題 )
構造選項
computed / watch / methodscomputed
● computed 起初構想
在Vue的 template模板內（{{ }}）是可以寫一些簡單的js表達式的很便利，如上直接計算
{{this.firstName + ' ' + this.lastName}}因為在模版中放入太多聲明式的邏輯會讓模板本身過重，尤其當在頁面中使用大量復雜的邏輯表達式處理數據時，會對頁面的可維護性造成很大的影響，而 computed 的設計初衷也正是用于解決此類問題。
● computed屬性的實現原理
其中
● computed
computed 就是計算屬性的意思含義：模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。
<div id="example">{{ message.split('').reverse().join('') }} </div>在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變量 message 的翻轉字符串。當你想要在模板中多包含此處的翻轉字符串時，就會更加難以處理。
所以，對于任何復雜邏輯，你都應當使用計算屬性。
● 實例：計算屬性的getter函數
當其依賴的屬性的值發生變化的時，這個計算屬性的值也會自動更新。多用于"data，computed"的屬性。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body><div id="app"><p>原始字符串: {{ message }}</p><p>計算后反轉字符串: {{ reversedMessage }}</p> </div><script> var vm = new Vue({el: '#app', //element：元素data: {message: 'Runoob!'},computed: {// 計算屬性的 getterreversedMessage: function () {// `this` 指向 vm 實例return this.message.split('').reverse().join('')}} }) </script></body> </html>—————————————————————————————————————————————————— 運行結果： 原始字符串: Runoob!計算后反轉字符串: !boonuR同步實時更新：getter屬性
實例中聲明了一個計算屬性 reversedMessage,提供的函數將用作屬性 vm.reversedMessage 的 getter，vm.reversedMessage 依賴于 vm.message，在 vm.message 發生改變時，vm.reversedMessage 也會更新。
computed 計算出一個值：其值在調用不需要加括號，當屬性一樣使用,它會根據你所依賴的數據動態顯示新的計算結果。計算結果根據依賴會自動緩存，computed的值在getter執行后是會緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時才會重新調用對應的getter來計算 ( 依賴不變computed不會重新計算 )
● 實例：計算屬性的setter函數
當賦值給計算屬性的時候，將調用setter函數。多用于在模板組件中需要修改計算屬性自身的值的時候。// 顯示-姓名/郵件/電話,但是會重復 // DRY Don't rapeat yourself, 用 computed 來計算 displayNametemplate: `<div>{{user.nickname || user.email || user.phone}}</div>` ——————————————————————————————————————————————————template: `<div>{{displayName}}<div><button @click="set">set</button></div></div>`, computed: { //通過 computed 更改 displayName 中的值(set-nickName)displayName: { //方法（當屬性使用），computed會默認讀取返回值get() {const user = this.user;return user.nickname || user.email || user.phone;},set(value) { // 這里由于該計算屬性被賦值，將被調用this.user.nickname = value;}}},methods: {set() { // 賦值，調用setter函數this.displayName = "圓圓";},},應用場景
適用于重新計算比較費時不用重復數據計算的環境。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。如果一個數據依賴于其他數據，那么把這個數據設計為computed
watch
watch就是監聽的意思（偵聽屬性）Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：偵聽屬性。當你有一些數據需要隨著其它數據變動而變動時，你很容易濫用watch，然而，通常更好的做法是使用計算屬性而不是命令式的watch回調。
當需要在數據變化時執行異步或開銷較大的操作時，watch方式是最有用的。其允許我們執行異步操作 (訪問一個 API)，限制我們執行該操作的頻率，并在我們得到最終結果前，設置中間狀態。這些都是計算屬性無法做到的。
這樣來看，watch 完全可以替代 computed ？什么情況下，只能使用computed呢？回顧 computed 最大特點就是緩存，所以上述問題可以轉換為：哪些情況下，我們需要依賴緩存？
示例：父組件給子組件傳值，值的類型為引用類型
watch在監聽時有兩種選項：
- immediate表示第一次渲染時是否執行函數
- deep監聽對象時是否查看里面屬性的變化；如果其屬性變化就會去執行一個函數
methods
我們也可以使用 methods 來替代 computed，效果上兩個都是一樣的。
但是 computed 是基于它的依賴緩存，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><p>原始字符串: {{ message }}</p><p>計算后反轉字符串: {{ reversedMessage }}</p><p>使用方法后反轉字符串: {{ reversedMessage2() }}</p> </div><script> var vm = new Vue({el: '#app',data: {message: 'Runoob!'}, // 計算屬性computed: {// 計算屬性的 getterreversedMessage: function () {// `this` 指向 vm 實例return this.message.split('').reverse().join('')}}, // 方法methods: {reversedMessage2: function () {return this.message.split('').reverse().join('')}} }) </script> </body> </html>—————————————————————————————————————————————————— 運行結果： 原始字符串: Runoob!計算后反轉字符串: !boonuR使用方法后反轉字符串: !boonuR計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要message還沒有發生改變，多次訪問reversedMessage計算屬性會立即返回之前的計算結果，而不必再次執行函數。而方法卻會執行。
注意：
這也同樣意味著下面的計算屬性將不再更新，因為Date.now()不是響應式依賴：
computed: {now: function () {return Date.now()} }應用場景：
我們為什么需要緩存？假設我們有一個性能開銷比較大的計算屬性A，它需要遍歷一個巨大的數組并做大量的計算。然后我們可能有其他的計算屬性依賴于A。如果沒有緩存，我們將不可避免的多次執行A的 getter！如果你不希望有緩存，請用方法來替代。
相同之處：
computed和methods將被混入到 Vue 實例中。vm.reversedMessage/vm.reversedMessage()即可獲取相關計算屬性/方法。
結論：可以說使用 computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性computed屬性與methods的區別
computed屬性與watch的區別
總結
以上是生活随笔為你收集整理的vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gns3中两个路由器分别连接主机然后分析
- 下一篇： vue事件总线_[面试] 聊聊你对 Vu