❶ Vue中computed計算屬性的使用和三個特點
computed是Vue實例中的一個屬性逗核對象。
在computed中，可以定義一些屬性，這些屬性，叫做計算屬性。計算屬性的本質就是一個方法，只不過，我們在使用這些計算屬性的時候，是把它們的名稱，直接當做屬性來使用，並不會把計算屬性當做山橋掘方法來使用。
三個注意事項：
一、計算屬性在引用的時候，一定不要加()去調用，直接把它當作普通的屬性去使用消余就好了；
二、只要計算屬性這個function內部所用到的data中的數據發生了變化，就會立即重新計算這個計算屬性的值；
三、計算屬性的求值結果，會被緩存起來，方便下次繼續使用；如果計算屬性方法中，所依賴的任何數據，都沒有發生過變化，則不會重新對計算屬性求值。
❷ vue中computer和watch的區別
computed用於處理復雜的邏輯運算，主要和methods儲存方法來進行區分；methods儲存方法，computed儲存需帆中侍要處理的數據值；methods每次都會調用，computed有緩存機制，只有改變時才執行，性能更佳。
watch顧名思義，用於監聽數據變化，其中可以監聽的數據來源有三部分：props、data、computed內的數據；watch提供兩個參數（newValue，oldValue），第一個參數是新值，第二個參數保存舊值；
1.支持緩存，只有依賴數據發生改變，才會重新進行計算
2.不支持非同步，當computed內有非同步操作時無效，無法監聽數據的變化
3.computed 屬性值會默認走緩存，計算屬性是基於它們的響應式依賴進行緩存的，也就是基於data中聲明過的數據通過計算得到的
4.如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，是一個多對一或者一對一，一般用computed
5.如果computed屬性屬性值是函數，那麼默認會走get方法；函數的返回值就是屬性的屬性值；在computed中的，屬性都有一個get和一個set方法，當數據變化時，調用set方法。
1.不支持緩存，數據變，直接會培攜觸發相應的操作；
2.watch支持非同步；
3.監聽的函數接收兩個參數，第一個參數是最新的值；第二態吵個參數是輸入之前的值；
4.當一個屬性發生變化時，需要執行對應的操作；一對多；
❸ Vue computed和watch
computed是一個計算屬性,類似於過濾器,對綁定到view的數據進行處理，根據計算所依賴的屬性動態返回新的計算結果。
computed和data的定義不可重名，否則是會報錯的。
computed是基於它們的響應式依賴進行緩存的 ，只在相關響應式依賴發生改變時它們才會重新求值，如果依賴沒有改變，多次訪問 fullName 這個計算屬性，都會立刻返回之前的結果，不必再重新計算。
計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter。
watch選輪肢拆項是一個對象，鍵是data裡面的數據，值是對應的回調函數，回調函數有兩個參數分別為修改後的值newValue和修改前的值oldValue。Vue 實例將會在實例化時調用$watch()，遍歷 watch 對象的每一個屬性。
watch在實例載入時是默認不監聽的，使用 immediate:true ，可以在首次載入時也做監聽。
watch只監聽數據的值是否發生改變，而不會去監聽數據的地址是否發生改變。也就是說，watch想要監聽引用類型數據的變化，需要進行深度監聽，使用 deep:true 可進行深度監聽。
computed與watch的應用場景：computed一般飢御應用在多個數據影響一個數據的操作，如購物車。watch一般使用在一個數據來影響多個數據的操作，如搜索框
1.computed函數必臘棗須用return返回計算的值，watch沒有return的必須要求
2.computed有緩存，如果依賴的值沒有改變，調用computed函數時則不會執行函數重新計算，直接返回緩存的值。watch沒有緩存，每次監聽的值發生改變都會執行。
❹ Vue computed 和 watcher
計算屬性的初始化是發生在 Vue 實例初始化階段的 initState 函數中 initComputed(vm, opts.computed);
1. 創建 vm._computedWatchers 為⼀個空對象
2. 遍歷 computed，拿到計算屬 性的每⼀個 userDef ， 獲取這個 userDef 對應的 getter 函數；
3. 為每⼀個 getter 創建⼀個 watcher ，這個 watcher 和渲染 watcher 不同，它是⼀個 computed watcher；
4. 最後對判斷如果 key 不是 vm 的屬性，則調用 defineComputed(vm, key, userDef) ，否則判斷計算屬性對於的 key 是否 已經被 data 或者 prop 所佔用，如果是的話則在開發環境報相應的卜蠢警告。
其中 const computedWatcherOptions = { lazy: true }
const sharedPropertyDefinition = {
enumerable: true,
逗弊大 configurable: true,
get: noop,
set: noop
}
defineComputed 就是利用 Object.defineProperty 給計算屬性對應的 key 值添加 getter 和 setter 。
createComputedGetterr 返回⼀個函數 computedGetter ，它就是計算屬性對應的 getter。
緩存 ： 在new Watcher時傳入的第四個參數 computedWatcherOptions 的 lazy = true，對應就是watcher的構造函數中的 dirty 為true。在 computedGetter 中，如果 dirty 為 false（即依賴的值沒有發生變化），就不會重新求值，相當於 computed 被緩存了 。
計算屬性的 watcher 和 普通 watcher 的不同
在計算屬性的 watcher 中， 傳入的參數 computedWatcherOptions = { lazy: true }， 所以它的 value = undefined，也不會調用 this.get() 方法
1. 當我們在 首次渲染山豎 render 的時候，訪問到我們的計算屬性的時候，就會觸發 計算屬性的 getter，就是 createComputedGetterr，然後會拿到 計算屬性的 watcher = this._computedWatchers && this._computedWatchers[key];
如果 dirty 為 true ，就是要重新計算 watcher 的值，如果為false，那麼就不用，就是使用緩存。
if (watcher.dirty) {
watcher.evaluate();
}
2. evaluate 就會調用 get 方法，緊接著調用 this.getter.call(vm, vm)， 也就是我們的 computed 的表達式，比如
name(){ return this.count + 1 };
3. 緊接著就會獲取 this.count 的 值，也就是調用 count 的 getter 方法，並把 computed watcher 添加到 subs 中， 最後 return value 拿到計算屬性的值， 然後 popTatget， 退出當前的 computed watcher。
4. if (Dep.target) { watcher.depend() }
evaluate 執行完畢，如果Dep.target 為 true， 那麼 此時的 Dep.target 為 渲染 Watcher，執行 depend。
5 . 現在 count 收集了computed watcher 和 渲染 watcher， 當我們的依賴的數據 count 發生變化的時候，會觸發 setter，就會 notify() 所有的 watcher，也包括我們的 computed watcher ，執行 update()。
當依賴的值發生變化 update 時候，將 dirty = true ，那麼就會 watcher.evaluate() 重新計算。
watcher
initWatch 對 watch 對象做遍歷，拿到每⼀個 handler ，Vue 是支持 watch 的同⼀個 key 對應多個 handler ，所以如果 handler 是⼀個數組，則遍歷這個數組，調用 createWatcher ⽅ 法，否則直接調用 createWatcher。
createWatcher 拿到它最終的回調函數，最後調用 vm.$watch(keyOrFn, handler, options) 函數
執行 var watcher = new Watcher(vm, expOrFn, cb, options)， 實例化了⼀個 watcher，這是⼀個 user watcher ，因為 options.user = true。
通過實例化 watcher 的方式，⼀旦我們 watch 的數據發送變化，它最終會執行 watcher 的 run 方法，執行回調函數 cb ，並且如果我們設置了 immediate 為 true，則直接會執行回調函數 cb 。最後返回了⼀個 unwatchFn 方法，它會調用 teardown 方法去移除這個 watcher 。
❺ Vue中computed和watch的區別
這是一個計算屬性，用於創建一個新的變數，其值是自定義的通過某些計算邏輯得到的結果，並在模板中引用，不需要加括弧
示例：
如上示例中，模板中的{{ reversedMessage }}是計算屬性computed中定義的reversedMessage方法的返回值
計算屬性是基於它們的響應式依賴進行緩存的，只在相關響應式依賴發生改變時它們才會重新求值
這是一個監聽器，用於腔基監聽指定data的變化，執行自定義的操作
示例：
watch還有兩個比較常用的參數：
（1）immediate：表示是否要在第賣弊一次渲染的時候執行這個函數
（2）deep：用於判斷data中的對象元素的某個key的值是否發生變化，因為當元素中某個key的值變化時，Vue可能會認為這個對象沒有變化，因為Vue判斷對象是否發生變化的依據是對象的內存地址
1. computed 支持緩存，只有依賴數據發生改變，才會重新進行計算；watch 不支持緩存，數據變，直接會觸發相應的操作
2. computed 不支持非同步，當computed內有非同步操作時無效，無法監聽數據的變化；watch 支持非同步
1. 如果一個數據依賴於其他數據的簡易計算處理的，那麼應該使用computed
2. 如果需要在某個數據變化時做伍配謹一些事情，使用watch來觀察這個數據變化
❻ Vue原理小知識-Computed原理
computed會為每一個屬性都創建各自的computed watcher，同時還有dep（這個dep用來收集頁面渲染的render wacher和 別的計算屬性的computed watcher，因為計算屬性可以相互依賴），還有一個名叫dirty的flag（用於優化緩存，下面會講拆答返）。並把watcher加入到Dep.target中，然後執行他的回調函數。
執行函數過程中觸摸（touch）到他的依賴舉派，也就是data中的屬性，此時就會觸發data屬性的getter方法，把computed watcher加入到data屬性的dep的subs數組中，這樣就完成了data的旅飢依賴收集。
同時還會有計算屬性相互依賴的情況，別的計算屬性在觸摸的過程中還會觸摸到當前的計算屬性，這樣就會把別的計算屬性的computed watcher加入到當前計算屬性的dep的subs數組中，完成computed的依賴收集
渲染時，computed屬性會跟data屬性做一樣的render watcher收集，如果computed在頁面中有渲染，這樣這個computed的dep就相當於持有了刷新頁面的能力，否則就沒有。
否則就分下面兩種情況：
❼ 25、watch 和computed區別 以及computed的緩存
一、偵聽屬性watch：
1、不支持緩存，當數據變化時，會直接觸發對應的操作。
2、watch支持非同步
3、監聽函數接收兩個參數，第一個新值，第二個舊值。
4、當一個屬性發生變化時，需要執行對應的操作，一對多；
5、監聽數據必須是data中聲明過或者父組件傳遞過來的props中的數據，當數據變化時，觸發對應的操作.
函數有兩個參數: immediate：組件載入立即觸發回調函數執行；
deep：深度監聽，為了發現對象內部值的變化，復雜類型的數據使用，例如數組老陵中的對象內容的改變，注意監聽數組的變化不需要這么做。
注意：deep無法監聽到數組的變動和對象的新增，參考vue數組變異，只有以響應式的方式觸發才會被監聽到。
6、當需要在數據變化時執行非同步或者開銷較大的操作時，使用watch是最佳的。
二、計算屬性computed:
1、支持緩存，只有依賴數據發生變化時，才會重新進行計算
2、不支持非同步，當computed內有非同步操作時無效，無法監聽數據變化
3、computed屬性值默認會走緩存，計算屬性是基於他們的響應式依賴進行緩存的，也就是基於data中聲明過或者父組件傳遞的props中的數據通過計算得到的值。
4、如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，是一對一或者多對一游陵，一般侍磨戚用computed。