A brief analysis of the principle of responsive formula in Vue2/Vue3

1. Introduction

When talking about the responsive principles of Vue 2 and Vue 3, we mainly focus on the mechanism of their data bidirectional binding. Data bidirectional binding means that when the data changes, the view will be automatically updated; conversely, when the view changes, the data will be updated accordingly. This feature allows us to process data and user interface more efficiently in front-end development.

2. The principle of vue2 responsiveness

1. Example of the responsive principle of Vue 2

Responsive principle of Vue 2: Vue 2 is used to implement responsiveness. In Vue 2, when we create a Vue instance, it will iterate over all the properties in the data options and convert them to getters and setters using it. This way, whenever we read or modify properties in data, Vue can capture this operation and trigger updates to the view.

For example, suppose we have the following Vue 2 example:

<div >
  <p>{{ message }}</p>
  <button @click="changeMessage">Change Message</button>
</div>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue 2!'
    },
    methods: {
      changeMessage() {
         = 'Hello, World!';
      }
    }
  });
</script>

In this example, we define a message property in the data option, and then use {{ message }} in the view to display the value of this property. When the button is clicked, the changeMessage method will be called, changing the value of the message attribute to 'Hello, World!'. Since the message attribute has been hijacked by Vue, it triggers the corresponding setter, thus notifying the view for updates.

2. Responsive principle of vue2 handwriting simple version

Code demo section:

// Simplified version of the observer classclass SimpleWatcher {
  constructor(vm, key, updateFn) {
     = vm;
     = key;
     = updateFn;
    // Simulate Vue's dependency collection here     = this;
    [];
     = null;
  }
  // Methods that trigger when dependency update  update() {
    (, []);
  }
}
// Simplified version of dependency management classclass SimpleDep {
  constructor() {
     = [];
  }
  // Add observer  addSubscriber(subscriber) {
    (subscriber);
  }
  // Notify observers to update  notify() {
    ((subscriber) => ());
  }
}
// Simplified version of Vue responsive classclass SimpleVue {
  constructor(data) {
    this._data = data;
    this._proxyData(data);
  }
  // Convert data objects to getters and setters  _proxyData(data) {
    for (let key in data) {
      if ((data, key)) {
        const dep = new SimpleDep();
        (data, key, {
          get: () => {
            if () {
              ();
            }
            return data['_'+key];
          },
          set: (newValue) => {
            data['_'+key] = newValue;
            ();
          },
        });
      }
    }
  }
}
// Dep class, used to simplify dependency collectionclass Dep {
  static target = null;
}

use:

// Use exampleconst data = {
  message: 'Hello, Vue!'
};
const vm = new SimpleVue(data);
// Add observernew SimpleWatcher(vm, 'message', (value) => {
  ('Data updated:', value);
});
// Modify data and trigger update = 'Hello, World!';

3. The principle of vue3 responsiveness

The principle of responsiveness of the simple version of handwritten: Now, let’s handwritten a simple version of Vue responsive system step by step. We will use JavaScript's Proxy object to implement it. Proxy is a new feature introduced by ES6. It can intercept operations on objects, including reading, setting, etc., and is very suitable for implementing responsiveness.

<div >
  <p>{{ message }}</p>
  <button onclick="changeMessage()">Change Message</button>
</div>
<script>
  function reactive(data) {
    return new Proxy(data, {
      get(target, key) {
        ('Read data', key);
        return target[key];
      },
      set(target, key, value) {
        ('Update data', key, value);
        target[key] = value;
        updateView(); // After data is updated, manually update the view        return true;
      }
    });
  }
  function updateView() {
    const messageElement = ('p');
     = ;
  }
  const data = {
    message: 'Hello, Simple Vue!'
  };
  const app = reactive(data);
  function changeMessage() {
     = 'Hello, World!';
  }
  // After the page is loaded, manually update the view  updateView();
</script>

Here we use the reactive function to convert the data object into a reactive object. Then we use the Proxy object to intercept this responsive object, realizing the listening of the properties and setting operations. When the data changes, we manually call the updateView function to update the view.

4. Summary

Comparison of the principles of responsiveness of Vue 2 and vue 3: Although the principles of responsiveness of our handwritten are not as complex and perfect as the implementation of Vue 2, the basic ideas are consistent. Vue 2 uses the read and set operations of intercepting properties, and we use Proxy to achieve the same effect. Vue 2 and our simple version of responsive principles both take advantage of the features of JavaScript to achieve the effect of two-way data binding. The implementation of Vue 2 is more complete, supporting more features and optimizations.

This is the end of this article about a brief analysis of the principle of responsiveness in Vue2/Vue3. For more related Vue responsiveness content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!