1.$set
在開發過程中，我們時常會遇到這樣一種情況：當vue的data裡邊聲明或者已經指派過的對象或者數組（數組裡邊的值是對象）時，向對象中添加新的屬性，如果更新此屬性的值，是不會更新視圖的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}}
<div>
<p @click="add(obj)">{{obj.a}}</p>
<p @click="sub(obj)">{{obj.b}}</p>
</div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'sss',
obj:{}
},
mounted() {
this.obj = {a:0};
this.obj.b = 0;
console.log("test1",this.obj)
},
methods: {
add(item){
item.a = item.a + 1;
console.log("add++",item)
},
sub(item){
item.b = item.b+1;
console.log("sub++",item)
}
},
})
</script>
</body>
</html>
可以看出a屬性是有get 和 set方法的，而新增的b屬性是沒有的。
點了四次a,及時更新，點了一次b,不更新，點了一次a, a,b同時更新了
由此可以看出，更新新增屬性b，是不會更新視圖，但是會改變其值，當更新原有屬性a時會更新視圖，同時将新增的屬性b的值也更新到視圖裡邊
解決方案
mounted() {
this.obj = {a:0};
// this.obj.b = 0;
this.$set(this.obj,'b',0)
console.log("test1",this.obj)
},
2.Vue.nextTick( [callback, context] )
<mt-tabbar v-model="selected" fixed>
<mt-tab-item id="home">
<img slot="icon" src="./assets/img/index.png" @click="changeHash">
首頁
</mt-tab-item>
<mt-tab-item id="member">
<img slot="icon" src="./assets/img/vip.png" @click="changeHash">
會員
</mt-tab-item>
<mt-tab-item id="shopcart">
<img slot="icon" src="./assets/img/shopcart.png" @click="changeHash">
購物車
</mt-tab-item>
<mt-tab-item id="search">
<img slot="icon" src="./assets/img/find.png" @click="changeHash">
查找
</mt-tab-item>
</mt-tabbar>
methods: {
changeHash () {
// 該調用早于 子元件指派父元件的selected
this.$nextTick(function () {
this.$router.push({
name: this.selected
})
// console.log(this.selected)
})
}
}
// watch: {
// selected (newV, oldV) {
// this.$router.push({
// name: newV
// })
// }
// }
3.delete
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}}
<div>
<p @click="add(obj)">{{obj.a}}</p>
<p @click="sub(obj)">{{obj.b}}</p>
</div>
<ul>
<li v-for="item in newsLists">{{item.a}}==={{item.b}}</li>
</ul>
<div @click="btn">删除</div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'sss',
obj:{},
newsLists:[
{a:1,b:2},
{a:3,b:4},
{a:4,b:4},
{a:5,b:4}
]
},
mounted() {
this.obj = {a:0};
// this.obj.b = 0;
this.$set(this.obj,'b',0)
console.log("test1",this.obj)
},
methods: {
add(item){
item.a = item.a + 1;
console.log("add++",item)
},
sub(item){
item.b = item.b + 1;
console.log("sub++",item)
},
btn(){
this.$delete(this.newsLists,0)
//delete this.newsLists[0]
console.log(this.newsLists)
}
},
})
</script>
</body>
</html>