Lassen Sie uns über das Zeigeproblem in vue2.x sprechen. Warum zeigt es auf die Vue-Instanz?

In diesem Artikel geht es um das Zeigeproblem in vue2.x und es wird erläutert, warum dies auf die vue-Instanz verweist. Ich hoffe, dass es für alle hilfreich ist!

In der exemplarischen Vorgehensweise zum Gruppencode habe ich versehentlich erwähnt, warum dies direkt auf die Werte in Daten, Methoden, Requisiten und Berechnungen angewendet werden kann. Dann hatte jeder einige Vermutungen, aber es gab keine klare Antwort Schauen Sie sich dieses Problem an. Nachdem ich den Quellcode von Vue verstanden habe, werde ich einen Artikel schreiben, um ihn aufzuzeichnen.

Stellen Sie eine Frage

Normalerweise wird Vue-Code entwickelt und fast immer so geschrieben

export default {
    data() {
        return {
            name: '彭鱼宴'
        }
    },
    methods: {
        greet() {
            console.log(`hello, 我是${this.name}`)
        }
    }
}

Warum kann this.name hier direkt auf den in Daten definierten Namen zugreifen, oder this.someFn kann direkt auf Methoden zugreifen Wie bei der definierten Funktion Mit dieser Frage im Hinterkopf begann ich, den Quellcode von vue2.x zu durchsuchen, um die Antwort zu finden.

Quellcode-Analyse

Hier ist die Quellcodeadresse von Vuevue-Quellcode. Werfen wir zunächst einen Blick auf den Konstruktor der Vue-Instanz. Der Konstruktor befindet sich im Quellcodeverzeichnis /vue/src/core/instance/index.js. Es gibt nicht viel Code für einen Blick Der Konstruktor ist sehr einfach: if (!(diese Instanz von Vue)){} Bestimmen Sie, ob das Schlüsselwort new zum Aufrufen des Konstruktors verwendet wird. Andernfalls wird eine Warnung ausgegeben . Hier ist diesBezieht sich auf eine Instanz von Vue. Wenn das Schlüsselwort new normal verwendet wird, verwenden Sie einfach die Funktion _init. Ist das nicht sehr einfach?

if (!(this instanceof Vue)){} 判断是不是用了 new 关键词调用构造函数，没有则抛出warning，这里的this指的是Vue的一个实例。如果正常使用了new关键词，就走_init函数，是不是很简单。

_init函数分析

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

_init函数有点长，做了很多事情，这里就不一一解读，和我们此次探索相关的内容应该在initState(vm)这个函数中，我们继续到initState这个函数里看看。

initState函数分析

let uid = 0

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== &#39;production&#39; && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== &#39;production&#39;) {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, &#39;beforeCreate&#39;)
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, &#39;created&#39;)

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== &#39;production&#39; && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

可以看出initState做了5件事情

• 初始化props
• 初始化methods
• 初始化data
• 初始化computed
• 初始化watch

我们先重点看看初始化methods做了什么

initMethods 初始化方法

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

initMethods主要是一些判断：

function initMethods (vm, methods) {
    var props = vm.$options.props;
    for (var key in methods) {
      {
        if (typeof methods[key] !== 'function') {
          warn(
            "Method \"" + key + "\" has type \"" + (typeof methods[key]) + "\" in the component definition. " +
            "Did you reference the function correctly?",
            vm
          );
        }
        if (props && hasOwn(props, key)) {
          warn(
            ("Method \"" + key + "\" has already been defined as a prop."),
            vm
          );
        }
        if ((key in vm) && isReserved(key)) {
          warn(
            "Method \"" + key + "\" conflicts with an existing Vue instance method. " +
            "Avoid defining component methods that start with _ or $."
          );
        }
      }
      vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
    }
}

除去上述说的这些判断，最重要的就是在vue实例上定义了一遍methods里所有的方法，并且使用bind函数将函数的this指向Vue实例上，就是我们new Vue()的实例对象上。

这就解释了为啥this可以直接访问到methods里的方法。

initData 初始化数据

判断methods中定义的函数是不是函数，不是函数就抛warning；
判断methods中定义的函数名是否与props冲突，冲突抛warning；
判断methods中定义的函数名是否与已经定义在Vue实例上的函数相冲突，冲突的话就建议开发者用_或者$开头命名；

initdata做了哪些事情呢：

• 先在实例 _data 上赋值，getData函数处理 data 这个 function，返回的是一个对象
• 判断最终获取到的 data， 不是对象给出警告。
• 判断methods里的函数和data里的key是否有冲突
• 判断props和data里的key是否有冲突
• 判断是不是内部私有的保留属性，若不是就做一层代理，代理到 _data 上
• 最后监听data，使之成为响应式数据

再看下proxy函数做了什么：

