Vue3 计算属性的特性
computed:里面的方法
仅当依赖的值发生变动时，才会重新进行计算
这样一来解决的是性能问题
而methods里面的方法，哪怕无关值发生变动，也会重新进行计算
下面是两组对比
1-通过distance()计算属性来计算路程
2-通过getDis()方法计算路程
3-通过timestamp()得到时间戳
4-通过getTsp()得到时间戳
另：addTime()方法是为了增加时间
效果如下
点击按钮，1、2、4发生改变
完整html代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo12:计算属性的特性</title> <script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="app"></div>
<script>const app = Vue.createApp({data(){return{time:0.5,speed:18,nobody:"干扰项",}},computed:{distance(){return this.time*this.speed;},timestamp(){return Date.now();}},methods:{getDis(){return this.time*this.speed;},getTsp(){return Date.now();},addTime(){this.time += 0.5},},template:`<h1>1-distance():{{distance}}km</h1><h1>2-getDis():{{getDis()}}km</h1><h1>3-timestamp():{{timestamp}}</h1><h1>4-getTsp():{{getTsp()}}</h1><button @click="addTime">增加时间</button> `})const vm = app.mount('#app')
</script>
<style>.one{color:green;}.two{color:red;}
</style>
</html>相关文章：
解读源码中的问题
1.HashMap 构建中如何保证容量为 2 的幂次方 static final int tableSizeFor(int cap) {int n cap - 1;n | n >>> 1;n | n >>> 2;n | n >>> 4;n | n >>> 8;n | n >>> 16;return (n < 0) ? 1 : (n > MAXIMUM_CAPACITY) ?…
User Profile Data Web Part 读取属性字段
User Profile Data Web Part Property NameDisplay NameUserProfile_GUIDIdSIDSIDADGuidActive Directory IDAccountName帐户名FirstName名字SPS-PhoneticFirstName拼音名LastName姓氏SPS-PhoneticLastName拼音姓PreferredName名称SPS-PhoneticDisplayName拼音显示姓名WorkPho…
Linux 环境变量配置
linux 环境，用户通过shell 操作时，系统会为用户初使化环境变量， 比如系统公共资源路径: path , include , bin 等目录。 shell 模式下，执行 export ， 查看用户环境变量 , echo $key 查询某个环境变量。设置环境变量&am…
Android 自定义View之3D骰子旋转
你可以指定立方体中每一面骰子的点数，颜色和背景，同时也可以指定执行的动画时间和动画插值器 更多有趣的view 使用 在根目录的build.gradle添加这一句代码： allprojects {repositories {//...maven { url https://jitpack.io }} } 复制代码在…
职业生涯的考虑
职业核心价值：活的有价值，有意义 第一阶段：技术（27:2012～30:2015）：移动互联网 第二阶段：销售或者管理（30:2015～35:2020）：成熟公司 第三…
算法的sound和complete
stackoverflow的答案 Soundness and Completeness of a algorithm stackexchange的答案 What does it mean to say an algorithm is Sound and Complete?
ArcGIS API for Silverlight 入门学习笔记（三）：基础地图实例
该实例主要是包含六部分：地图范围、坐标、动画效果、全屏、比例尺、进度条。 前期准备工作 前台代码0 <UserControl x:Class"APIforSilverlightSamp.s2" xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x"ht…
BZOJ 4009 接水果
Description 风见幽香非常喜欢玩一个叫做osu!的游戏，其中她最喜欢玩的模式就是接水果。 由于她已经DT FC了The big black, 她觉得这个游戏太简单了，于是发明了一个更加难的版本。首先有一个地图，是一棵由\(n\)个顶点、\(n-1\)条边组成的树。这…
GitBook本地的安装与查看
1.安装nodejs 2.cnpm install -g gitbook-cli 查看版本：gitbook -V 3.gitbook init 注意npm加了代理，查看npm代理配置，将其注释即可 执行完后，你会看到多了两个文件 —— README.md 和 SUMMARY.md，它们的作用如下&…
用C++的random_shuffle()函数打乱int数组顺序
程序背景： 开组会，汇报人已确定，出一个随机的汇报顺序。 #include<bits/stdc.h> using namespace std;const int NUM 12;//汇报人数 int main() {string names[] {"SpongeBob","Patrick","Squidward"…
ios 绘制不规则 图形
最近才知道有一个软件 paintcode 它可以根据画出的图形自动的生成对应的 OC 代码 不用UI切图 我们也可以用代码实现自己想要的图形效果 使用教程可以百度：paintcode教程 http://blog.csdn.net/lujunelong/article/details/18899925 下载地址：http://www…
[转]Windows与VC命名规则
转自：http://hi.baidu.com/11158512/blog/item/0fbd5535cbfb5d1c91ef3970.html 匈牙利命名法是一种编程时的命名规范。基本原则是：变量名＝属性＋类型＋对象描述。其中每一对象的名称都要求有明确含义，可以取对…
恢复误删的进程在使用的文件【转】
转自：https://www.cnblogs.com/276815076/p/5473185.html 原理：在Linux系统的/proc 分区下保存着进程的目录和名字，包含fd(文件描述符)和其下的子目录（进程打开文件的链接），那么如果删除了一个文件…
编解码器架构中的桥(bridge)指什么
https://opennmt.net/OpenNMT-py/examples/Summarization.html?highlightbridge对于bridge做出如下解释 bridge: This is an additional layer that uses the final hidden state of the encoder as input and computes an initial hidden state for the decoder.…
控件包含代码块，因此无法修改控件集合
文章转载至: http://www.olnote.com/itlife/note/100000003.aspx控件包含代码块(即<% ... %>)，因此无法修改控件集合。 说明: 执行当前 Web 请求期间，出现未处理的异常。请检查堆栈跟踪信息，以了解有关该错误以及代码中导致错误的出处…
驰骋工作流引擎JFlow与activiti的对比之4种包含多实例的模式
为什么80%的码农都做不了架构师？>>> 4种包含多实例的模式 无同步的多实例（MIwithout）在流程中，一个活动可以激活多个实例，每个实例相互独立，并不需要在后面进行同步。 例子：比如用户…
Embarcadero Dev C++ 中文输出乱码
解决方式：保证编译器和文件的编码方式一样。 1. 编译器的编码方式 Embarcadero Dev C 界面 2. cpp文件编码方式 Notepad界面
关于登录记住密码使用cookie的详解
下面是我看的一篇文章引用过来，很易懂 设置cookie每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：document.cookie"userId828";如果要一次存储多个名/值对，可以使用分号加空格（;…
Linux服务器---安装tftp-server
安装tftp-server1、安装tftp-server[rootlocalhost weijie]# yum install -y tftp-serverLoaded plugins: fastestmirror, refresh-packagekit, securityRunning TransactionInstalling : tftp-server-0.49-8.el6.i686 1/1 Verifying : tftp…
linux指令 2＞1 到底是个啥
训练好深度学习模型之后对其进行测试，测试的脚本如上图。 我对第11行感到不解，经过检索Linux重定向和文件描述符相关知识后，明白了 2代表着标准错误 1代表者标准输出(默认是屏幕) >代表流向 那么第11行代码的含义也就是，将…
新生 语不惊人死不休 —— 《无限恐怖》读后有感
开篇声明，我博客中“小心情”这一系列，全都是日记啊随笔啊什么乱七八糟的。如果一不小心点进来了，不妨直接关掉。我自己曾经写过一段时间的日记，常常翻看，毫无疑问我的文笔是很差的，而且心情也是瞬息万变的…
中国大学MOOC-C程序设计（浙大翁恺）—— 时间换算
时间换算（10分）题目内容：UTC是世界协调时，BJT是北京时间，UTC时间相当于BJT减去8。现在，你的程序要读入一个整数，表示BJT的时和分。整数的个位和十位表示分，百位和千位表示小时。如果…
作为一个程序员，数学对你到底有多重要(转)
每个计算机系毕业的人，大都学过不少数学课，而且不少学校的计算机系的数学课，通常比一般的其他工科专业的数学要难一些，比如不上高等数学，而是学数学分析，不上线性代数而去上高等代数。但是，大部…
如何在vsc上选择远程miniconda特定的虚拟环境中的Python解释器(4步)
前提： 已经通过remote development插件连上了远程服务器 远程服务器上已经创建了安装了python的虚拟环境 步骤： 点击“查看” 点击“命令面板” 输入/选择 Python:Select Interpreter 然后就能选择远程miniconda中已经创建的虚拟环境了 我的minico…
Java数据类型简单认识
Java是一种强类型编程语言，因而在声明变量的时候必须声明数据类型，java语言有基本数据类型和引用数据类型这两大数据类型，基本数据类型有8种分别是4种整型、2种浮点类型、1种用于Unicode表示字符单元的字符类型和1种表示真值的布尔类型;引用数…
Intel 6系列芯片组设计缺陷 全球出货暂停
美国当地时间周一，Intel公司官方宣布，今年1月初刚刚伴随Sandy Bridge系列“第二代Core架构处理器”推出的6系列芯片组（代号Cougar Point）发现了设计方面的问题。虽然目前Intel已经对该设计在芯片级别进行了修正，但在新…
PrestaShop 网站漏洞修复如何修复
2019独角兽企业重金招聘Python工程师标准>>> PrestaShop网站的漏洞越来越多，该网站系统是很多外贸网站在使用的一个开源系统，从之前的1.0初始版本到现在的1.7版本，经历了多次的升级，系统使用的人也越来越多，…
shell脚本中的case语句使用要点
1.双分号(;;) 用于case语句中一个分支的结束。 可类比C里面switch...case语句，在case语句之后，若所有语句都输完，后面跟着的"break;"。 2.星号加右小括号*) 可类比C里面switch...case语句中的"default:"。 3.结束符…
Netty - ByteBuf
2019独角兽企业重金招聘Python工程师标准>>> 1.ByteBuf类 - Netty的数据容器 ByteBuf维护了两个不同的索引： readerIndex：用于读取writerIndex：用于写入起始位置都从0开始： 名称以read或者write开头的方法会更新ByteBu…