手撕Vue-实现计算属性

合集 - 手写Vue全家桶(16)
1.Vue双向数据绑定原理-上2.Vue双向数据绑定原理-中3.Vue双向数据绑定原理-下4.手撕Vue-构建Vue实例5.手撕Vue-提取元素到内存6.手撕Vue-查找指令和模板7.手撕Vue-编译指令数据8.手撕Vue-编译模板数据9.手撕Vue-监听数据变化10.手撕Vue-数据驱动界面改变上11.手撕Vue-数据驱动界面改变中12.手撕Vue-数据驱动界面改变下13.手撕Vue-界面驱动数据更新14.手撕Vue-实现事件相关指令15.手撕Vue-实现将数据代理到Vue实例
16.手撕Vue-实现计算属性
收起

前言

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

看之前先来改造一下我们的代码基础模板，首先是 example.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 的内容：

this.$computed = options.computed;

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

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 中获取到计算属性的值了，打开浏览器，查看一下效果：

image-20231021223036838

posted @   BNTang  阅读(41)  评论(0)  编辑  收藏  举报
相关博文：
·  手撕Vue-构建Vue实例
·  手撕Vue-实现将数据代理到Vue实例
·  vue--计算属性
·  vue--计算属性
·  Vue学习之--------计算属性（2022/7/9）
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示