为什么 vue 数组会变成观察者？答案

【问题标题】：Why does vue array become observer?为什么 vue 数组会变成观察者？
【发布时间】：2021-05-12 06:25:56
【问题描述】：

我在数据中定义了一个变量

data() {
    return {
        pie_graph_data:[],
   }
}

而且这个变量不在任何地方。得到服务器响应后

let response = resp.data.success.pie_graph_data;
console.log(response);//this is array
console.log(this.pie_graph_data);//this is also an array
this.pie_graph_data = response;
console.log(response, this.pie_graph_data); //both become observer

我需要知道 this.pie_graph_data 是否没有在任何地方使用，为什么它转向观察者更重要的是如何在模板中使用这个变量作为数组。

【问题讨论】：

vue 观察者问题一直困扰着我。如果我们不能将观察者用作数组，则不应该有将其转换为数组或至少使用它的方法。 Json Stringify 方法也永远不起作用。
我的印象是观察者必须发挥 Vue 的魔力。您可以像使用数组一样使用观察者。所以像往常一样循环遍历它。那不行吗？你能分享 pie_graph_data 吗？也许 pie_graph_data 是一个对象？
@PeterKrebs 是的，我可以解析这个观察者，但是在 chartjs 图中使用时它不起作用。每个地方的道具和数据值都显示正确。
chartjs 可能不喜欢观察者，但如果数据结构正确，应该透明地处理它。您是否测试过图表是否适用于您从后端收到的数组？如果是，您可能必须删除观察者：stackoverflow.com/questions/62619240/…

标签： vuejs2

【解决方案1】：

记录pie_graph_data 让您相信它只是一个普通的空数组，但实际上并非如此。如果您在浏览器控制台中看不到您的数组属性，您可以记录您的空数组pie_graph_data.__ob__ 属性，您会看到它已经是一个Observer。数组是可迭代的对象，分配额外的属性不会使它们失去被迭代的能力。因此，chartjs 不适合您肯定还有其他原因。

【讨论】：

【解决方案2】：

问题出在子组件中，其中计算属性使用了由 props 传递的观察者。

将计算属性转换为方法（getChartData）并在观察者中调用它为我解决了这个问题。

watch:{
    graphData(val){
        if(val && val.length){
            this.renderChart(this.getChartData(val),this.chartOptions);
        }
    }
},

【讨论】：