'this' 关键字在 Vue 组件中如何工作？ [复制]答案

【问题标题】：How does 'this' keyword work in a Vue component? [duplicate]'this' 关键字在 Vue 组件中如何工作？ [复制]
【发布时间】：2021-07-20 18:05:55
【问题描述】：

为什么关键字'this'可以访问不在同一个对象中的任务？

 anyobject = {
  template: '#task-list',
  props: {
    tasks: {default: []}
  },
  data() {
    return {
      newTask: ''
    };
  },
  computed: {
    incomplete() {
      return this.tasks.length; // I DONT UNDERSTAND HOW THIS WORKS HERE 
    }
  },

【问题讨论】：

标签： javascript vue.js object

【解决方案1】：

我们知道每个 Vue 应用程序都从创建一个新的 Vue 实例开始，除非指定，否则所有声明的对象都包含同一个实例。

在其中，它将数据对象中的所有属性添加到 Vue 的反应系统中，如 docs 中所建议的那样。当这些属性值发生变化时，视图会“做出反应”，更新以匹配新值。

在这种情况下，计算属性也是如此。这里我们声明的计算属性是incomplete()。提供的函数将用作属性vueinstance.incomplete的getter函数

this 可以访问外部对象属性，因为 Vue 具有 Proxy，这使得 this.$data.property 可以作为 this.property 访问

这在某种程度上是 Vue 所做的事情之一，一旦你习惯了它，它就会让生活变得轻松。

【讨论】：