vue中的数据代理

最新推荐文章于 2024-01-10 20:23:08 发布

原创最新推荐文章于 2024-01-10 20:23:08 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

笔记专栏收录该内容

35 篇文章

订阅专栏

本文介绍Vue.js中的数据代理概念及其实现方式。通过一个简单的示例展示了如何使用Vue实例代理data对象中的属性，并解释了这一机制带来的便利性，包括如何通过getter/setter操作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>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>名称:{{name}}</h2>
        <h2>地址:{{address}}</h2>
    </div>
    <script>
        Vue.config.productionTip = false;
        // 1.Vue中的数据代理
        //     通过vm对象代理对data对象中属性的操作
        // 2.Vue中数据代理的好处
        //     更加方便的操作data中的数据
        // 3.基本原理
        //     通过Object.defineproperty()把data对象中所有的属性添加在vm上。
        //     为每一个添加到vm上的属性都指定一个getter/setter
        //     在getter/setter内部去操作data中对应的属性
        const vm = new Vue({
            // el: '#root',
            data() {
                return {
                    name: 'vue',
                    address: '深圳'
                }
            }
        })
        vm.$mount('#root');//data中的数据挂载在root容器中
    </script>
</body>

</html>

vue中的数据代理