手撕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 中获取到计算属性的值了，打开浏览器，查看一下效果：
手撕Vue-实现计算属性的更多相关文章
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- vue的计算属性
在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- Vue.js 计算属性
Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- Vue之计算属性
上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...
- Vue.js 计算属性的秘密
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...
随机推荐
- 自然语言处理 Paddle NLP - 机器同传技术及应用-理论
基础 自然语言处理(NLP) 自然语言处理PaddleNLP-词向量应用展示 自然语言处理(NLP)-前预训练时代的自监督学习 自然语言处理PaddleNLP-预训练语言模型及应用 自然语言处理Pad ...
- JSP开发模式（四种模式）
原作者为 RioTian@cnblogs, 本作品采用 CC 4.0 BY 进行许可,转载请注明出处. 学习编程开发少不了学习开发模式, JSP在创立至今有 \(4\) 种流行的开发模式: 包括 JS ...
- Educational Codeforces Round 110 (Rated for Div. 2) （AB签到，C题双指针，D题DP好题）
补题链接:Here 1535A. Fair Playoff 四名选手参加了季后赛.比赛按以下方案进行:第一名选手与第二名选手比赛,第三名选手与第四名选手比赛,然后两人中的获胜者进入决赛. 众所周知,在 ...
- Python日常学习
学习算法和数据结构之余开始接触python,目前正在学习语法部分,这篇blog记录下一些知识点和放一些文档 or 教程的传送门. 文档网站 Python 解释器内置函数 Python速成 from O ...
- 【收藏】Stable Diffusion 制作光影文字效果
大家对于最近 Stable Diffusion 不断出新的视觉"整活"印象都很深刻,很多人对最近比较流行的制作光影文字很感兴趣,制作光影文字可以作为进阶 Stable Diffus ...
- C语言基础之基础的输入输出
前言 学一门编程语言,不能编写让用户输入数据然后输出处理后的数据的程序那么就等于没学,而在C语言中可以用printf() 和 scanf() 函数进行输入和输出操作.这两个函数是内置的库函数,定义在 ...
- docker 安装 ETCD 及 etcd 使用
本文为博主原创,未经允许不得转载: etcd 是 CoreOS 团队发起的一个开源项目(Go 语言,其实很多这类项目都是 Go 语言实现的,只能说很强大),实现了分布式键值存储和服务发现,etcd 和 ...
- zookeeper 节点介绍及节点常用命令总结
本文为博主原创,未经允许不得转载: 目录: 1. znode 节点特性 2. zookeeper 的四种节点类型及适用场景分析 3. zookeeper 客户端常用操作命令 4. znode 数据增删 ...
- JS - 兼容到 IE 8
使用 jQuery可以有效的兼容IE 浏览器 , 但jQuery从2.0开始不兼容IE8,最低支持IE9,所以需要引入更低的jQuery版本来兼容 <script type="text ...
- Go-环形链表
package main import "fmt" // 环形单向链表 // 特征: 首尾相连 // 实现: 结构体 + 指针 // 1. 构建环形单向链表,类似单向链表,不过he ...