How to use computed, watch, watchEffect in Vue3

1. computed

<template>
  姓：<input v-model="person.firstName"><br/><br/>
  名：<input  v-model="person.lastName"><br/><br/>
  <span>全名：{{person.fullname}}</span><br/><br/>
  <span>全名：<input v-model="person.fullname"></span>
</template>

<script>
import {reactive,computed} from &#39;vue&#39;
export default {
  name: &#39;HelloWorld&#39;,
  setup(){
    let person = reactive({
      firstName:"张",
      lastName:"三"
    })
    //computed简写形式，没考虑修改
    /*person.fullname = computed(()=>{
      return person.firstName+"-"+person.lastName;
    })*/
    person.fullname = computed({
      get(){
        return person.firstName+"-"+person.lastName;
      },
      set(value){
        const nameArr = value.split(&#39;-&#39;);
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      }
    })
    return{
      person,
    }
  }
}
</script>

2. watch

• 1. It is consistent with the watch configuration function in Vue2.x

• 2. Two small "pits":

• When monitoring the responsive data defined by reactive: oldValue cannot be obtained correctly, and deep monitoring is forced to open (deep configuration fails)

• When monitoring an attribute in the reactive data defined by reactive: the deep configuration is valid

How to write vu2

<template>
  <h3 id="当前求和为-nbsp-sum-nbsp">当前求和为：{{ sum }}</h3>
  <button @click="sum++">点我sum++</button>
</template>

<script>
import {ref} from &#39;vue&#39;

export default {
  name: &#39;Demo&#39;,
  watch: {
    /*sum(oldValue,newValue){
      console.log("sum发生了变化",oldValue,newValue);
    }*/
    sum: {
      immediate: true,
      deep:true,
      handler(newValue,oldValue) {
        console.log("sum发生了变化", newValue, oldValue);
      }
    }
  },
  setup() {
    let sum = ref(0);

    return {
      sum,
    }
  }
}
</script>

Vue3 writes like this

1. Situation 1: Monitor a responsive data defined by ref

<template>
  <h3 id="当前求和为-nbsp-sum-nbsp">当前求和为：{{ sum }}</h3>
  <button @click="sum++">点我sum++</button>>
</template>
<script>
import {ref, watch} from &#39;vue&#39;
export default {
  name: &#39;Demo&#39;,
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");
    //情况一：监视ref所定义的一个响应式数据
    watch(sum, (newValue, oldValue) => {
      console.log("sum发生了变化", newValue, oldValue);
    })

    return {
      sum
    }
  }
}
</script>

watch can also pass a configuration item, including immediate and other configurations:

watch(sum, (newValue, oldValue) => {
      console.log("sum发生了变化", newValue, oldValue);
    },{immediate:true})

2. Situation 2: When multiple information needs to be monitored at the same time

<template>
  <h3 id="当前求和为-nbsp-sum-nbsp">当前求和为：{{ sum }}</h3>
  <button @click="sum++">点我sum++</button>
  <hr/>
  <h3 id="信息为-nbsp-msg-nbsp">信息为：{{ msg }}</h3>
  <button @click="msg+=&#39;!&#39;">点我sum++</button>
</template>
<script>
import {ref, watch} from &#39;vue&#39;
export default {
  name: &#39;Demo&#39;,
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");

    //情况二：监视ref所定义的多个响应式数据
    watch([sum,msg],(newValue, oldValue) => {
      console.log("sum发生了变化", newValue, oldValue);
    })

    return {
      sum,
      msg
    }
  }
}
</script>

3. Case 3: Monitor a responsive data defined by reactive

<template>
  <h3 id="姓名-nbsp-person-name-nbsp">姓名：{{ person.name }}</h3>
  <h3 id="年龄-nbsp-person-age-nbsp">年龄：{{ person.age }}</h3>
  <h3 id="薪资-nbsp-person-job-j-salary-nbsp-K">薪资：{{ person.job.j1.salary }}K</h3>
  <button @click="person.name+=&#39;~&#39;">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>
<script>
import {reactive, watch} from &#39;vue&#39;

export default {
  name: &#39;Demo&#39;,
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    //情况三：监视reactive所定义的一个响应式数据全部属性
    // 1\注意：无法正确获取oldvalue
    // 2\注意：强制开启了深度监视（deep配置无效）
    watch(person, (newValue, oldValue) => {
      console.log("person发生了变化", newValue, oldValue);
    })

    return {
      person
    }
  }
}
</script>

4. Case 4: Monitor a certain attribute of a responsive data defined by reactive

//情况四：监视reactive所定义的一个响应式数据某个属性
    watch(()=>person.name, (newValue, oldValue) => {
      console.log("person的name发生了变化", newValue, oldValue);
    })

5. Scenario 5: Monitor some attributes of a responsive data defined by reactive

//情况五：监视reactive所定义的一个响应式数据某个属性
    watch([()=>person.name,()=>person.age], (newValue, oldValue) => {
      console.log("person的name或age发生了变化", newValue, oldValue);
    })

6. In special circumstances, to monitor an object attribute in the object, start deep:true

watch(()=>person.job, (newValue, oldValue) => {
	console.log("person的job发生了变化", newValue, oldValue);
},{deep:true})//由于监视的是reactive对象中的某个属性，deep奏效

7. Monitor the object defined by ref Response data requires .value or deep:true

	let person = ref({
      name: "张三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    watch(person.value, (newValue, oldValue) => {
      console.log("person的value发生了变化", newValue, oldValue);
    })
    或
    watch(person, (newValue, oldValue) => {
      console.log("person的value发生了变化", newValue, oldValue);
    },{deep:true})

3. The routine of watchEffect

watch is: specify both the monitored attributes and The routine of monitoring callback

watchEffect is: you don’t need to specify which property to monitor, which property is used in the monitoring callback, then monitor which property

watchEffect is a bit like computed:

. But computed focuses on the calculated value (the return value of the callback function), so the return value

must be written. And watchEffect pays more attention to the process (the function body of the callback function), so there is no need to write the return value

//watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调
watchEffect(()=>{
	const xl = sum.value
	const x2 = person.age
	console.log( "watchEffect配置的回调执行了")
})

For example, use the above example:

import {reactive,watchEffect} from 'vue'
export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    watchEffect(()=>{
      const x1 = person.name;
      console.log("watchEffect所指定的回调执行了"+x1);
    })
    return {
      person
    }
  }
}
</script>

Finally, we use watch and watchEffect to implement the name example

<template>
  姓：<input v-model="person.firstName">
  名：<input  v-model="person.lastName">
  <span>全名：{{fullName}}</span>
  <span>全名：<input v-model="fullName"></span>
</template>
<script lang="ts">
import {defineComponent, reactive, ref,watch,watchEffect} from &#39;vue&#39;;
export default defineComponent({
  setup(){
    let person = reactive({
      firstName:"张",
      lastName:"三"
    });

    const fullName = ref(&#39;&#39;);

    watch(person,({firstName,lastName})=>{
      fullName.value = firstName+"-"+lastName
    },{immediate:true})

    //不用使用immediate，默认执行一次
    /*watchEffect(()=>{
      fullName.value = person.firstName+"-"+person.lastName
    })*/

    watchEffect(()=>{
      const name = fullName.value.split(&#39;-&#39;);
      person.firstName = name[0];
      person.lastName = name[1];
    })
    return{
      person,
      fullName
    }
  }
});
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

The above is the detailed content of How to use computed, watch, watchEffect in Vue3. For more information, please follow other related articles on the PHP Chinese website!