为什么有一个Observer而不是我的数组？

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 
     }); 
    } 
    } 
} 
(...) 

我想知道，为什么我点登录状态时，得到这个[__ob__: Observer] [4]。正如你所看到的，数组在data部分定义，然后它从局部变量获取值并进行检查：本地和全局变量都是相同的（点[2]）。

然后，当用户点击showName分配的方法（pt。[3]）时，我希望看到与pt相同的输出。 [2]，但是[__ob__: Observer]出现在控制台中。

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

Answer 1

<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>