Vue中data數據變化 -- 頁面重新渲染的問題
真的好困
原創
關註
5點贊·4679人閱讀
話不多說，直接上代碼！！！
1. 當數據屬於基本類型時 ， vue會自動檢測並在頁面重新渲染
<div id="app">
<p>{{ testData }} </p>
</div>
<script src="./vue-2.6.12.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
testData:'嘻嘻哈哈'
}
}
})
// 修改data裏面的數據
let num= 123
vm.testData += num
console.log(vm.testData);
</script>
復制
頁面展示效果：
控制臺輸出：
2. 如果數據是引用類型 ， 數據改變無法引起頁面重新渲染
2.1 如果數據是數組
<div id="app">
<h2>{{ list }} </h2>
</div>
<script src="./vue-2.6.12.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
list:[1,2,3,4]
}
}
})
// 修改data裏面的數據
let num = Math.round( Math.random()*10)
vm.list.length = num
console.log('修改後的引用類型數據:',vm.list)
</script>
復制
頁面效果 :
控制臺打印效果 :
2.1.1 解決方法
1. 合並數組到壹個新的數組中
vm.list = [...vm.list,num]
復制
2. Vue對數組變更的壹些方法進行了封裝
push()、pop()、shift()、unshift()、splice()、sort()、reverse() , 使用這些方法,可以直接出發視圖重新渲染
2.2 如果數據是對象類型
<div id="app">
<h2>{{ obj }} </h2>
<button @click="addFn">新增</button>
</div>
<script src="./vue-2.6.12.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
obj:{name:'zs',age:22 }
}
},
methods: {
addFn(){
this.obj.sex = '男'
console.log('修改後的對象類型數據:',this.obj)
}
},
})
</script>
復制
頁面效果：
控制臺打印：
2.2.1 解決方法
使用Vue的 set 方法
代碼實現
this.$set(this.obj,'sex','男')
//參數1： 要修改的對象
//參數2： 屬性
//參數3： 屬性的值是啥
//返回值：已經修改好的值
{ "name": "zs", "age": 22, "sex": "nan" }