How to use watch and computed in vue3

1. watch

1. Detect 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: on reactive itself Modification 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 sure to note that reactive itself cannot be modified, and the modification itself will 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 Monitoring 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 Modifying the entire object 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 listen to ref.value to achieve the same effect.

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 returned by the function (If an object/responsive object is returned, deep monitoring needs to be enabled 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: computed function is used to define calculated properties. The above basic concepts are the same as vue2. About 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>

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