javascript - 为什么有一个观察者而不是我的数组？

Question

我的 Vue 组件包括以下代码:

<script>
export default {
  data() {
    return {
      sailNames: []
    }
  },
  methods: {
    showName: function(e) { // [3] called by @click event from DOM
      console.log(this.sailNames); // [4] shows: [__ob__: Observer]
    },
    getJsonData() { // [1] called on created() hook
      $.getJSON("./src/res/sails.json", function(data) {
        const sailNames = [];
        $.each(data, function(i, names) {
          sailNames.push(names);
        });
        this.sailNames = sailNames;
        console.log(this.sailNames);
        console.log(sailNames); // [2] both logs give the same output
      });
    }
  }
}
(...)

我想知道，为什么我在记录点 [4] 的状态时得到这个 [__ob__: Observer]。如您所见，数组在 data 部分定义，然后它从局部变量获取值并进行检查:局部变量和全局变量相同(点 [2])。

然后，当用户单击分配了 showName 方法的元素时(第 [3] 节)，我希望看到与第 1 节中相同的输出。 [2]，而是 [__ob__: Observer] 出现在控制台中。

那里发生了什么？我应该如何调用数组来获取它的值？

Answer 1

箭头函数表达式的语法比函数表达式更短，并且没有自己的 this、arguments、super 或 new.target。尝试用箭头函数替换函数表达式。

<script>
export default {
  data() {
    return {
      sailNames: []
    }
  },
  methods: {
    showName(e){  
      console.log(this.sailNames); 
    },
    getJsonData() { 
      $.getJSON("./src/res/sails.json", (data) => {
        const sailNames = [];
        $.each(data, function(i, names) {
          sailNames.push(names);
        });
        this.sailNames = sailNames;
      });
    }
  }
}
</script>