vue底层的数据代理

最新推荐文章于 2024-08-08 15:10:37 发布

逍码农

最新推荐文章于 2024-08-08 15:10:37 发布

阅读量355

点赞数

分类专栏： web面经文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_61222138/article/details/122580390

版权

web面经专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先我们先看看vue的基本框架

数据代理就是当你在vue实例里面定义了一些data的属性，在VM模型对象中，他会接收data中的属性，并在自己里面形成一个_data的东西里面主要是有你data里面的属性，并且有响应的get与set方法。这就是数据代理。数据代理底层主要是运用了Object.definProperty这个方法,数据代理就是我们改的是data里面的值，当代理到_tada里面然后页面就重新解析，重新进行绑定。

这个方法的作用是为指定对象添加属性

Object.Property（Object，key）{ //这里object指的是传入的对象，key是你要创建或者定义的字段

    get(){};//当值读取时会执行这个方法
    set(){};//当值改变时会执行这个方法
}

请简单写一个数据监听的小案例

<!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>模拟一个数据监测的damo</title>
</head>
<body>
    <script type="text/javascript">
        let data={
            name:'yyy',
            address:'bbb'
        }

        //创建一个监视的实例
        const obs=new Observer(data);
        console.log(obs);

        //准备一个vm实例
        let vm ={}
        vm._data=data=obs;

        

        function Observer(obj){
            //汇总对象中的属性成为一个数组
            const  keys =Object.keys(obj)
            //遍历
            keys.forEach((k)=>{
                Object.defineProperty(this,k,{
                    get(){
                        return obj[k]
                    },
                    set(val){
                        console.log(`${k}被改了，我要去解析模板。`)
                        obj[k]=val
                    }
                })
            })
        }
    </script>
</body>
</html>

数据监听就是当我们改变了_data 里面属性对应的值时，会引起vue从新去解析页面。而数据代理则是我们改变了data里面的东西引起了_data里面的数据也会自动的改变。

逍码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue底层的数据代理

首先我们先看看vue的基本框架数据代理就是当你在vue实例里面定义了一些data的属性，在VM模型对象中，他会接收data中的属性，并在自己里面形成一个_data的东西里面主要是有你data里面的属性，并且有响应的get与set方法。这就是数据代理。数据代理底层主要是运用了Object.definProperty这个方法,数据代理就是我们改的是data里面的值，当代理到_tada里面然后页面就重新解析，重新进行绑定。这个方法的作用是为指定对象添加属性Object.Pr...
复制链接

扫一扫

专栏目录