計(jì)算屬性 computed

computed用來(lái)監(jiān)控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義，然后就可以在頁(yè)面上進(jìn)行雙向數(shù)據(jù)綁定展示出結(jié)果或者用作其他處理

場(chǎng)景：
購(gòu)物車?yán)锩娴纳唐妨斜砗涂偨痤~之間的關(guān)系，只要商品列表里面的商品數(shù)量發(fā)生變化，或減少或增多或刪除商品，總金額都應(yīng)該發(fā)生變化，
這里的這個(gè)總金額使用computed屬性來(lái)進(jìn)行計(jì)算是最好的選擇。（適合多對(duì)一的場(chǎng)景）

多對(duì)一的場(chǎng)景使用：

<p>{{luFei_Name}}</p>
vm = new Vue({
  el:"#app",
  data: {
      // 路飛的全名：蒙奇·D·路飛
      firstName: '蒙奇',
      secName: 'D',
      thirdName: '路飛'
  },
  computed: {
      luFei_Name: function () {
      return this.firstName + this.secName + this.thirdName
      }
  }
})
// 將“路飛”改為“海軍王”
vm.thirdName = '海軍王'  // 蒙奇·D·海軍王

computed使用緩存實(shí)例：

new Vue({
  el: '#app',
  // 設(shè)置兩個(gè)button，點(diǎn)擊分別調(diào)用getMethodsDate,getComputedDate方法
  template: 
'<div id="app">
    <button @click="getMethodsDate">methods</button>
    <button @click="getComputedDate">computed</button>
</div>',
  methods: {
    getMethodsDate: function () {
      alert(new Date())
    },
    // 返回computed選項(xiàng)中設(shè)置的計(jì)算屬性——computedDate
    getComputedDate: function () {
      alert(this.computedDate)
    }
  },
  computed: {
    computedDate: function () {
      return new Date()
    }
  }

注意
1、兩次點(diǎn)擊computed返回的時(shí)間是相同的??！
兩次點(diǎn)擊computed返回的時(shí)間是相同的?。?br> 兩次點(diǎn)擊computed返回的時(shí)間是相同的??！
2、兩次點(diǎn)擊methods返回的時(shí)間是不同的

原因：
new Date()不是依賴型數(shù)據(jù)（不是放在data等對(duì)象下的實(shí)例數(shù)據(jù)），所以computed只提供了緩存的值，而沒(méi)有重新計(jì)算
只有符合：1.存在依賴型數(shù)據(jù) 2.依賴型數(shù)據(jù)發(fā)生改變這兩個(gè)條件,computed才會(huì)重新計(jì)算。

總結(jié)：

• 支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會(huì)重新進(jìn)行計(jì)算；
• 不支持異步，當(dāng)computed內(nèi)有異步操作時(shí)無(wú)效，無(wú)法監(jiān)聽數(shù)據(jù)的變化；
• computed 屬性值會(huì)默認(rèn)走緩存，計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，也就是基于data中聲明過(guò)或者父組件傳遞的props中的數(shù)據(jù)通過(guò)計(jì)算得到的值
• 如果一個(gè)屬性是由其他屬性計(jì)算而來(lái)的，這個(gè)屬性依賴其他屬性，是多對(duì)一或者一對(duì)一，一般用computed
• 如果computed屬性屬性值是函數(shù)，那么默認(rèn)會(huì)走get方法；函數(shù)的返回值就是屬性的屬性值；在computed中的，屬性都有一個(gè)get和一個(gè)set方法，當(dāng)數(shù)據(jù)變化時(shí)，調(diào)用set方法。

偵聽屬性 watch

watch主要用于監(jiān)控vue實(shí)例的變化，它監(jiān)控的變量當(dāng)然必須在data里面聲明才可以，它可以監(jiān)控一個(gè)變量，也可以是一個(gè)對(duì)象

將對(duì)象寫成字符串的形式：

vm = new Vue({
    el:"#app",
    // （多個(gè)）船員名稱數(shù)據(jù) --> 依賴于 --> （1個(gè))一一一名稱數(shù)據(jù) 一個(gè)數(shù)據(jù)變化 --->  多個(gè)數(shù)據(jù)全部變化
    data: {
        haiZeiTuan_Name: '一一一', 
        suoLong: '一一一索隆', 
        naMei: '一一一娜美',
        xiangJiShi: '一一一香吉士'
    },
    watch: {
        haiZeiTuan_Name: function (newName) {   //函數(shù)的名字需是上面data內(nèi)的數(shù)據(jù)，只能監(jiān)控一個(gè)對(duì)象或一個(gè)變量
        this.suoLong = newName + '索隆'
        this.naMei = newName + '娜美'
        this.xiangJiShi = newName + '香吉士'
        }
    }
})
vm.haiZeiTuan_Name = '二二二'    

總結(jié)：

• 不支持緩存，數(shù)據(jù)變，直接會(huì)觸發(fā)相應(yīng)的操作；
• watch支持異步；
• 監(jiān)聽的函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是最新的值，第二個(gè)參數(shù)是輸入之前的值；
• 當(dāng)一個(gè)屬性發(fā)生變化時(shí)，需要執(zhí)行對(duì)應(yīng)的操作；適用一對(duì)多的情況
• 監(jiān)聽數(shù)據(jù)必須是data中聲明過(guò)或者父組件傳遞過(guò)來(lái)的props中的數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)，觸發(fā)其他操作，函數(shù)有兩個(gè)參數(shù)，
  　　immediate：組件加載立即觸發(fā)回調(diào)函數(shù)執(zhí)行，
  　　deep: 深度監(jiān)聽，為了發(fā)現(xiàn)對(duì)象內(nèi)部值的變化，復(fù)雜類型的數(shù)據(jù)時(shí)使用，例如數(shù)組中的對(duì)象內(nèi)容的改變，注意監(jiān)聽數(shù)組的變動(dòng)不需要這么做。注意：deep無(wú)法監(jiān)聽到數(shù)組的變動(dòng)和對(duì)象的新增，參考vue數(shù)組變異,只有以響應(yīng)式的方式觸發(fā)才會(huì)被監(jiān)聽到。

計(jì)算屬性 method與 偵聽屬性 watch區(qū)別

watch只能監(jiān)聽一個(gè)對(duì)象或變量（對(duì)象或變量必須是上面data內(nèi)的數(shù)據(jù)，對(duì)象的話可以寫成字符串形式“object.xxx”：對(duì)象內(nèi)部的xxx），比如上面watch的案例，他的內(nèi)部可以寫多個(gè)數(shù)據(jù)與這個(gè)監(jiān)聽的數(shù)據(jù)進(jìn)行關(guān)聯(lián)，當(dāng)該數(shù)據(jù)發(fā)生改變的時(shí)候，所有的內(nèi)部數(shù)據(jù)也都會(huì)隨著改變，可以做一些開銷大的操作，可以進(jìn)行異步操作
computed是計(jì)算屬性，需寫成函數(shù)的形式（可自定義函數(shù)名），該函數(shù)內(nèi)部的變量依賴于data內(nèi)的數(shù)據(jù)，但內(nèi)部定義的變量可以緩存，當(dāng)外面數(shù)據(jù)沒(méi)有更改的時(shí)候，他是不會(huì)觸發(fā)的，當(dāng)所依賴的數(shù)據(jù)進(jìn)行更改后，他才會(huì)重新計(jì)算，更新數(shù)據(jù)，他的內(nèi)部可以監(jiān)聽多個(gè)依賴的數(shù)據(jù)，他不會(huì)進(jìn)行異步操作