12.Vue中的数据代理

未来@音律

已于 2022-05-12 10:56:27 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue全家桶从入门到精通文章标签： vue.js 前端 javascript

于 2022-03-17 16:02:35 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/qq_37050372/article/details/123044053

Vue全家桶从入门到精通专栏收录该内容

39 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文详细探讨了Vue中的数据代理，解释了如何通过Object.defineProperty()将data中的属性添加到vm上，并设置了getter和setter。通过实例验证了getter线和setter线的工作原理，展示了数据代理在操作data数据时带来的便利性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Vue中的数据代理说明

上一节我们知道了什么是数据代理之后，那么我们这一节就来看看Vue中是如何应用数据代理的。

下面我们来看一个小例子：

<!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>回顾Object.defineproperty方法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">


    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            da