手撕Vue-实现计算属性

前言

经过上一篇的学习, 完成了将数据代理到了 Nue 的实例上方,这个我们已经撕完了。接下来要实现的是计算属性,计算属性的实现原理是通过 Object.defineProperty() 来实现的,我们先来看看计算属性的使用。

看之前先来改造一下我们的代码基础模板,首先是 example.html 的内容如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本模板</title>
    <script src="js/nue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ getName }}</p>
</div>

<script>
    let vue = new Nue({
        el: document.querySelector('#app'),
        data: {
            name: "BNTang"
        },
        computed: {
            getName() {
                return this.name + "- 666";
            }
        }
    });
</script>
</body>
</html>

导入的 Nue.js 是我们之前写的这里不在贴代码,好了,我编写了一个计算属性,用模板语法的方式进行了渲染,页面肯定是显示 undefined 的,因为我们还没有实现计算属性的功能,接下来我们就来实现计算属性的功能。

在实现之前,我们来分析一下计算属性的编写思路, 当我们在 computed 编写了一个计算属性名称,比如 getName,这个时候呢我使用的是模板 {``{}} 进行调用,那么我们去看一下模板的渲染源代码,在其中是可以拿到 getName 的,这个时候我们的 getContent 是从 Nue 中的 data 中去获取的,那我是不是可以在创建 Nue 实例时,将 computed 中的内容也放到 data 中呢?这样的话,我在 getContent 中就可以拿到了,那么我们就来实现一下吧。

将 computed 中的内容放到 data 中,我们可以在 Nue 的构造函数中进行实现,首先将 computed 的内容存储起来,然后在 data 中进行合并,代码如下:

存储 computed 的内容:

javascript 复制代码
this.$computed = options.computed;

将 computed 中的方法添加到 data 中, 只有这样将来我们在渲染的时候才能从 data 中获取到 computed 中定义的计算属性,定义一个 computed2data 方法单独来处理:

javascript 复制代码
computed2data() {
    for (let key in this.$computed) {
        Object.defineProperty(this.$data, key, {
            get: () => {
                return this.$computed[key].call(this);
            }
        });
    }
}

这里我们使用了 Object.defineProperty() 来实现,这里的 get 方法就是我们在模板中调用计算属性时,获取计算属性的值,这里的 this.$computed[key] 就是我们在 computed 中定义的方法,然后我们调用这个方法,这里的 this 是指向 Nue 的实例的,所以我们需要使用 call 来改变 this 的指向,这样我们就可以在模板中调用计算属性了。

好了,我们现在已经将计算属性的内容添加到了 $data 中,那么我们就可以在 getContent 中获取到计算属性的值了,打开浏览器,查看一下效果:

相关推荐
萌萌哒草头将军几秒前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆9 分钟前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试
江城开朗的豌豆17 分钟前
JavaScript中的instanceof:你的代码真的认识'自家孩子'吗?
前端·javascript·面试
JinSo19 分钟前
create-easy-editor —— 快速搭建你的可视化编辑器
前端·前端框架·github
coding随想24 分钟前
深入浅出JavaScript中的ArrayBuffer:二进制数据的“瑞士军刀”
javascript
Watermelo61728 分钟前
【前端实战】如何让用户回到上次阅读的位置?
前端·javascript·性能优化·数据分析·哈希算法·哈希·用户体验
Auscy36 分钟前
JavaScript 数组学习总结
开发语言·javascript·学习
zhaoyang03013 小时前
css3笔记 (1) 自用
前端·javascript·css·vue.js·笔记·html·css3
开开心心就好3 小时前
免费PDF转图片软件
javascript·智能手机·pdf·flask·word·excel·scikit-learn
珎珎啊3 小时前
CSS3 常用功能详细使用指南
前端·css·css3