Let’s talk about how to use watch and computed in vue3

This article will help you learn vue3 and talk in depth about the use of computed properties and listener watch. I hope it will be helpful to everyone!

1. watch

1. Detecting reactive internal data

<template>
  <p>{{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = &#39;面条&#39;">click</button>
</template>

<script>
  import { watch, reactive } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;ifer&#39;,
              hobby: {
                  eat: &#39;西瓜&#39;,
              },
          })
          watch(obj, (newValue, oldValue) => {
              // 注意1：监听对象的时候，新旧值是相等的
              // 注意2：强制开启深度监听，配置无效
              console.log(&#39;触发监听&#39;);
              console.log(newValue === oldValue) // true
          })

          return { obj }
      },
  }
</script>

Note: Modifications to reactive itself will not trigger monitoring. [Related recommendations: vuejs video tutorial, web front-end development]

<template>
    <p>{{ obj.hobby.eat }}</p>
    <button @click="obj.hobby = { eat: &#39;面条&#39; }">click</button>
</template>

<script>
    import { watch, reactive } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const obj = reactive({
                name: &#39;ifer&#39;,
                hobby: {
                    eat: &#39;西瓜&#39;,
                },
            })
            watch(obj.hobby, (newValue, oldValue) => {
                // obj.hobby = { eat: &#39;面条&#39; }
                console.log(&#39;对 reactive 自身的修改不会触发监听&#39;)
            })
            return { obj }
        },
    }
</script>

Be careful not to modify reactive itself , the modification itself does not trigger

2. Monitor ref data

• 2.1 Monitor a ref Data

<template>
  <p>{{ age }}</p>
  <button @click="age++">click</button>
</template>

<script>
  import { watch, ref } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const age = ref(18)
          // 监听 ref 数据 age，会触发后面的回调，不需要 .value
          watch(age, (newValue, oldValue) => {
              console.log(newValue, oldValue)
          })

          return { age }
      },
  }
</script>

• 2.2 Monitor multiple ref data

You can monitor changes in age and num at the same time in the form of an array.

<template>
    <p>age: {{ age }} num: {{ num }}</p>
    <button @click="handleClick">click</button>
</template>

<script>
    import { watch, ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const age = ref(18)
            const num = ref(0)

            const handleClick = () => {
                age.value++
                num.value++
            }
            // 数组里面是 ref 数据
            watch([age, num], (newValue, oldValue) => {
                console.log(newValue, oldValue)
            })

            return { age, num, handleClick }
        },
    }
</script>

Trigger the listening attribute immediately:

                {
                    immediate: true,
                }

<template>
    <p>{{ age }}</p>
    <button @click="handleClick">click</button>
</template>

<script>
    import { watch, ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const age = ref(18)

            const handleClick = () => {
                age.value++
            }

            watch(
                age,
                (newValue, oldValue) => {
                    console.log(newValue, oldValue) // 18 undefined
                },
                {
                    immediate: true,
                }
            )

            return { age, handleClick }
        },
    }
</script>

Turn on Deep monitoring of ref data

? 问题：修改 ref 对象里面的数据并不会触发监听，说明 ref 并不是默认开启 deep 的。见下

<template>
    <p>{{ obj.hobby.eat }}</p>
    <button @click="obj.hobby.eat = &#39;面条&#39;">修改 obj.hobby.eat</button>
</template>

<script>
    import { watch, ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const obj = ref({
                hobby: {
                    eat: &#39;西瓜&#39;,
                },
            })
            // 注意：ref 监听对象，默认监听的是这个对象地址的变化
            watch(obj, (newValue, oldValue) => {
                console.log(newValue === oldValue)
            })

            return { obj }
        },
    }
</script>

Faced with such a situation where the watch is not triggered, we have three solutions:

• Solution 1: Of course, directly modify the entire object It will definitely be monitored (note that the modification of obj in the template is equivalent to modifying obj.value).
  -`

  {{ obj.hobby.eat }}

`

##Solution 2 : Enable deep monitoring of ref data.

• watch(
      obj,
      (newValue, oldValue) => {
          console.log(newValue, oldValue)
          console.log(newValue === oldValue)
      },
      {
          deep: true,
      }
  )

Just add a sentence, so there is no screenshot

Solution 3: You can also achieve the same effect by monitoring ref.value.

Because if the object is wrapped inside ref, it is actually implemented with reactive, which can be proved through the isReactive method.

<template>
    <p>{{ obj.hobby.eat }}</p>
    <button @click="obj.hobby.eat = &#39;面条&#39;">修改 obj</button>
</template>

<script>
    import { watch, ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const obj = ref({
                hobby: {
                    eat: &#39;西瓜&#39;,
                },
            })
            watch(obj.value, (newValue, oldValue) => {
                console.log(newValue, oldValue)
                console.log(newValue === oldValue)
            })

            return { obj }
        },
    }
</script>

Monitoring common data
• Monitoring a common attribute value in the responsive object must be done by returning the function (if returned It is an object/responsive object, and deep monitoring needs to be turned on to modify the internal data).
  

<template>
    <p>{{ obj.hobby.eat }}</p>
    <button @click="obj.hobby.eat = &#39;面条&#39;">修改 obj</button>
</template>

<script>
    import { watch, reactive } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const obj = reactive({
                hobby: {
                    eat: &#39;西瓜&#39;,
                },
            })
            // 把 obj.hobby 作为普通值去进行监听，只能监听到 obj.hobby 自身的变化
            /* watch(
      () => obj.hobby,
      (newValue, oldValue) => {
        console.log(newValue, oldValue)
        console.log(newValue === oldValue)
      }
    ) */
            // 如果开启了深度监听，则能监听到 obj.hobby 和内部数据的所有变化
            /* watch(
      () => obj.hobby,
      (newValue, oldValue) => {
        console.log(newValue, oldValue)
        console.log(newValue === oldValue)
      },
      {
        deep: true,
      }
    ) */
            // 能监听影响到 obj.hobby.eat 变化的操作，例如 obj.hobby = { eat: &#39;面条&#39; } 或 obj.hobby.eat = &#39;面条&#39;，如果是 reactive 直接对 obj 的修改则不会被监听到（ref 可以）
            watch(
                () => obj.hobby.eat,
                (newValue, oldValue) => {
                    console.log(newValue, oldValue)
                    console.log(newValue === oldValue)
                }
            )
            return { obj }
        },
    }
</script>

2. computed

Function: The computed function is used to define computed properties. The above basic concepts are the same as vue2 Yes, you can move on to the definitions of these two knowledge points in vue2:

[vue2] Usage of calculation and listening.

<template>
  <p>firstName: {{ person.firstName }}</p>
  <p>lastName: {{ person.lastName }}</p>
  <input type="text" v-model="person.fullName" />
</template>
<script>
  import { computed, reactive } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const person = reactive({
              firstName: &#39;初&#39;,
              lastName: &#39;映&#39;,
          })
          // 也可以传入对象，目前和上面等价
          person.fullName = computed({
              get() {
                  return person.firstName + &#39;*&#39; + person.lastName
              },
              set(value) {
                console.log(value,&#39;value&#39;);//为上述get的返回值
                  const newArr = value.split(&#39;*&#39;)
                  person.firstName = newArr[0]
                  person.lastName = newArr[1]
              },
          })
          return {
              person,
          }
      },
  }
</script>

(Learning video sharing:

vuejs introductory tutorial, Basic programming video)

The above is the detailed content of Let’s talk about how to use watch and computed in vue3. For more information, please follow other related articles on the PHP Chinese website!