Vue单文件组件无法访问columns props，控制台输出[__ob__: Observer]求解

首先你看到的[__ob__: Observer]其实不是报错，这是Vue为了实现响应式，给数组添加的观察者对象，说明你的columns已经被Vue处理成响应式数据了，只是打印的时机不对导致看不到真实内容。

为什么在data函数里打印看不到正常内容？ #

Vue组件的生命周期里，data函数的执行时机是在组件实例创建初期，这时候props虽然已经被传入，但还没完成响应式的初始化绑定，直接打印的话只能看到Vue添加的观察者包装，看不到数组的真实元素。

正确的调试和访问方式 #

这里给你几个可行的解决办法：

• 用Vue Devtools查看：直接在浏览器的Vue开发者工具里找到你的Grid组件，查看props里的columns，就能看到完整的数组内容，这是最直观的方式。
• 换个生命周期钩子打印：把console.log放到created或者mounted钩子里面，这时候props已经完成响应式初始化了：

  export default {
    name: 'grid',
    props: {
      data: Array,
      columns: Array,
      filterKey: String
    },
    data: function() {
      var sortOrders = {}
      // 这里不要打印，时机不对
      return {
        sortOrders
      }
    },
    created() {
      // 这里打印就能看到真实的columns数组了
      console.log('columns in created:', this.columns)
    },
    // 或者mounted钩子
    mounted() {
      console.log('columns in mounted:', this.columns)
    }
  }
  

• 如果一定要在data里用columns的值：可以通过计算属性或者在created里初始化相关数据，比如你要生成sortOrders的话，可以改成这样：

  data: function() {
    return {
      sortOrders: {}
    }
  },
  created() {
    // 在created里初始化sortOrders，这时候columns已经可用了
    this.columns.forEach(col => {
      this.sortOrders[col] = 1
    })
  }
  

• 打印时展开响应式数组：如果还是想在data里打印，可以用JSON.parse(JSON.stringify(this.columns))来复制一份非响应式的数组，这样就能看到真实内容了：

  data: function() {
    var sortOrders = {}
    console.log('columns:', JSON.parse(JSON.stringify(this.columns)))
    return {
      sortOrders
    }
  }
  

另外还要确认一下父组件是否正确传入了columns数组，比如父组件里是不是用:columns="yourColumnsData"的方式绑定的，而不是直接写columns="xxx"（那样会传字符串）。

内容的提问来源于stack exchange，提问作者sluther