computed -—計算屬性

1、用途
被計算出來的屬性就是計算屬性
例一：用戶名展示
例二：列表展示
2、緩存
如果依賴的屬性沒有變化，就不會重新計算
getter / setter 默認(rèn)不會做緩存，但是Vue做了特殊的處理，可以緩存

watch — 偵聽、監(jiān)聽

1、用途
當(dāng)數(shù)據(jù)變化時，執(zhí)行一個函數(shù)。（當(dāng)你需要做的東西是為了執(zhí)行一個函數(shù)的時候才使用 watch，只是為了得到一個結(jié)果的話，還是使用 computed 更好）

例一：撤銷
例二：模擬computed（但是這樣做你為什么不直接使用 computed 呢）

2、watch 的 deep 屬性
作用：如果你的需求需要在 watch 中 任何一個 復(fù)雜類型（對象） 下的屬性變了，都相當(dāng)于這個對象變了。這個時候才會使用 deep 屬性

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
      <button @click="obj = {a:'a'}">obj = 新對象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 變了");
    },
    obj() {
     handler(){
       console.log("obj 變了");
    },
      deep: true //告訴你obj也跟著變了。 deep 就是：監(jiān)聽obj的時候是否深入進去看。（不深入就只會看地址）
    },
    "obj.a": function() {
      console.log("obj.a 變了");
    }
  }
}).$mount("#app");

3、 watch 的 immediate 屬性
immediate 表示是否在第一次渲染的時候執(zhí)行這個函數(shù)（由于 watch 的特性如果不設(shè)置 immediate 是不會在第一次渲染中就觸發(fā) watch 的）

    "user.email": {
      handler: "changed",
      immediate: true // 第一次渲染 觸發(fā) watch
    },

4、語法（推薦看文檔）
（1）語法1：
①：

watch:{
( )=>{ }, //不推薦使用因為這是箭頭函數(shù)，此刻這里的 this 是全局對象， this 沒懂去看博客
}

②：

watch:{
function(value, oldValue){ },
}

③：

watch:{
( ){ },
}

④：

watch:{
[f1, f2],
}

⑤：

watch:{
'methodName',
}

⑥：

watch:{
{handler:fn, deep:true, immediate:true},
'object.a': function(){}
}

（2）語法2：
vm.$watch('xxx', fn, {deep: .. , immediate: ..})//其中 'xxx' 可以改為一個返回字符串的函數(shù)

computed 和 watch 的區(qū)別（總結(jié)）

答：
computed 是計算屬性的意思， watch 就是監(jiān)聽的意思。computed 是用來計算出一個值的，這個值我們在調(diào)用的時候不需要加括號，可以當(dāng)屬性項用，它可以根據(jù)依賴自動緩存，如果依賴不變的話 computed 的值就不需要重新計算。
watch 是用來監(jiān)聽的，有兩個選項。一個是immediate 表示第一次渲染的時候是否要執(zhí)行這個函數(shù)；另一個是 deep 意思就是如果我們監(jiān)聽一個對象，我們是否要看這個對象內(nèi)部的變化。它的定義就是如果某個數(shù)據(jù)變化了，就要去執(zhí)行一個函數(shù)。