vue變量賦值

在使用vue-cli搭建項(xiàng)目時(shí)，出現(xiàn)了變量賦值的問(wèn)題。
從component外部傳入一個(gè)變量來(lái)渲染菜單，該變量由$.post取得
，但是使用不同的賦值方式會(huì)使得結(jié)果不同：

如圖，使用方式1進(jìn)行賦值時(shí)，菜單無(wú)法渲染，使用2時(shí)則正常。
菜單本身是數(shù)組，在chrome中console如下：

component中使用的是簡(jiǎn)單的v-for。使用props傳入該變量

問(wèn)題1：這兩種方式究竟有什么本質(zhì)不同？
問(wèn)題2：在data中聲名時(shí)，若是聲明mainMenu: ''而不是圖中的mainMenu: []，則方法1會(huì)直接報(bào)錯(cuò)，這又是什么原理呢？

回答

編輯回答

法克魷

Vue 實(shí)例的數(shù)據(jù)對(duì)象。Vue 將會(huì)遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。

也就是mainMenu get()，mainMenu set()，如果你沒(méi)有定義，mainMenu的屬性甚至是原型鏈上的屬性，是沒(méi)有辦法觸發(fā)的。當(dāng)然，你可以用Vue.set。
''[i]能不報(bào)錯(cuò)么。

2017年8月19日 09:51

編輯回答

青瓷

第一種方法打印出來(lái)的mainMenu和第二種一樣嗎？‘’是空字符串

2018年6月26日 11:32

編輯回答

孤客

問(wèn)題2是因?yàn)槟闶褂昧藇-for，那么你用v-for遍歷一個(gè)字符串顯然是不可行的，必須是數(shù)組類型才能編譯通過(guò)的呀
問(wèn)題1是因?yàn)槟愀铝藬?shù)組的內(nèi)容
https://cn.vuejs.org/v2/guide...
文檔指出
“
Vue 包含一組觀察數(shù)組的變異方法，所以它們也將會(huì)觸發(fā)視圖更新。這些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你打開(kāi)控制臺(tái)，然后用前面例子的 items 數(shù)組調(diào)用變異方法：example1.items.push({ message: 'Baz' }) 。

由于 JavaScript 的限制，Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：

當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength
”
你更新的方式剛剛好屬于不能檢測(cè)到變動(dòng)的情況，vue不能檢測(cè)到數(shù)組變化就不會(huì)觸發(fā)視圖更新，所以視圖就不會(huì)重新渲染，所以這是vue的特性，跟數(shù)組賦值沒(méi)毛線關(guān)系，當(dāng)然倆個(gè)數(shù)組也是不同的，畢竟是倆個(gè)數(shù)組倆個(gè)地址的引用

2018年5月17日 18:06

編輯回答