vue变量赋值

Question

在使用vue-cli搭建项目时，出现了变量赋值的问题。
从component外部传入一个变量来渲染菜单，该变量由$.post取得
，但是使用不同的赋值方式会使得结果不同：

如图，使用方式1进行赋值时，菜单无法渲染，使用2时则正常。
菜单本身是数组，在chrome中console如下：

component中使用的是简单的v-for。使用props传入该变量

问题1：这两种方式究竟有什么本质不同？
问题2：在data中声名时，若是声明mainMenu: ''而不是图中的mainMenu: []，则方法1会直接报错，这又是什么原理呢？

Answer 1

问题2是因为你使用了v-for，那么你用v-for遍历一个字符串显然是不可行的，必须是数组类型才能编译通过的呀
问题1是因为你更新了数组的内容
https://cn.vuejs.org/v2/guide...
文档指出
“
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你打开控制台，然后用前面例子的 items 数组调用变异方法：example1.items.push({ message: 'Baz' }) 。

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
”
你更新的方式刚刚好属于不能检测到变动的情况，vue不能检测到数组变化就不会触发视图更新，所以视图就不会重新渲染，所以这是vue的特性，跟数组赋值没毛线关系，当然俩个数组也是不同的，毕竟是俩个数组俩个地址的引用

Answer 2

1. Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。

   也就是mainMenu get()，mainMenu set()，如果你没有定义，mainMenu的属性甚至是原型链上的属性，是没有办法触发的。当然，你可以用Vue.set。

2. ''[i]能不报错么。

Answer 3

难道不应该用this.mainMenu.push(this.menu[i])?

Answer 4

第一种方法打印出来的mainMenu和第二种一样吗？‘’是空字符串