为什么会出现data数据改变，页面不更新
vue2中是通过Object.defineProperty实现数据响应式，组件初始化时，对data中的数据进行递归遍历，对data的每一个属性进行劫持，添加set,get方法，我们后来新增加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会进行视图更新
解决视图不更新的问题
情况一：数组
第一种：
数组的值改变，在改变数组的值的时候使用索引index进行改变某一项，这样视图不会实时更新
解决方法：
使用$set()它的第一个参数是一个数组，第二个参数是下标，第三个参数是新的内容
例子：
let arr=['你好','nihaoya','满天星'] this.$set(arr,1,'你好吖') 当数组更新后arr是['你好','你好吖','满天星']
第二种：当修改数组长度的时候，视图也不会进行实时更新
解决方法：
可以使用数组方法【变异方法】进行触发更新视图，例如：pop() push() shift() unshift() sort() splice() 等
情况二：对象
只是改变啦对象的某一项，但是其他的数据视图没有更新
解决方案：
利用Vue.set(obj,key,val)
利用this.$set(this.obj,key,val)
利用Object.assign({},this.obj)创建新对象
$delete移除属性
可以先删除掉该项，然后再去使用set去进行添加
object.assign或者lodash.assign可以以为对象添加响应式属性
Vue3中为什么没有（Vue3的响应式原理）
通过Proxy（代理）： 拦截对象中任意属性的变化，包括：属性值的读写，属性的增加，属性的删除等。
通过Reffect（反射）： 对源对象的属性进行操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> // 目标对象 const user={ name:'zlx', age:18, classmate:{ name:'张璐' } } // 把目标对象变成代理对象 const proxyUser=new Proxy(user,{ get(target,prop){ console.log('get方法调用啦'); return Reflect.get(target,prop) }, set(target,prop,value){ console.log('set方法调用啦'); return Reflect.set(target,prop,value) }, deleteProperty(target,prop){ console.log("delete方法调用啦"); return Reflect.deleteProperty(target,prop) } }) // 通过代理对象获取目标对象中的值 console.log(proxyUser.name,11111111111); // 通过代理对象更改对象中的值 proxyUser.age=1111111111111 console.log(user); // 通过代理对象往目标对象中添加值 proxyUser.sex='女' console.log(user); // 通过代理对象删除目标对象上的属性值 delete proxyUser.name console.log(user); </script> </body> </html>
