Vue中data数据变化 -- 页面重新渲染的问题

话不多说，直接上代码！！！

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" }