Vue3中watch的使用詳解

更新時(shí)間：2022年11月12日 16:26:45 作者：周圍都是小趴菜

這篇文章主要介紹了Vue3中watch的詳解,主要包括Vue2使用watch及Vue3使用watch的方法，通過(guò)多種情況實(shí)例代碼相結(jié)合給大家詳細(xì)講解，需要的朋友可以參考下

Vue3中watch的詳解

Vue2使用watch

<template>
  <div>總合：{{ sum }}<button @click="sum++">點(diǎn)擊累加</button></div>
</template>
<script>
import { ref } from "vue";
export default {
  // vue2中使用watch
  watch: {
    sum: {
      deep: true,
      handler(newValue, oldValue) {
        console.log("總合 sum 變化：", newValue, oldValue);
      },
    },
  },
  setup() {
    let sum = ref(0);
    return {
      sum,
    };
  },
};
</script>

<style>
</style>

Vue3使用watch

watch有三個(gè)參數(shù)：
參數(shù)1：監(jiān)聽(tīng)的參數(shù)
參數(shù)2：監(jiān)聽(tīng)的回調(diào)函數(shù)
參數(shù)3：監(jiān)聽(tīng)的配置（immediate）

情況1

監(jiān)視r(shí)ef所定義的一個(gè)響應(yīng)式數(shù)據(jù)

<template>
  <div>總合：{{ sum }}<button @click="sum++">點(diǎn)擊累加</button></div>
</template>

// 監(jiān)視r(shí)ef所定義的一個(gè)響應(yīng)式數(shù)據(jù)
<script>
import { ref, watch } from "vue";
export default {
  setup() {
    let sum = ref(0);
    // 監(jiān)視r(shí)ef所定義的一個(gè)響應(yīng)式數(shù)據(jù)
    watch(sum, (newValue, oldValue) => {
      console.log("sum ==> ", newValue, oldValue);
    });
    return {
      sum,
    };
  },
};
</script>

在這里插入圖片描述

情況2

監(jiān)視r(shí)ef所定義的多個(gè)響應(yīng)式數(shù)據(jù)

<template>
  <div>總合：{{ sum }}<button @click="sum++">點(diǎn)擊累加</button></div>
  <hr />
  <div>
    msg：{{ msg }}
    <button @click="msg += '~'">改變msg</button>
  </div>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    let sum = ref(0);
    let msg = ref("watch使用"):
    // 情況2：監(jiān)視r(shí)ef所定義的多個(gè)響應(yīng)式數(shù)據(jù)
    watch([sum, msg], (newValue, oldValue) => {
      console.log("sum/msg ==> ", newValue, oldValue);
    },{immediate:true});
    return {
      sum,
      msg,
    };
  },
};
</script>

在這里插入圖片描述

情況3

監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)
注意：

這里無(wú)法正確獲取oldValue
強(qiáng)制開(kāi)啟了深度監(jiān)聽(tīng)（deep配置不生效）

<template>
  <div>
     <h3>情況3：:監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)</h3>
      <div>姓名：{{person.name}}</div>
      <div>年齡：{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年齡</button>
  </div>
 </template>

<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
        // 情況3、監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)
    /* 
      若watch監(jiān)視的是reactive定義的響應(yīng)式數(shù)據(jù)，則無(wú)法正確獲得oldvalue! 
      若watch監(jiān)視的是reactive定義的響應(yīng)式數(shù)據(jù)，則強(qiáng)制開(kāi)啟了深度監(jiān)視
    */
    watch(person,(newValue, oldValue) => {
        console.log("person ==> ", newValue, oldValue);
      },{immediate:true,deep:false}//這里的deep配置不再奏效
    );
    return {
      person,
    };
  },
};
</script>

情況4

監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某個(gè)屬性

<template>
  <div>
     <h3>情況4：:監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某個(gè)屬性</h3>
      <div>姓名：{{person.name}}</div>
      <div>年齡：{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年齡</button>
  </div>
 </template>

<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 情況4、監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某個(gè)屬性
    watch(()=>person.name,(newValue, oldValue) => {
        console.log("person.name ==> ", newValue, oldValue);
      });

    return {
      person,
    };
  },
};
</script>

在這里插入圖片描述

情況5

監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某些屬性

<template>
  <div>
     <h3>情況4：:監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某個(gè)屬性</h3>
      <div>姓名：{{person.name}}</div>
      <div>年齡：{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年齡</button>
  </div>
 </template>

<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 情況5、監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某些屬性
    watch([()=>person.name,()=>person.age],(newValue, oldValue) => {
        console.log("person.name/person.age ==> ", newValue, oldValue);
    });
    return {
      person,
    };
  },
};
</script>

在這里插入圖片描述

特殊情況

watch監(jiān)聽(tīng)reactive中對(duì)象的嵌套對(duì)象

<template>
  <div>
      <div>姓名：{{person.name}}</div>
      <div>年齡：{{person.age}}</div>
      <div>薪資：{{person.job.joblist.money}} K</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年齡</button>
    <button @click="person.job.joblist.money ++">提薪</button>
  </div>
 </template>

<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 特殊情況、監(jiān)視r(shí)eactive所定義嵌套對(duì)象
    watch(()=>person.job,(newValue, oldValue) => {
        console.log("person.job對(duì)象發(fā)生變化 ==> ", newValue, oldValue);
    },{deep:true});//此處由于監(jiān)視的是reactive素定義的對(duì)象中的某個(gè)屬性，所以deep配置有效

    return {
      person,
    };
  },
};
</script>

到此這篇關(guān)于Vue3中watch的詳解的文章就介紹到這了,更多相關(guān)Vue3 watch內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: