情況一：Vue無法檢測(cè)實(shí)例被創(chuàng)建時(shí)不存在于data中的變量
原因：由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì) data中的數(shù)據(jù)執(zhí)行 getter/setter 轉(zhuǎn)化，所以 變量必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。
例如：
new Vue({
data:{},
template: '<div>{{message}}</div>'
})
this.message = 'Hello world!' // `message` 不是響應(yīng)式的頁面不會(huì)發(fā)生變化
解決方法：
new Vue({
data: {
message: '',
},
template: '<div>{{ message }}</div>'
})
this.message = 'Hello world!'
情況二：vue也不能檢測(cè)到data中對(duì)象的動(dòng)態(tài)添加和刪除
例如：
new Vue({
data:{
obj: {
id: 1
}
},
template: '<div>{{ obj.message }}</div>'
})
this.obj.message = 'hello' // 不是響應(yīng)式的
delete this.obj.id // 不是響應(yīng)式的
解決方法：
// 動(dòng)態(tài)添加 - Vue.set
Vue.set(this.obj, 'id', 002)
// 動(dòng)態(tài)添加 - this.$set
this.$set(this.obj, 'id', 002)
// 動(dòng)態(tài)添加多個(gè)
// 代替 Object.assign(this.obj, { a: 1, b: 2 })
this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })
// 動(dòng)態(tài)移除 - Vue.delete
Vue.delete(this.obj, 'name')
// 動(dòng)態(tài)移除 - this.$delete
this.$delete(this.obj, 'name')
情況三：變量為數(shù)組時(shí)
不能通過索引直接修改或者賦值，也不能修改數(shù)組的長(zhǎng)度
例如：
new Vue({
data: {
items: ['a', 'b', 'c']
}
})
this.items[1] = 'x' // 不是響應(yīng)性的
this.items[3] = 'd' // 不是響應(yīng)性的
this.items.length = 2 // 不是響應(yīng)性的
解決方法：
// Vue.set
Vue.set(this.items, 4, 'd')
// this.$set
this.$set(this.items, 4, 'd)
// Array.prototype.splice
this.items.splice(indexOfItem, 4, 'd')
//修改長(zhǎng)度
this.items.splice(3)
情況四：異步獲取接口數(shù)據(jù)，DOM數(shù)據(jù)不發(fā)現(xiàn)變化
原因：Vue 在更新 DOM 時(shí)是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作是非常重要的。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。Vue 在內(nèi)部對(duì)異步隊(duì)列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執(zhí)行環(huán)境不支持，則會(huì)采用 setTimeout(funcation, 0) 代替。
例如：
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
vm.$el.style.color = 'red' // 頁面沒有變化
解決方法：
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改數(shù)據(jù)
//使用 Vue.nextTick(callback) callback 將在 DOM 更新完成后被調(diào)用
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
vm.$el.style.color = 'red' // 文字顏色變成紅色
})
情況五：循環(huán)嵌套層級(jí)太深，視圖不更新
當(dāng)嵌套太深時(shí)，頁面也可能不更新，此時(shí)可以讓頁面強(qiáng)制刷新
this.$forceUpdate()迫使vue實(shí)例重新（rander）渲染虛擬DOM，注意并不是重新加載組件。
結(jié)合vue的生命周期，調(diào)用$forceUpdate后只會(huì)觸發(fā)beforeUpdate和updated這兩個(gè)鉤子函數(shù)，不會(huì)觸發(fā)其他的鉤子函數(shù)。
它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
//官方說如果你現(xiàn)在的場(chǎng)景需要用forceUpdate方法 ,那么99%是你的操作有問題
this.$forceUpdate();
情況六：路由參數(shù)變化時(shí)，頁面不更新(數(shù)據(jù)不更新)
例如：
<div id="app">
<ul>
<li><router-link to="/home/foo">To Foo</router-link></li>
<li><router-link to="/home/baz">To Baz</router-link></li>
<li><router-link to="/home/bar">To Bar</router-link></li>
</ul>
<router-view></router-view>
</div>
const Home = {
template: `<div>{{message}}</div>`,
data() {
return {
message: this.$route.params.name
}
}
}
const router = new VueRouter({
mode:'history',
routes: [
{path: '/home', component: Home },
{path: '/home/:name', component: Home }
]
})
new Vue({
el: '#app',
router
})
上段代碼中，我們?cè)诼酚蓸?gòu)建選項(xiàng) routers 中配置了一個(gè)動(dòng)態(tài)路由 '/home/:name'，它們共用一個(gè)路由組件 Home，這代表他們復(fù)用 RouterView 。
當(dāng)進(jìn)行路由切換時(shí)，頁面只會(huì)渲染第一次路由匹配到的參數(shù)，之后再進(jìn)行路由切換時(shí)，message 是沒有變化的。
解決方法：
1.通過 watch 監(jiān)聽 $route 的變化。
const Home = {
template: `<div>{{message}}</div>`,
data() {
return {
message: this.$route.params.name
}
},
watch:{
'$route':function(){
this.message = this.$route.params.name
}
}
}
...
new Vue({
el: '#app',
router
})
2.給<router-view> 綁定key屬性，這樣 Vue 就會(huì)認(rèn)為這是不同的 <router-view>。
弊端：如果從 /home 跳轉(zhuǎn)到 /user 等其他路由下，我們是不用擔(dān)心組件更新問題的，所以這個(gè)時(shí)候 key 屬性是多余的。
<div id="app">
<router-view :key="key"></router-view>
</div>
情況七：變量通過賦值來定義的
在 Vue 中有兩種類型的變量：響應(yīng)式變量和非響應(yīng)式變量。
從后端獲取的變量通常是響應(yīng)式變量，也就是說它們會(huì)被 Vue 監(jiān)測(cè)到變化并同步到頁面上，如果你修改了這些響應(yīng)式變量，頁面會(huì)隨之改變。而通過賦值來定義的變量通常是非響應(yīng)式變量，如果你修改了這些非響應(yīng)式變量，Vue 并不會(huì)監(jiān)測(cè)到它們的變化，所以頁面不會(huì)改變。
如果你需要使一個(gè)非響應(yīng)式變量變成響應(yīng)式變量，可以使用 Vue.set 方法或者數(shù)組的變異方法（例如 push、splice 等）。
例1：Vue.set(對(duì)象,添加的key,屬性值”)
Vue.set
//這個(gè)是直接用在Vue身上的。例如: Vue.set(對(duì)象,添加的key,屬性值”)
//常見于: xx.js文件中
//注意: js文件中，需要引入vue，比如: import Vue from vue
例2：this.$set(對(duì)象,添加的key',屬性值)
this.$set
//這個(gè)是用在vm或者vc實(shí)例身上的，比如vue文件中，this.$set(對(duì)象,添加的key',屬性值)
//常見于: xx.vue文件中
強(qiáng)制更新數(shù)據(jù)：this.$forceUpdate();
