为什么 Vue2 this 能够直接获取到 data 和 methods ? 源码揭秘！

最新推荐文章于 2024-05-09 01:56:06 发布

若川视野

最新推荐文章于 2024-05-09 01:56:06 发布

阅读量1.1k

点赞数 4

本文链接：https://blog.csdn.net/u012384510/article/details/120465865

版权

1. 前言

大家好，我是若川。最近组织了源码共读活动《1个月，200+人，一起读了4周源码》，已经有超50+人提交了笔记，群里已经有超1200人，感兴趣的可以点此链接扫码加我微信 ruochuan12

之前写的《学习源码整体架构系列》jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4十余篇源码文章。其中最新的三篇是：

50行代码串行Promise，koa洋葱模型原来是这么实现？

Vue 3.2 发布了，那尤雨溪是怎么发布 Vue.js 的？

初学者也能看懂的 Vue3 源码中那些实用的基础工具函数

写相对很难的源码，耗费了自己的时间和精力，也没收获多少阅读点赞，其实是一件挺受打击的事情。从阅读量和读者受益方面来看，不能促进作者持续输出文章。所以转变思路，写一些相对通俗易懂的文章。其实源码也不是想象的那么难，至少有很多看得懂。歌德曾说：读一本好书，就是在和高尚的人谈话。同理可得：读源码，也算是和作者的一种学习交流的方式。

本文源于一次源码共读群里群友的提问，请问@若川，“为什么 data 中的数据可以用 this 直接获取到啊”，当时我翻阅源码做出了解答。想着如果下次有人再次问到，我还需要回答一次。当时打算有空写篇文章告诉读者自己探究原理，于是就有了这篇文章。

阅读本文，你将学到：

1. 如何学习调试 vue2 源码
2. data 中的数据为什么可以用 this 直接获取到
3. methods 中的方法为什么可以用 this 直接获取到
4. 学习源码中优秀代码和思想，投入到自己的项目中

本文不难，用过 Vue 的都看得懂，希望大家动手调试和学会看源码。

看源码可以大胆猜测，最后小心求证。

2. 示例：this 能够直接获取到 data 和 methods

众所周知，这样是可以输出我是若川的。好奇的人就会思考为啥 this 就能直接访问到呢。

const vm = new Vue({
    data: {
        name: '我是若川',
    },
    methods: {
        sayName(){
            console.log(this.name);
        }
    },
});
console.log(vm.name); // 我是若川
console.log(vm.sayName()); // 我是若川

那么为什么 this.xxx 能获取到data里的数据，能获取到 methods 方法。

我们自己构造写的函数，如何做到类似Vue的效果呢。

function Person(options){

}

const p = new Person({
    data: {
        name: '若川'
    },
    methods: {
        sayName(){
            console.log(this.name);
        }
    }
});

console.log(p.name);
// undefined
console.log(p.sayName());
// Uncaught TypeError: p.sayName is not a function

如果是你，你会怎么去实现呢。带着问题，我们来调试 Vue2源码学习。

3. 准备环境调试源码一探究竟

可以在本地新建一个文件夹examples，新建文件index.html文件。在<body></body>中加上如下js。

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
    const vm = new Vue({
        data: {
            name: '我是若川',
        },
        methods: {
            sayName(){
                console.log(this.name);
            }
        },
    });
    console.log(vm.name);
    console.log(vm.sayName());
</script>

再全局安装npm i -g http-server启动服务。

npm i -g http-serve

最低0.47元/天解锁文章

若川视野

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
为什么 Vue2 this 能够直接获取到 data 和 methods ? 源码揭秘！

1. 前言大家好，我是若川。最近组织了源码共读活动《1个月，200+人，一起读了4周源码》，已经有超50+人提交了笔记，群里已经有超1200人，感兴趣的可以点此链接扫码加我微信ruoch...
复制链接

扫一扫