This is the 21st day of my participation in Gwen Challenge

1. Watch and watchEffect

Watch can listen on one or more responsive data. Once the data changes, it automatically executes the listening callback. If you listen on properties in the Rective object, it must be specified by function; if you listen on multiple data, it needs to be specified by array. If immediate is not true, you can specify the initial execution immediately. If deep is true, you can specify the depth listening.

Watch (prop, (newValue, oldValue) => {}) listens for new and old properties

<template>
  <div>
      {{name}} <button @click="setName">Change the name</button>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,watch } from 'vue';

export default defineComponent({
  name: ' '.setup() {
      let name =ref('Joe') 
      let setName = () = > {
          name.value = 'bill'
      }
      watch(name, (newValue,oldValue) = >{
        console.log(newValue,oldValue);
      })
      return {
          name,
          setName,
      }
  }
});
</script>

<style scoped>

</style>
Copy the code

If it’s an application object, it listens for a property in the object

 {{province}}  {{city}} <button @click="setArea"</button> <br>let area = reactive({
        province: 'in guangdong'.city: 'shenzhen'
      }) 
      let setArea = () = > {
        area.province = 'in hunan province'
        area.city = 'the changsha'
      }
      // Watch refers to an attribute in the type
      watch(() = >area.province,(newValue,oldValue) = > {
        console.log(newValue,oldValue);
      })
      return{ name, setName, ... toRefs(area), setArea }Copy the code

If you want to listen for more than one property, pass it in as an array

WatchEffect’s third argument, listen immediately upon initialization, and deep listen

Second, the watchEffect

Instead of specifying what data to listen for directly, watchEffect listens for reactive data that is used in the callback function, and executes the first time by default.

The complete code

<template>
  <div>
    {{ name }} <button @click="setName">Change the name</button> <br />
    {{ province }} {{ city }} <button @click="setArea">Change the city</button> <br />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, reactive, toRefs , watchEffect } from "vue";

export default defineComponent({
  name: "".setup() {
    let name = ref("Zhang");
    let setName = () = > {
      name.value = "Bill";
    };
    watch(name, (newValue, oldValue) = > {
      console.log(newValue, oldValue);
    });
    let area = reactive({
      province: "Guangdong".city: "Shenzhen"});let setArea = () = > {
      area.province = "Hunan";
      area.city = "Changsha";
    };
    // Watch refers to an attribute in the type
    // watch(()=>area.province,(newValue,oldValue) => {
    // console.log(newValue,oldValue);
    // })

    // Listen for multiple attributes
    // watch([() => area.province, () => area.city], (newValue, oldValue) => {
    // console.log(newValue, oldValue);
    // });

    // Now monitor and deep monitor
    // watch([() => area.province, () => area.city], (newValue, oldValue) => {
    // console.log(newValue, oldValue);
    / /}, {
    // immediate: true,
    // deep: true
    / /});

    // watchEffect uses that property to listen for that property
    watchEffect(() = > {
      console.log(area.province,area.city,name.value);
      
    })

    return{ name, setName, ... toRefs(area), setArea, }; }});</script>

<style scoped>
</style>
Copy the code