VUE框架VM对象数据代理机制的实现原理------VUE框架

旧约Alatus

已于 2023-11-24 00:42:59 修改

阅读量767

点赞数 19

分类专栏： # VUE框架前端文章标签： vue.js javascript vue 前端前端框架 js json

于 2023-11-23 11:47:45 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134573794

版权

前端同时被 2 个专栏收录

328 篇文章 2 订阅

订阅专栏

VUE框架

249 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    
    
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        // 目标对象
        let target = {
            name : "zhangSan"
        };
        // 代理对象
        let proxy = {};
        // 那么如果我们需要实现数据代理机制,就需要给proxy增加一个name属性
        Object.defineProperty(proxy,"name",{
            // 有三个点就代表这个属性是代理出来的
            // 他需要动态获取,在此之前是未知的
            get()
            {
                // 间接访问目标对象的属性
                return target.name;
            },
            set(value)
            {
                // 修改代理对象就可以改目标对象
                target.name = value;
            }
        });
        // 这就是我们的VM对象实现代理的底层方式
        // let target = {
        //     name : "zhangSan"
        // };
        // const vm = new Vue({
        //     el : "#app",
        //     data : target
        // });
        const vm = new Vue({
            el : "#app",
            data : {
                // 这里也是依赖get和set实现的获取值
                msg : "Hello!!!",
                // vue实例不会给以_和$符号开始的属性名做数据代理
                _name : "啊哈哈哈",
                $age : 20
                // 因此data的属性名字不能以$和_开始作为属性名
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="../js/vue.js"></script>

</head>

<body>





<div id="app">

<h1>{{msg}}</h1>

</div>

<script>

// 目标对象

let target = {

name : "zhangSan"

};

// 代理对象

let proxy = {};

// 那么如果我们需要实现数据代理机制,就需要给proxy增加一个name属性

Object.defineProperty(proxy,"name",{

// 有三个点就代表这个属性是代理出来的

// 他需要动态获取,在此之前是未知的

get()

{

// 间接访问目标对象的属性

return target.name;

},

set(value)

{

// 修改代理对象就可以改目标对象

target.name = value;

}

});

// 这就是我们的VM对象实现代理的底层方式

// let target = {

// name : "zhangSan"

// };

// const vm = new Vue({

// el : "#app",

// data : target

// });

const vm = new Vue({

el : "#app",

data : {

// 这里也是依赖get和set实现的获取值

msg : "Hello!!!",

// vue实例不会给以_和$符号开始的属性名做数据代理

_name : "啊哈哈哈",

$age : 20

// 因此data的属性名字不能以$和_开始作为属性名

}

});

</script>

</body>

</html>