vue3 object properties change

With the official release of Vue3, developers can’t wait to try out the new features and improvements brought by the new version. One of the most noticeable changes is the change in object properties. In Vue2, if we want to monitor changes in object properties, we need to use deep observation or use $watch to manually monitor property changes. However, in Vue3, this problem has been solved.

Vue3 provides an automatic monitoring and response mechanism for changes in object properties by using Proxy objects. This means that we can operate objects in Vue3 just like normal JavaScript objects, and can automatically trigger updates to the view.

Let's take a look at the specific implementation details.

First, suppose we have a Vue3 component that contains a state object internally, and we want to listen to changes in the object's properties. We can define this object and assign it to the state of the component:

<template>
  <div>
    <p>属性A: {{ obj.A }}</p>
    <p>属性B: {{ obj.B }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        A: '初始值A',
        B: '初始值B'
      }
    }
  }
}
</script>

In Vue2, if we want to monitor changes in the object's properties, we need to use $watch or $watchEffect to manually monitor each property. Variety. For example:

this.$watch('obj.A', (newValue, oldValue) => {
  console.log(`属性A发生了变化：${oldValue} => ${newValue}`)
})

In Vue3, we can use the Proxy object to listen to all property changes of the target object without writing $watch or $watchEffect:

<script>
export default {
  data() {
    return {
      obj: {
        A: '初始值A',
        B: '初始值B'
      }
    }
  },
  created() {
    this.obj = new Proxy(this.obj, {
      set(target, key, value, receiver) {
        // 触发视图更新
        return Reflect.set(target, key, value, receiver)
      }
    })
  }
}
</script>

When we create the component, we set the state Objects are wrapped into Proxy objects. When we modify the object's properties, the Proxy object automatically triggers an update of the view.

The set function of the Proxy object will be automatically called when the object properties are modified. At this point, we can add our own logic in the set function, such as printing out property changes or notifying other components. However, you must ensure that the Reflect.set(target, key, value, receiver) statement is returned at the end, so that the control flow will return to the Vue update mechanism and the view will be updated correctly.

The above example is just a simple demonstration. Vue3's Proxy object implements more features and options for more flexible object property monitoring, including custom getters and setters, verifying property permissions, etc. Interested developers can refer to the official documentation of Vue3 for in-depth study.

In short, Vue3's Proxy object allows us to operate objects inside components more naturally, while also reducing the amount of cumbersome code for manually monitoring property changes. This brings a more efficient and convenient experience to our development.

The above is the detailed content of vue3 object properties change. For more information, please follow other related articles on the PHP Chinese website!