Vue原理解析:Vue 实例如何实现代理 data 对象属性的访问

对于初学Vue.js的小伙伴而言,可能会认为Vue实例是一个很神奇的东西!因为它除了帮助我们完成双向绑定之外,还在某些细节方面为我们增加了一些理解上面的小烦恼!希望通过这篇文章能够为勤勉的你解惑~

看一段简单代码先:

new Vue({
    el:"#myApp",
    data:{
        userName:"laoWangTou",
        age:16
    },
    methods:{
        run(){
            // 输出结果:laoWangTou今年16岁了
            console.log(this.userName+"今年"+this.age+"岁了");
        }
    },
    created(){
        // this为什么可以调用methods的run方法?
        this.run();
    }
})

对于以上代码可能会有两个小疑问:
1、为什么钩子函数中的 this.run 可以调用到methods对像下的方法run?
2、为什么methods对象下的run方法可以通过this获得data下的属性?
要弄明白这两个问题首先你要明白下面几个点:

  • this即是通过Vue生成的实例vm
const vm = new Vue({
    el:"#myApp",
    created(){
        console.log(vm === this);// true
    }
})
  • $data与data是相等的
const data ={};
const vm = new Vue({
    el:"#myApp",
    data,
    created(){
        console.log(this.$data === data);// true
    }
})
console.log(vm.$data === data);// true
  • $data的属性被修改,vm实例下的属性也会发生相应的变化
const vm = new Vue({
    el:"#myApp",
    data:{
        userName:"laoWangTou",
        age:16
    },
    created(){
        this.$data.userName = "xiaoZhang"
        this.$data.age = 18;
        // 输出结果:xiaoZhang今年18岁了
        console.log(this.userName+"今年"+this.age+"岁了");
    }
})
// 输出结果:xiaoZhang今年18岁了
console.log(vm.userName+"今年"+vm.age+"岁了");

通过之前的两个疑问及得到的个结论,咱们可以先来个小猜测:

1、通过Vue生成的实例中有一属性为$data,其值为接收对象的data值
2、vm实例中代理了data的属性
3、methods下的方法赋值给了vm实例

于是,结合Vue.js的源码模拟出了以下较易理解的代码:

// 定义了一个构造函数
function Vue(options) {
    this.$data = options.data || {};
    this.initState(options);
}
Vue.prototype.initState = function (opts) {
    if(opts.data)
        this.initData(opts.data);
    if(opts.methods)
        this.initMethods(opts.methods);
    if(opts.created)
        opts.created.call(this);
}
Vue.prototype.initData = function (data) {
    var keys = Object.keys(data);
    var i = keys.length;
    while (i--){
        const key = keys[i];
        this.proxy("$data",key);
    }
}
Vue.prototype.initMethods = function (methods) {
    for (var key in methods) {
        this[key] = methods[key];
    }
}
Vue.prototype.proxy =function(sourceKey, key) {
    Object.defineProperty(this, key, {
        get() {
            return this[sourceKey][key]
        },
        set(val){
            this[sourceKey][key] = val;
        }
    });
};

验证:

const vm = new Vue({
    el:"#myApp",
    data:{
        userName:"laoWangTou",
        age:16
    },
    methods:{
        run(){
            // 输出结果:laoWangTou今年16岁了
            console.log(this.userName+"今年"+this.age+"岁了");
        }
    },
    created(){
        // this为什么可以调用methods的run方法?
        this.run();
    }
});
// 输出结果:laoWangTou今年16岁了
console.log(vm.userName+"今年"+vm.age+"岁了");

—————END—————

喜欢本文的朋友们,欢迎关注公众号 张培跃,收看更多精彩内容

已标记关键词 清除标记
相关推荐
<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本课程内容包含讲解<span>解读Nginx的基础知识,</span><span>解读Nginx的核心知识、带领学员进行</span>高并发环境下的Nginx性能优化实战,让学生能够快速将所学融合到企业应用中。 </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><br /> </b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"><span id="__kindeditor_bookmark_start_21__"></span></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方式:电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a>,播放页面右侧点击课件进行资料打包下载 </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页