vue2实现响应式原理（3）

天才小熊猫点、

已于 2022-02-03 18:36:01 修改

阅读量207

点赞数

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

于 2022-01-31 18:22:22 首次发布

本文链接：https://blog.csdn.net/m0_56219678/article/details/122760491

版权

前端笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

接下来我们来说一下，vue里面是如何应用这个数据代理的。

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <div>
            <h1>姓名：{{name}}</h1>
            <h1>年龄：{{age}}</h1>
        </div>
    </div>
</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                name:'孙悟空',
                age:'99'
            }
        }
    })
</script>
</html>

打开浏览器，我们来查看下vm实例。可以看到实例下面的name以及age，这两个都是通过 defineProperty来加上去的。当有人访问vm下的name的时候，就调用getter。把data里面的name拿过来。如果是修改这个name就调用setter，把data里面的name进行修改。

这就是vue的代理。

接下来我们就来验证一下：

我们把data里面的name改成猪八戒，再次到浏览器控制台输出vm。这时候我们可以看到，vm下面的name变成了猪八戒。这也就说明，vm下面的name的确是利用getter方法读取了data里面的name。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <div>
            <h1>姓名：{{name}}</h1>
            <h1>年龄：{{age}}</h1>
        </div>
    </div>
</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                name:'猪八戒',
                age:'99'
            }
        }
    })
</script>
</html>