1.vue3contrastvue2Lifecycle hook functions:

2.vue3In thewatch:

<template>
  <p>{{count}}</p>
  <p>{{double}}</p>
  <button @click="increase">👍</button>
  <p>{{greeting}}</p>
  <button @click="greetingValue">UpdateGreeting</button>
</template>

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

interface DataProps {
  count:number;
  double:number;
  increase:() = > void;
}
export default defineComponent({
  name: 'App'.setup(){
    const data:DataProps = reactive({
      count:0.increase:() = >{
        data.count++;
      },
      double:computed(() = >{
        return data.count * 2})})const refData = toRefs(data);
    const greeting = ref("");
    const greetingValue = () = >{
      greeting.value += "Go~!";
    }
    // Use watch to listen
    watch([greeting,data],(newVal,oldVal) = >{
      document.title = "updated" + greeting.value + data.count;
    })
    return {
      ...refData,greeting,greetingValue
    }
  }
});
</script>
Copy the code

watchHow to use:

  • The first: listeningrefSimple data types created:
 watch(greeting,(newVal,oldVal) = >{
      document.title = "updated" + greeting.value
 }
Copy the code
  • The second kind: monitorreactiveA value in the created data:
    watch([greeting,data],(newVal,oldVal) = >{
      console.log(newVal);
      console.log(oldVal)
      document.title = "updated" + greeting.value + data.count;
    })
Copy the code

Listen on data directly with the following code, the console will appear:

How do I listen for data.count?

  • throughArrow function, returns a needwatchthefieldAnd here is thedata.count
    watch([greeting,() = >data.count],(newVal,oldVal) = >{
      console.log(newVal);
      console.log(oldVal);
      document.title = "updated" + greeting.value + data.count;
    })
Copy the code

The result of listening is no longer a proxy, but a value of 0,2,1,3,2,4,3….