我对什么时候在 vue.js 中使用“这个”这个词有点困惑。例如，在下面的代码中，我到处都使用“vm”而不是“this”，代码不起作用。

我也看到了一些使用“self”的示例，但是我不是 JavaScript 大师，这真的很令人困惑。

var vm = new Vue({
        el: '#app',
        data: {
            tickets: [],
            top: 100,
            search: '',
            showAdd: false,
         },
        mounted: function () {
            this.$nextTick(function () {
                console.log('mounted');
                this.GetTickets(100);
            })
        },
        methods: {
            GetTickets: function (top) {
                axios.get('/api/Tickets', {
                    params: {
                        Top: top
                    }
                })
                    .then(function (response) {
                        vm.tickets = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            ClearTicket: function () {
                var t = {
                    "ticketSubject": '',
                    "contactName": '',
                    "createdAt": moment()
                }
                vm.ticket = t;
                vm.showAdd = !vm.showAdd;
            },
            AddTicket: function () {
                //vm.tickets.unshift(vm.ticket);
                axios.post('/api/Tickets', vm.ticket)
                    .then(function (response) {
                        console.log(response);
                        vm.GetTickets(100);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                vm.showAdd = false;

            }
        },

    })

最佳答案

通常，在 Vue 中的方法、计算属性或生命周期处理程序内部，您将使用 this 来引用方法/计算/处理程序所附加的组件。 this 指的是函数当前执行的上下文。

在使用 this 时遇到麻烦的地方是在当前函数的上下文中声明一个新函数时，就像您编写回调到 promise (axios.post, axios.get).考虑这段代码:

AddTicket: function () {
  // "this", on this line, refers to the Vue
  // and you can safely use "this" to get any of the
  // data properties of the Vue
    axios.post('/api/Tickets', ...)
      .then(function (response) {
        // "this" HERE, does NOT refer to the Vue!!
        // The reason why explained below              
      })
}

在上面的代码中，第一条注释可以替换为使用 this 获取数据属性或调用 Vue 方法的代码 (this.tickets)。然而，第二个注释是 在 一个新的函数上下文中，并且 this 不会引用 Vue.这是因为在 Javascript 中，当您使用 function() {} 语法声明一个新函数时，该函数有它自己的函数上下文，它与它所在的函数不同已声明。

在 Javascript 中有几种方法可以处理这个问题。现在最常见的是使用闭包来捕获正确的 this，或者使用箭头函数。考虑这段代码:

AddTicket: function () {
  // As before, "this" here is the Vue
    axios.post('/api/Tickets', ...)
      .then((response) => {
        // "this" HERE is ALSO the Vue
      })
}

请注意，在此示例中，回调是使用箭头函数 (() => {}) 定义的。箭头函数不会创建自己的函数上下文，而是使用声明它们的上下文。这也称为具有词法作用域。

另一种最常见的解决方法是使用闭包。

AddTicket: function () {
  const self = this // Here we save a reference to the "this" we want
    axios.post('/api/Tickets', ...)
      .then(function(response){
        // and HERE, even though the context has changed, and we can't use
        // "this", we can use the reference we declared (self) which *is*
        // pointing to the Vue
        self.tickets = response
      })
}

最后，您可以使用 bind method使用特定的 this 创建一个函数，尽管现在箭头函数可用时这并不常见。

AddTicket: function () {
    axios.post('/api/Tickets', ...)
      .then(function(response){
        this.tickets = response
      }.bind(this)) // NOTE the ".bind(this)" added to the end of the function here
}

在几乎任何情况下，您是否真的应该按照您在问题中所做的那样做，即在变量 vm 中保存对 Vue 的引用并在 inside Vue 对象本身。这是一种不好的做法。

无论如何，如何正确使用 this 已在许多帖子中进行了详细介绍 throughout the internet和 here on StackOverflow

最后，这里是修改后的问题代码，this应该被正确使用。

var vm = new Vue({
  el: '#app',
  data: {
    tickets: [],
    top: 100,
    search: '',
    showAdd: false,
    ticket: null
  },
  mounted: function () {
    // there is no need for $nextTick here
    this.GetTickets(100)
  },
  methods: {
    GetTickets: function (top) {
      axios.get('/api/Tickets', { params: { Top: top }})
        .then(response => this.tickets = response.data)
        .catch(error => console.log(error));
    },
    ClearTicket: function () {
      var t = {
        "ticketSubject": '',
        "contactName": '',
        "createdAt": moment()
      }
      this.ticket = t;
      this.showAdd = !this.showAdd;
    },
    AddTicket: function () {
      axios.post('/api/Tickets', this.ticket)
        .then(() => this.GetTickets(100))
        .catch(error => console.log(error));

      this.showAdd = false;
    }
  },
})

关于javascript - 何时使用 vm。或这个。在 Vue.js 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47148363/