Usage instructions for this.$ and this.$data in Vue

question

I encountered a problem in the project. When resetting component data with this.$(), the props or method obtained by this in data() are undefined. The code is simplified as follows:

export default {
  props: {
    P: Object
  },
  data () {
    return {
      A: {
        a: 
      },
      B: 
    };
  },
  methods: {
    resetData () { // Called during update      (this.$data, this.$()); // There is a problem!  !  !    },
    methodA () {
      // do sth.
    },
    methodB () { // Called through user operations       && (); //  is undefined,  is undefined！！！
    }
  }
}

After calling resetData() and then calling methodB(), the sum is undefined.

solve

In resetData, write this:

resetData () { // Called during update  (this.$data, this.$(this));
}

reason

Related to the initialization of Vue instance. (Source code version 2.6.10)

1. When new Vue is passed, an object is passed, and the object is recorded as options. Vue merges the customized properties in options and the attributes defined in the Vue constructor into vm.$options. This in vm.$() points to vm.$options. MethodA and B are not directly hung under vm.$options, so the sum is undefined.

// Create a vue instanceconst options = {
  customOption: 'foo',
  data () {
    A: 
  },
  methods: {
    methodA () {}
  },
  created: function () {
    (this.$) // => 'foo'
  }
};
new Vue(options);
 
// src/core/instance/
initMixin (Vue: Class<Component>) {
  const vm: Component = this
  // ...
  vm.$options = mergeOptions(
    resolveConstructorOptions(),
    options || {},
    vm
  )
  // ...
}

2. Then map vm.$ to vm._data, so that data can be accessed through vm._data. During the mapping process, this data() is pointed to the current instance vm through call, and the execution result of data() is returned. Because the initialization of props and methods is before data, there are already _props and _methods on the vm at this time, and the sum can be obtained. (See 3 for how to achieve the effect of vm._props.key).

// src/core/instance/
initState (vm: Component) {
  // ...
  const opts = vm.$options
  if () initProps(vm, )
  if () initMethods(vm, )
  if () {
    initData(vm) // Change this by getData(data, vm)  }
  // ...
}
 
getData (data: Function, vm: Component): any {
  // ...
  try {
    return (vm, vm) // Replace this with vm  }
  // ...
}

3. The above maps the attributes to vm._data, and data can be accessed through vm._data.A, and Vue can directly access A through a proxy method.

// src/core/instance/
proxy(vm, `_data`, key);
 
proxy (target: Object, sourceKey: string, key: string) {
   = function proxyGetter () {
    return this[sourceKey][key]
  }
   = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  (target, key, sharedPropertyDefinition)
}

Summarize

If this is used in data() to access props or methods, when resetting $data, pay attention to this pointing of this.$(), and it is best to use this.$(this).

The above description of this.$() and this.$data usage in Vue are all the content I share with you. I hope you can give you a reference and I hope you support me more.