为什么Vue2中出现data数据刷新但是视图不更新的问题，但是Vue3中没有

Clover‘s Blog

已于 2023-03-15 13:46:45 修改

阅读量1.4k

点赞数 1

文章标签： vue Powered by 金山文档

于 2023-03-13 16:00:31 首次发布

本文链接：https://blog.csdn.net/Clover_zlx/article/details/129493597

版权

为什么会出现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>