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

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

一、計算屬性

1. vue2計算屬性

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

<div id="home">
  <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;
   },
 },

2. vue3 計算屬性

• 首先需要引入,才可以進行使用
• 和methods 最大的區(qū)別就是緩存和不可緩存

 <p>{{count}}</p>

 <p>{{double}}</p>

 <button @click="changeData">+</button>

import { computed } from "vue"

 setup(){
     const count = ref(100);
     const double = computed(()=>{
      return count.value* 2;
    })
    const add = ()=>{
      count.value ++;
    }
    return {
      count,
      double,
      add
    }
  }

一、偵聽器(watch)

1. vue2偵聽器

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

2. vue3偵聽器

• watch(指定監(jiān)聽數(shù)據(jù)) 如果監(jiān)聽reactive屬性,必須使用函數(shù)來指定,監(jiān)聽多個數(shù)據(jù)的話，需要卸載數(shù)組里面
• watchEffect(不指定監(jiān)聽數(shù)據(jù)) 默認(rèn)初始化執(zhí)行一次
• watch和watchEffect都是需要引入的

watch

import { watch } from "vue"

• 普通數(shù)據(jù)類型

 setup() {
    let msg = ref("abc");
    watch(msg, (newVal, oldVal) => {
      console.log(newVal, oldVal);
    });
    return {
      msg,
    };
  }, 

• reactive 數(shù)據(jù)類型,通過函數(shù)來指定

setup() {
    let user = reactive({
      firstName: "zhang",
      lastName: "san",
    });
    watch(() => user.firstName,(newVal,oldVal) => {
      console.log(newVal,oldVal);
    })
    return {
      user,
    };
  }

• 監(jiān)聽多個數(shù)據(jù)需要數(shù)組來指定，watch返回的也是一個數(shù)組

setup() {
    let user = reactive({
      firstName: "zhang",
      lastName: "san",
    });
    watch(
      [() => user.firstName,() => user.lastName],
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      }
    );
    return {
      user,
    };
  },

• 立即執(zhí)行 添加immediate 還有深度監(jiān)聽在immediate后面加上deep:true 就可以
  setup() {
  let user = reactive({
  firstName: "zhang",
  lastName: "san",
  });
  let fullName = ref(""); //在聲明的時候是一個空,如果初始化不執(zhí)行他還是一個空
  watch([() => user.firstName, () => user.lastName], (newVal, oldVal) => {
  fullName.value = newVal[0] +' '+ newVal[1]
  },{
  immediate:true,
  //deep:true
  });
  return {
  user,
  fullName
  };
  },

watchEffect 初始化執(zhí)行一次

• 不用指定監(jiān)聽的普通數(shù)據(jù)類型或者是復(fù)雜數(shù)據(jù)類型,像下面這個案例就是默認(rèn)監(jiān)聽了 user.firstName和user.lastName,個人感覺watchEffect比watch好用點吧

import { watchEffect } from "vue"

watchEffect(() => {
    fullName.value = user.firstName+" "+user.lastName
})