手撕Vue-实现将数据代理到Vue实例

合集 - 手写Vue全家桶(16)

1.Vue双向数据绑定原理-上2023-09-272.Vue双向数据绑定原理-中2023-09-303.Vue双向数据绑定原理-下2023-09-304.手撕Vue-构建Vue实例2023-10-035.手撕Vue-提取元素到内存2023-10-146.手撕Vue-查找指令和模板2023-10-157.手撕Vue-编译指令数据2023-10-158.手撕Vue-编译模板数据2023-10-159.手撕Vue-监听数据变化2023-10-1510.手撕Vue-数据驱动界面改变上2023-10-1511.手撕Vue-数据驱动界面改变中2023-10-1512.手撕Vue-数据驱动界面改变下2023-10-1913.手撕Vue-界面驱动数据更新2023-10-2114.手撕Vue-实现事件相关指令2023-10-21

15.手撕Vue-实现将数据代理到Vue实例2023-10-21

16.手撕Vue-实现计算属性2023-10-21

收起

前言

经过上一篇文章的学习，完成了 v-on 指令的实现，接下来我们来实现将数据代理到 Vue 实例上。

为什么要完成这个功能呢？因为我们在使用 Vue 的时候，可以直接通过 this.xxx 的方式来访问 data 中的数据，这样就不用每次都去访问 data 中的数据了，这样就方便了很多。

现在在 myFn 函数中，通过 this.xxx 的方式来访问 data 中的数据，发现访问得到的是 undefined，这是因为我们还没有实现将数据代理到 Vue 实例上。

myFn() {
    alert('myFn被执行了');
    console.log(this.name);
},

运行浏览器，点击 div，观察控制台输出，发现 this.name 的值为 undefined。

接下来我们来实现将数据代理到 Vue 实例上。

代码实现

在构建 Nue 实例的时候，将 data 中的数据代理到 Vue 实例上，单独创建一个 proxyData 方法，代码如下：

proxyData() {
    for (let key in this.$data) {
        Object.defineProperty(this, key, {
            get() {
                return this.$data[key];
            }
        });
    }
}

proxyData 方法中，通过 for in 循环遍历 data 中的数据，然后通过 Object.defineProperty 方法将 data 中的数据代理到 Vue 实例上。

接下来在构建 Nue 实例的时候，调用 proxyData 方法，代码如下：

this.proxyData();

运行浏览器，点击 div，观察控制台输出，发现 this.name 的值为 BNTang，说明数据代理到 Vue 实例上成功了，这样我们就可以通过 this.xxx 的方式来访问 data 中的数据了。