为什么要引用this变量来修改DOM元素？ ：在Vue组件中对'this'进行澄清

Question

我有一个具有以下结构的vue组件：

   export default{
     name: '',
     data: function () {
        return {
           var1 :{},
           var2 : {},
           ...
        }
     },
     created: function () {
         this.methodName1()
     },
     methods: {
        methodName2: function () {
           var context = this

           rp(options).then(function () {
              context.methodName1()
              return null
           }).catch(function (err) {
              console.log(err)
           })
       },
       methodName1: function () {
             //function body
       }
   }

我怀疑this.methodName1为什么将未定义的地址作为

    var context = this; 
    context.methodName1 

在methodName2中完美运行？

为什么我们需要引用this变量，尤其是修改DOM元素？

Answer 1

仔细查看官方文档中的Lifecycle-Diagram。您尝试在this.methodName1()之前运行created methods，这意味着您正在尝试运行尚未附加的方法。
mounted是您所有方法已经可用的地方 变化：

created: function () {
     this.methodName1()
},

到

mounted: function () {
     this.methodName1()
},

你应该好好去。