vue中computed和watch的寫法，以及區別

<template>
  <div class="print">
      <div style="color: red">
        <p class="gooe">初始數據--》{{hasOut}}</p>
        <p class="gooe" style="margin-top: 90px">watch監聽到的數據----》<span style="color: rebeccapurple">{{watcher}}</span></p>
        <p class="gooe" style="margin-top: 90px">computed監聽到的數據----》<span style="color: royalblue">{{gogo}}</span></p>
//這里gogo名字隨意，不要加（）
      </div>
  </div>
</template>
<script>

  export default {
    name: 'print',
    data () {
      return {
        hasOut:0,
        watcher:0,
      }
    },
    mounted(){
      setTimeout(()=>{
        this.testPrint(0)
      },2000)
    },
    watch: {
      hasOut(val) {
        if(val<10000){
            this.watcher=val
            this.testPrint()
           console.log(this.hasOut,'watch監聽')

        }
      }
    },
    computed:{
　　　　//寫法跟method里面一樣。這個名字隨意取
      gogo:function(){
           return this.hasOut
      }
    },

    methods:{
       testPrint(){
          console.log(this.hasOut,'打印出來++++++++++++')
          setTimeout(()=>{
              this.hasOut++
            },1000)
      },
    },
  }
</script>

 

寫法如上下次直接copy

/***************************************************************************************************************************************************/

如果是對象呢，比如監聽對象其中的某一個屬性變化呢

return {
  hasOut:0,
  watcher:0,
  test:{
      num:0,
      val:100
  }
}
監聽對象單一屬性變化computed寫法

computed:{
  testText () {
    return this.test.num
  }
},

監聽對象單一屬性變化watch寫法

  watch: {

//      如果只是對象的某一個屬性怎么寫，computed又怎么寫
      'test.num':{
        deep: true,//進行深度監聽，當對象中的屬性發生變化時，會調用 handler 方法。
        handler(newVal,oldVal){
//          console.log(newVal,oldVal,'做你想做的事情')
        }
      },
}
頁面上寫法，特別注意testText 不加括號

<span>{{test.num}}我是watch</span>
<span>{{testText}}我是計算屬性</span>

如果是對象呢，比如監聽對象其中的全部屬性變化呢

watch：{

　　

test:{
  deep: true,
  handler: function (newVal,oldVal){
    console.log( newVal.num,oldVal.num,'新舊對比，但是打印出來確實一樣的WHY');
  }
}

}
這么寫的話打印出來是一樣的，

受現代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到對象屬性的添加或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

默認情況下 handler 只監聽test這個屬性它的引用的變化，我們只有給test賦值的時候它才會監聽到,比如下面添加一個方法重新賦值，

methods:{
  numClick(){
    this.test = {
      num: 100,
      val:150
    }
  },
}

console.log( newVal.num,oldVal.num,'新舊對比，但是打印出來確實一樣的WHY');這個打印出來的東西才是不一樣的

其實打印出來不變的根本就是：指向了同一個地址（因為對象指向的是同一地址）；你重新賦值的話，他的地址變了，所以打印不同
 
a={
　　b:1
}
this.a={
　　b:5
}
這里重新賦值了，雖然這個對象都有b屬性，但是地址不同了




區別：********（watch耗性能，computed會緩存，一般用computed，性能考慮）

計算屬性computed和偵聽屬性watch（說實話，現在都還搞啥懂，只要你有變化的我都用watch）

計算屬性有緩存，如果你不需要緩存的話，就用方法代替吧，反正方法你用時候都會去調用的，

計算屬性的最大特點是它的結果會被vue.js緩存處理，依賴項不變化的話，就直接使用上一次的計算結果。

 

其實計算屬性和watcher的區別主要在於適用場景的不同，這從他們的命名就很容易的看出來：
當你需要一個值，一個屬性，它是變動的且邏輯比較復雜，寫在模板里不直觀，或者你需要多次使用這個值，就用計算屬性；
當你需要監控某個變量，當其改變后進行某些操作，就用watch

 監聽數組的變化