话不多说，直接上代码！！！
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= 123vm.testData += numconsole.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 = numconsole.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" }
