Shulou(Shulou.com)06/03 Report--

What is Vue responsive system, I believe that many inexperienced people do not know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Responsive system (Reactivity systems) is one of the key parts of modern front-end framework. The highly interactive, dynamic and responsive ability of the application system depends on it. Every Web developer should understand the functions and practices of this system.

Principle

The response system is a mechanism that automatically synchronizes the data source (model) with the data representation (view) layer. Each time the model changes, the view is re-rendered.

Take a simple Markdown editor as an example. Typically the editor has two panes: one for writing Markdown code (for modifying the underlying model) and the other for previewing the compiled HTML (showing the updated view). When we write something in the writing pane, it immediately automatically previews in the preview pane. This example is relatively simple and will be much more complicated in practice.

In many cases, the data we want to display depends on other data. In this case, you need to track the relevant data and update the data according to the tracking situation. For example, we have a fullName, which consists of firstName and lastName attributes. When any of its dependencies are modified, fullName automatically re-evaluates and displays the results in the view.

Once you know what a responsive system is, before you understand how the responsive system in Vue 3 works and how it can be used in practice, let's take a quick look at the content of the responsive system in Vue 2 and its considerations.

A brief introduction to the responsive system of Vue 2

Responses in Vue 2 are more or less "hidden". Whatever we put in the data object, Vue makes it implicit (reactive implicitly). This will make the developer's job easier, but it will inevitably reduce flexibility.

Behind the scenes, Vue 2 uses ES5 Object.defineProperty to convert all properties of the data object to getter and setter. For each component instance, Vue creates a dependency watcher instance, and the observer records any attributes that depend on collection / tracking during component rendering. When the property triggers the setter for the dependency, the observer is notified, and the component is re-rendered and the view is updated. But there will be some problems.

Change detection warning

Due to the limitations of the Object.defineProperty method, Vue cannot detect some data changes. These include:

Add attributes to or remove attributes from an object (for example, obj.newKey = value)

Set array items by index (for example, arr [index] = newValue)

Modify the length of the array (for example, arr.length = newLength)

To solve these problems, however, Vue provides the Vue.set API method, which adds a property to the response object to ensure that the new property is also responsive, triggering a view update.

Discuss the situation with the following examples:

Hello! My name is {{person.name}}. Ichimm {{person.age}} years old. Add "age" property

Here are my favorite activities:

{{item}} Edit Clear the activities list el:'# app', data: {person: {name: "David"}, activities: ["Reading books", "Listening music", "Watching TV"]}, methods: {/ / 1. Add a new property to an object addAgeProperty () {this.person.age = 30} / / 2. Setting an array item by index editActivity (index) {const newValue = prompt ('Input a new value') if (newValue) {this.activities [index] = newValue}}, / / 3. Modifying the length of the array clearActivities () {this.activities.length = 0}})

In the above example, we will find that none of these three methods works. We cannot add new properties to the person object, use activities's index to edit items in the array, or modify the length of the activities array.

The optimization is as follows:

El:'# app', data: {person: {name: "David"}, activities: ["Reading books", "Listening music", "Watching TV"]}, methods: {/ / 1. Adding a new property to the object addAgeProperty () {Vue.set (this.person, 'age', 30)} / / 2. Setting an array item by index editActivity (index) {const newValue = prompt ('Input a new value') if (newValue) {Vue.set (this.activities, index, newValue)}, / / 3. Modifying the length of the array clearActivities () {this.activities.splice (0)}})

In this example, we use the Vue.setAPI method to add a new age property to the person object and select / modify a specific item from the active array. In the last case, use the JavaScript built-in splice method.

This is perfectly feasible but slightly clumsy and can lead to code inconsistencies. Vue 3 solves this problem.

Let's continue with the following example:

Data () {return {person: {name: "David"}, activities: ["Reading books", "Listening music", "Watching TV"]}}, methods: {/ / 1. Adding a new property to the object addAgeProperty () {this.person.age = 30} / 2. Setting an array item by index editActivity (index) {const newValue = prompt ('Input a new value') if (newValue) {this.activities [index] = newValue}}, / / 3. Modifying the length of the array clearActivities () {this.activities.length = 0} Vue.createApp (App) .mount (' # app')

You can see that in Vue 3, all methods work properly.

The Vue.observable API method introduced in Vue 2.6 exposes the responsive system to some extent, so that developers can experience the content of the responsive system. In fact, this is exactly the same method used internally by Vue to wrap data objects, and is useful for creating small cross-component state stores in simple scenarios. But there is still no way to compare with Vue3's responsive system, so let's introduce it in detail.

Note: because the Object.defineProperty method is an ES5-only and non-tunable feature, Vue 2 does not support IE8 and below.

How does the Vue 3 responsive system work

To take full advantage of ES6 Proxy and Reflect API, the responsive system in Vue 3 has been completely rewritten. The new version adds responsive API, which makes the system more flexible and powerful than ever before.

Proxy API allows developers to intercept and modify lower-level object operations on the target object. Proxy is the clone/wrapper of objects and provides special features (called target) that respond to specific operations and override the built-in behavior of JavaScript objects (called traps). If you still need to use the default behavior, you can use the corresponding Reflection API, whose name implies a method that reflects Proxy API. Here is an example of how to use these API in Vue 3:

Name: "David", age: 27} Const handler = {get (target, property, receiver) {/ / track (target, property) console.log (property) / / output: name return Reflect.get (target, property, receiver)}, set (target, property, value, receiver) {/ / trigger (target, property) console.log (`${property}: ${value}`) / / output: "age: 30" and "hobby: Programming" return Reflect.set (target, property, value) Receiver)}} let proxy = new Proxy (person, handler) Console.log (person) / / get (reading a property value) console.log (proxy.name) / / output: David / / set (writing to a property) proxy.age = 30; / / set (creating a new property) proxy.hobby = "Programming"; console.log (person)

To create a new proxy, use the new Proxy (target, handler) constructor. It takes two parameters: the target object (person object) and the handler object, which defines which operations (get and set operations) will be intercepted. In the handler object, get and set traps track when properties are read and when properties are modified / added. Set up the console statement to ensure that it runs correctly.

The following parameters are taken in get and set traps:

Target: the target object of the proxy wrapper

Property: attribute name

Value: property value (this parameter is only used for set operation)

Receiver: the object on which to operate (usually a proxy)

The Reflect API method accepts the same parameters as its corresponding proxy method

The track and trigger functions in the comments are specific to Vue and are used to track when attributes are read and when attributes are modified / added.

In the last part of the example, the original person object is output with a console statement. Then use another declaration to read the proxy object of the property name. Next, modify the age property and create a new hobby property. Finally, output the object again to see if it is updated correctly.

This is the complete workflow of the Vue3 responsive system, but it will be much more complicated in practice.

There are also some considerations for using the Vue 3 responsive system:

Only available for browsers that support ES6 +

The response agent is not equal to the original object

After reading the above, have you mastered what is the method of Vue responsive system? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.