Vue 的数据代理机制

最新推荐文章于 2025-04-28 19:57:57 发布

cg5017

最新推荐文章于 2025-04-28 19:57:57 发布

阅读量420

点赞数 12

分类专栏： Vue 前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84080967/article/details/147419875

版权

前端同时被 2 个专栏收录

13 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

2025/4/22

向

一、什么是数据代理机制

通过访问代理对象的属性，来间接访问目标对象的属性，数据代理机制的实现需要依赖Object.defineProperty()方法。

如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>初识VM</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        // 目标对象
        let target = {
            name : "apple"
        }

        // 代理对象
        let proxy = {}

        // 使用object.defineProperty 为代理对象新增属性
        Object.defineProperty(proxy,'name',{
            get : function() {
                return target.name
            },
            set : function(val){
                target.name = val
            }
        })
    </script>
    
</body>
</html>

建立的目标对象，代理对象，依赖Object.defineProperty()方法实现了访问访问代理对象的属性，来间接访问目标对象的属性。

二、进一步解释vm.msg

<script>
    const vm = new Vue({
        el : "#app",
        data :{
            msg : "hello vue!"
        }
    })
</script>
                  ||
                  || 
                  \/  
<script>
    let obj = {
            msg : "hello vue!"
    }
    const vm = new Vue({
        el : "#app",
        data : obj 
    })
</script>

为什么如上代码，我们可以通过vm.msg放问到该属性，为什么可以通过vm.msg访问到obj.的属性呢，其实vm就类似于是一个目标对象，vue框架会自动的把 data 选项中的属性转换为响应式属性，同时将这些属性代理到 Vue 实例上，通过Object.defineProperty()方法实现。