解析Vue的代理机制

脑阔疼的咸鱼2333

已于 2023-05-31 17:25:38 修改

阅读量234

点赞数 1

文章标签： vue.js javascript 前端

于 2023-05-15 19:48:09 首次发布

本文链接：https://blog.csdn.net/qq_68782097/article/details/130677664

版权

Vue的框架是MVVM，vm就是vue的代理层，代理层负责调解model层和view层之间的数据交换。vm可以实现很多功能比如双向绑定。而这些都是通过vue的代理机制实现的。

vue的代理机制的实现依赖于JS的ES5新特性，新增的Object.defineProperty()方法

Object.defineProperty()
   1.ES5新增的方法
   2.作用：给对象新增属性，或设置对象原有属性
   3.怎么用？
           Object.defineProperty(给哪个对象新增属性，“新增的属性名”，{给新增的属性设置相关的配置项key:value对})
   4.第三个参数对应的配置项
           value 配置项：给属性指定值
           writable 配置项：设置该属性值是否可被修改
           getter方法配置项
           setter 方法配置项
   5.手写myvue类

class myvue{
    //options是一个json对象
    constructor(options){
        //获取optios中的json格式的data数据
        Object.keys(options.data).forEach((propertyName,index)=>{
            Object.defineProperty(this,propertyName,{
                set(val){
                    options.data[propertyName]=val;
                },
                get(){
                    return options.data[propertyName];
                }
            })
        });
    }
}

这里写了一个自己的Vue类，不过功能只有解析data属性。下面我们试试效果：

<!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>2.4.Object.defineProperity</title>
    <script src="../vue.js"></script>
    <script src="../myvue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        let myvm=new myvue({
            data:{
                name:"liam",
                age:'21',
                tall:'190'
            }
        })
    </script>

这里使用myvue类创建了一个myvm对象，json格式的data对象里面包含数据name，age，tall信息。然后运行上面的html代码，然后在控制台输入myvm查看自定义myvue的对象。