• computed 是vue獨有的特性計算屬性,可以對data中的值再進行一個重新的計算,computed是支持緩存的,只有依賴數(shù)據(jù)發(fā)生改變，才會重新進行計算。

• watch 我理解的是監(jiān)聽data里面的所有屬性的新舊值的變化吧

計算屬性

變量不在 data中定義，而是定義在computed中，寫法跟寫方法一樣，有返回值。函數(shù)名直接在頁面模板中渲染，不加小括號
如果是在methods里面聲明的話,在調(diào)用的時候需要加上小括號例如：fullName()

<div id="app">
  <input type="text" v-model="firstName" /><br />  //我是
  <input type="text" v-model="lastName" /><br />   //計算屬性
  <input type="text" v-model="fullName" /><br />   //我是計算屬性
</div>

 data() {
    return {
      firstName: "我是",
      lastName: "計算屬性",
    };
  },
  computed: {
    fullName() {
      return this.firstName + "" + this.lastName;
   },
 },

偵聽器(watch)

watch是一個對象所以用的時候要使用watch:
有三種使用的方式
第一個handler：其值是一個回調(diào)函數(shù)。即監(jiān)聽到變化時應該執(zhí)行的函數(shù)。
第二個是deep：其值是true或false；確認是否深度監(jiān)聽。（一般監(jiān)聽時是不能監(jiān)聽到對象屬性值的變化的，數(shù)組的值變化可以監(jiān)聽到。）
第三個是immediate：其值是true或false；確認是否以當前的初始值執(zhí)行handler的函數(shù)

普通方式

<div>
     <p>FullName: {{fullName}}</p>
     <p>FirstName: <input type="text" v-model="firstName"></p>
</div>

data: {
    firstName: 'Dawei',
    lastName: 'Lou',
    fullName: ''
  },
  watch: {
　　 //普通的watch監(jiān)聽
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  } 
// 現(xiàn)在我們對于firstName監(jiān)聽了。在進行input框輸入的時候,就會觸發(fā)到watch，改變data中的fullName

使用handler&immediate

在上面這個方法中第一次綁定watch是不會執(zhí)行的,可以使用這兩個屬性進行在第一次綁定的時候就會執(zhí)行了

firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里聲明了firstName這個方法之后立即先去執(zhí)行handler方法
    immediate: true
 }

deep進行深度監(jiān)聽

watch 監(jiān)聽的時候會返回一個obj新的obj對象和改變前的obj對象

  <p>obj.a: {{ obj.a }}</p>
  <p>obj.a: <input type="text" v-model="obj.a" /></p>

data() {
    return {
      obj: {
        a: 123,
      },
    };
  },
  watch: {
    obj: {
      handler(newName, oldName) {
        console.log(newName, oldName);
      },
      immediate: true,
      deep: true,
    },
  },