Vue2 this直接获取data和methods原理解析

下面是“Vue2 this直接获取data和methods原理解析”的完整攻略。

Vue2 this直接获取data和methods原理解析

在Vue2中，我们可以直接通过this关键字获取组件实例里的data和methods。这样写起来会更加方便简洁。那么在底层，Vue2是如何实现this直接获取data和methods的呢？

data

在Vue2中，当我们使用data属性定义一个组件的数据时，实际上这个data是一个对象。在Vue2的初始化阶段，会根据这个data对象生成一个响应式的对象。我们可以使用Object.defineProperty来实现：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      return val
    },
    set: function reactiveSetter(newVal) {
      val = newVal
      // 在这里可以触发组件重新渲染的逻辑
    }
  })
}

function observe(data) {
  if (!data || typeof data !== 'object') {
    return
  }

  Object.keys(data).forEach(key => {
    defineReactive(data, key, data[key])
  })
}

class Vue {
  constructor(options) {
    this._data = options.data
    observe(this._data)
  }
}

const vm = new Vue({
  data: {
    message: 'hello world'
  }
})

console.log(vm.message) // 此时的输出结果为 'hello world'

我们看到，在Vue类的构造函数中，我们将传入的data对象赋值给this._data属性，然后调用了observe函数对this._data进行了响应式处理。defineReactive函数中的get和set函数分别会在访问和修改响应式对象时被调用。这样一来，我们就可以通过this直接访问到Vue实例的data属性了。

class Vue {
  constructor(options) {
    this._data = options.data
    observe(this._data)
  }

  created() {
    console.log(this.$data.message) // 此时的输出结果为 'hello world'
  }
}

const vm = new Vue({
  data: {
    message: 'hello world'
  }
})

methods

和data属性类似，我们也可以通过methods属性来定义组件的方法。在Vue2的初始化阶段，也会将methods对象里定义的方法添加到组件实例里。我们可以使用Object.defineProperty来实现：

function proxy(vm, sourceKey, key) {
  Object.defineProperty(vm, key, {
    enumerable: true,
    configurable: true,
    get: function proxyGetter() {
      return vm[sourceKey][key]
    },
    set: function proxySetter(newVal) {
      vm[sourceKey][key] = newVal
    }
  })
}

class Vue {
  constructor(options) {
    this._data = options.data
    this._methods = options.methods

    observe(this._data)

    Object.keys(this._methods).forEach(key => {
      proxy(this, '_methods', key)
    })
  }

  created() {
    console.log(this.hello()) // 此时的输出结果为 'hello world'
  }
}

const vm = new Vue({
  data: {
    message: 'hello world'
  },
  methods: {
    hello() {
      return this.message
    }
  }
})

我们看到，在Vue类的构造函数中，我们将传入的methods对象赋值给this._methods属性，并调用了proxy函数将所有的methods属性都添加到组件实例上。这样一来，我们就可以通过this直接访问到Vue实例的methods属性了。

class Vue {
  constructor(options) {
    this._data = options.data
    this._methods = options.methods

    observe(this._data)

    Object.keys(this._methods).forEach(key => {
      proxy(this, '_methods', key)
    })
  }

  created() {
    console.log(this.hello()) // 此时的输出结果为 'hello world'
    console.log(this.$methods.hello()) // 这种写法也是可以的
  }
}

const vm = new Vue({
  data: {
    message: 'hello world'
  },
  methods: {
    hello() {
      return this.message
    }
  }
})

通过以上两个示例，我们了解到了Vue2 this直接获取data和methods的原理和实现方式。