Responsive understanding of Vue data

Responsive: an object that can turn over in response to an external stimulus is responsive

In Vue, if YOU change the value of a property in data, you see a change in the interface, change the data, the interface responds to me, and that’s data responsiveness.

Vue2 implements data responsiveness with Object.defineProperty. For each property, add getter setters to monitor data reads and writes and update the UI when the data changes. Use a proxy to avoid changes to the original data that Vue is unaware of (example 1). By modifying the original data, the key value becomes a getter setter, preventing the data from being tampered with without knowing it.

Example 1: Shows the proxy briefly. See implementing proxy and raw data monitoring below for details

const vm = proxy({
  data: {
    name: "wsl",}});function proxy({ data }) {
  // const _data = Object.assign(data);

  // No reference to metadata is available by returning obj
  let obj = {};
  Object.defineProperty(obj, "name", {
    get() {
      return data["name"];
    },
    set(name) {
      data["name"] = name; }});return obj;
}
Copy the code

Object.defineProperty

So let’s understand the concept of a getter setter

getter setter

Getter: Access a property that returns a dynamically computed value, or you may need to reflect the state of an internal variable without using an explicit method call (directly obj.xxx instead of obj.xxx()).

Setter: If you try to change the value of a property, the corresponding setter will be executed. (use obj.xxx=’ XXX ‘instead of obj.setxxx (” XXX “))

Setters are often linked to getters to create a pseudo-property.

const obj = {
  log: ["example"."test"].get latest() {
    if (this.log.length == 0) return undefined;
    return this.log[this.log.length - 1];
  },
  set latest(name) {
    this.log.push(name); }};console.log(obj.latest); // "test".
obj.latest = "FA";
console.log(obj.log); // ["example", "test", "FA"]
console.log(obj.latest); //"FA"
Copy the code

You cannot have a setter on a property that has a real value.

const obj1 = {
  name: "wsl".get name() {
    return this.name
  }
  set name(n) {
    this.name = n
  }
};
// Uncaught SyntaxError: Unexpected token 'set'
Copy the code

Define Setters and Getters with Object.defineProperty

var o = {}; // Create a new object
var bValue = 38;
Object.defineProperty(o, "b", {
  get() {
    // this.b cannot be used
    return bValue + "= = =";
  },
  set(newValue){ bValue = newValue; }});console.log(o.b); / / 38 = = =
Copy the code

Implement proxy and raw data monitoring

let data = {
  name: "wsl".age: "18".gender: "Male"};let proxyData = proxy({ data });

function proxy({ data }) {
  const _data = Object.assign({}, data);

  // Change all key values of the original object to getter setters, which listen for changes to the original data
  Object.keys(data).forEach((key) = > {
    Object.defineProperty(data, key, {
      get() {
        // TODO something
        console.log("Listen for the original object get");
        return _data[key];
      },
      set(value) {
        // TODO something
        console.log("Listen on the original object set"); _data[key] = value; }}); });let obj = {};

  Object.keys(data).forEach((key) = > {
    Object.defineProperty(obj, key, {
      get() {
        // TODO something
        console.log("Listen proxy object GET");

        return _data[key];
      },
      set(value) {
        // TODO something
        console.log("Listen proxy object set"); _data[key] = value; }}); });return obj;
}
console.log("proxyData");
console.log(data.name); // Listen on the original object get WSL
console.log(proxyData.age); // Listen to the proxy object get 18
data.name = "w"; // Listen on the original object set
proxyData.age = "19"; // Listen on the proxy object set

console.log("proxyData");
console.log(data.name); // Listen on the original object get w
console.log(proxyData.age); // Listen on the proxy object get 19
Copy the code