情況一：Vue無(wú)法檢測(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)式的。
例如：?
|
1
2
3
4
5
|
new
Vue({
??
data:{},
??
template:
'<div>{{message}}</div>'
})
this
.message =
'Hello world!'
// `message` 不是響應(yīng)式的頁(yè)面不會(huì)發(fā)生變化
|
解決方法：
|
1
2
3
4
5
6
7
|
new
Vue({
??
data: {
????
message:
''
,
??
},
??
template:
'<div>{{ message }}</div>'
})
this
.message =
'Hello world!'
|
情況二：vue也不能檢測(cè)到data中對(duì)象的動(dòng)態(tài)添加和刪除
例如：
|
1
2
3
4
5
6
7
8
9
10
|
new
Vue({
??
data:{
????
obj: {
??????
id: 1
????
}
??
},
??
template:
'<div>{{ obj.message }}</div>'
})
this
.obj.message =
'hello'
// 不是響應(yīng)式的
delete
this
.obj.id??????
// 不是響應(yīng)式的
|
解決方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 動(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í)
不能通過(guò)索引直接修改或者賦值，也不能修改數(shù)組的長(zhǎng)度
例如：
|
1
2
3
4
5
6
7
8
|
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)性的
|
解決方法：
|
1
2
3
4
5
6
7
8
9
10
|
// 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í)行的。只要偵聽(tīng)到數(shù)據(jù)變化，Vue 將開(kāi)啟一個(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) 代替。
例如：
|
1
2
3
4
5
6
7
8
9
10
|
<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'
// 頁(yè)面沒(méi)有變化
|
解決方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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í)，頁(yè)面也可能不更新，此時(shí)可以讓頁(yè)面強(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)容的子組件，而不是所有子組件。
|
1
2
|
//官方說(shuō)如果你現(xiàn)在的場(chǎng)景需要用forceUpdate方法 ,那么99%是你的操作有問(wèn)題
this
.$forceUpdate();
|
情況六：路由參數(shù)變化時(shí)，頁(yè)面不更新(數(shù)據(jù)不更新)
例如：
|
1
2
3
4
5
6
7
8
|
<
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
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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) routes 中配置了一個(gè)動(dòng)態(tài)路由 '/home/:name'，它們共用一個(gè)路由組件 Home，這代表他們復(fù)用 RouterView 。
當(dāng)進(jìn)行路由切換時(shí)，頁(yè)面只會(huì)渲染第一次路由匹配到的參數(shù)，之后再進(jìn)行路由切換時(shí)，message 是沒(méi)有變化的。
解決方法：
1.通過(guò) watch 監(jiān)聽(tīng) $route 的變化。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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)心組件更新問(wèn)題的，所以這個(gè)時(shí)候 key 屬性是多余的。
|
1
2
3
|
<
div
id
=
"app"
>
???
<
router-view
:key
=
"key"
></
router-view
>
</
div
>
|
情況七：變量通過(guò)賦值來(lái)定義的
在 Vue 中有兩種類型的變量：響應(yīng)式變量和非響應(yīng)式變量。
從后端獲取的變量通常是響應(yīng)式變量，也就是說(shuō)它們會(huì)被 Vue 監(jiān)測(cè)到變化并同步到頁(yè)面上，如果你修改了這些響應(yīng)式變量，頁(yè)面會(huì)隨之改變。
而通過(guò)賦值來(lái)定義的變量通常是非響應(yīng)式變量，如果你修改了這些非響應(yīng)式變量，Vue 并不會(huì)監(jiān)測(cè)到它們的變化，所以頁(yè)面不會(huì)改變。
如果你需要使一個(gè)非響應(yīng)式變量變成響應(yīng)式變量，可以使用 Vue.set 方法或者數(shù)組的變異方法(例如 push、splice 等)。
例1：Vue.set(對(duì)象,添加的key,屬性值”)
|
1
2
3
4
|
Vue.set
//這個(gè)是直接用在Vue身上的。例如: Vue.set(對(duì)象,添加的key,屬性值”)
//常見(jiàn)于: xx.js文件中
//注意: js文件中，需要引入vue，比如: import Vue from vue
|
例2：this.$set(對(duì)象,添加的key',屬性值)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-774578.html
|
1
2
3
|
this
.$set
//這個(gè)是用在vm或者vc實(shí)例身上的，比如vue文件中，this.$set(對(duì)象,添加的key',屬性值)
//常見(jiàn)于: xx.vue文件中
|
強(qiáng)制更新數(shù)據(jù)：this.$forceUpdate();文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-774578.html
到了這里，關(guān)于Vue數(shù)據(jù)更新頁(yè)面卻沒(méi)有更新的幾種情況以及解決方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