function initData (vm) {
    var data = vm.$options.data;
    data = vm._data = typeof data === 'function'
      ? getData(data, vm)
      : data || {};
    if (!isPlainObject(data)) {
      data = {};
      warn(
        'data functions should return an object:\n' +
        'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
        vm
      );
    }
    // proxy data on instance
    var keys = Object.keys(data);
    var props = vm.$options.props;
    var methods = vm.$options.methods;
    var i = keys.length;
    while (i--) {
      var key = keys[i];
      {
        if (methods && hasOwn(methods, key)) {
          warn(
            ("Method \"" + key + "\" has already been defined as a data property."),
            vm
          );
        }
      }
      if (props && hasOwn(props, key)) {
        warn(
          "The data property \"" + key + "\" is already declared as a prop. " +
          "Use prop default value instead.",
          vm
        );
      } else if (!isReserved(key)) {
        proxy(vm, "_data", key);
      }
    }
    // observe data
    observe(data, true /* asRootData */);
}

其实这里的Object.defineProperty就是用来定义对象的

proxy的用处就是使this.name指向this._data.name

剩下的observe函数不在此次探讨范围，感兴趣的朋友可以自己去看看源码。

总结

回到一开始抛出的问题做一个解答：

• methods里的方法通过 bind 指定了this为 new Vue的实例(vm)，methods里的函数也都定义在vm上了，所以可以直接通过this直接访问到methods里面的函数。

• data函数返回的数据对象也都存储在了new Vue的实例(vm)上的_data上了，访问 this.name时实际访问的是Object.defineProperty代理后的 this._data.name_init-Funktionsanalyse

function noop (a, b, c) {}
var sharedPropertyDefinition = {
    enumerable: true,
    configurable: true,
    get: noop,
    set: noop
};

function proxy (target, sourceKey, key) {
    sharedPropertyDefinition.get = function proxyGetter () {
      return this[sourceKey][key]
    };
    sharedPropertyDefinition.set = function proxySetter (val) {
      this[sourceKey][key] = val;
    };
    Object.defineProperty(target, key, sharedPropertyDefinition);
}

Die _init-Funktion ist etwas lang und erledigt viele Dinge, die ich nicht einzeln erklären werde Diesmal bezieht es sich auf unsere Erkundung. Der Inhalt sollte sich in der Funktion initState(vm) befinden.

initState-Funktionsanalyserrreee

Es ist ersichtlich, dass initState 5 Dinge tut🎜

• Requisiten initialisieren🎜
• Initialisierung Methoden🎜
• Daten initialisieren. 🎜Außer Für die oben genannten Urteile 🎜das Wichtigste ist, alle Methoden in der Vue-Instanz zu definieren und die Bind-Funktion zu verwenden, um die Funktion auf die Vue-Instanz zu verweisen🎜, die das Instanzobjekt unseres neuen Vue() ist. . 🎜🎜Dies erklärt, warum dadurch direkt auf die Methoden in Methoden zugegriffen werden kann. 🎜🎜🎜initData initialisiert Daten🎜🎜rrreee🎜Was macht initdata: 🎜
  • Zuerst der Instanz _data einen Wert zuweisen, die Funktion getData verarbeitet die Datenfunktion und gibt ein Objekt zurück🎜
  • Urteil endgültig Die erhaltenen Daten sind kein Objekt und es wird eine Warnung ausgegeben. 🎜
  • Bestimmen Sie, ob die Funktion in Methoden mit dem Schlüssel in Daten in Konflikt steht🎜
  • Bestimmen Sie, ob ein Konflikt zwischen Requisiten und dem Schlüssel in Daten besteht🎜
  • Bestimmen Sie, ob es sich um ein internes privates reserviertes Attribut handelt. Wenn nicht, Erstellen Sie eine Ebene Proxy, Proxy für _Daten🎜
  • Endlich auf Daten hören und sie zu reaktionsfähigen Daten machen🎜🎜🎜Schauen wir uns an, was die Proxy-Funktion macht:🎜rrreee🎜Tatsächlich die Object.defineProperty Hier ist der Zweck von
    🎜🎜proxy, der zum Definieren von Objekten verwendet wird, darin, this.name auf this._data.name verweisen zu lassen 🎜🎜der Rest Die Beobachtungsfunktion ist nicht Gegenstand dieser Diskussion. Interessierte Freunde können sich den Quellcode selbst ansehen. 🎜🎜🎜Zusammenfassung🎜🎜🎜Gehen Sie zurück zur am Anfang gestellten Frage und geben Sie eine Antwort: 🎜
    • Die Methode in 🎜methods code> Durch <code>bind wird this als Instanz von new Vue (vm) angegeben, und die Funktionen in Methoden werden auch in vm, sodass Sie über this direkt auf die Funktionen in methods zugreifen können. 🎜🎜
    • 🎜Die von der Funktion data zurückgegebenen Datenobjekte werden auch in _data auf der neuen Vue-Instanz (vm) gespeichert Beim Zugriff auf this.name wird tatsächlich auf this._data.name nach dem Object.defineProperty-Proxy zugegriffen. 🎜🎜🎜🎜Was die Vor- und Nachteile dieses Datenentwurfsmusters betrifft, können Sie weiter erforschen, schließlich ist es nicht Teil dieser Diskussion. 🎜🎜【Verwandte Empfehlung: 🎜vue.js Video-Tutorial🎜】🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns über das Zeigeproblem in vue2.x sprechen. Warum zeigt es auf die Vue-Instanz?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!