【笔记】vue计算属性的一个应用场景
vue计算属性的一个应用场景.md
“知识点不难~不代表可以划水写笔记~详细ing,笔记都能看通,未来用视频讲舒服更多~在积累一段时间
”
从一个需求来引入知识点:
-
两个按钮,分别配置两个方法,Add to A 和Add to B
-
在下面显示 A,B的值
-
再显示 一个常量+A=? 一个常量+B =?
html代码如下~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Vue.js </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<script src="vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1> Computed 计算属性</h1>
<button @click="a++">Add to A</button>
<button @click="b++">Add to B</button>
<p>A - {{ a }}</p>
<p>B - {{ b }}</p>
<p>Age + A = {{ addToA}}</p>
<p>Age + B = {{ addToB}}</p>
</div>
<script src="app.js"></script>
</body>
</html>
“是的你没有看错..我是src引入的vue~,为啥?
因为"vue中文文档''第一句话,不建议比较菜的用vue-cli hhh
”
js代码如下
const vueOne = new Vue({
el:"#vue-app",
data:{
a:0,
b:0,
age:20
},
methods:{
addToA:function(){
console.log('执行了addToA');
return this.a+this.age;
},
addToB:function(){
console.log('执行了addToB');
return this.b+this.age;
}
}
});
代码不难~注意看我在addToA()方法里加了log.addToB()也是,看下控制台输出.
(性能优化当然要想的极端点~)如果我写了1W个方法挂载在页面上~那么每次执行一个不是太浪费性能了~那么咋个办呢?
我都能想到...那Evan必然也知道~
用呗计算属性~代码如下:
“直接把methods的代码复制到computed即可
”
然后你就会遇到这个报错~addToA不是一个函数???我写的函数我能不知道?咋就不是函数嘞?
“这里解释一下,实际上是计算属性执行了一次~然后之后访问的时候只有结果.也就是有缓存,这个缓存不是函数~,不知道也影响不大
”
把这个玩意的括号去了即可.
“这里放个思考哦~ 怎么可以把这个位置写上()小括号,依旧可以正常执行嘞~
”
看结果如下:
原因分析:
今天群里分析的时候有人观点是~「当对应data的属性变化时,才会执行相应的方法」这实际上是比较片面的，实际上是
-
vue会拷贝一份真实的dom，在这个case案例里是下面这几个dom结构，然后操作虚拟的dom
-
当虚拟dom和真实的dom不一样时(因为加载完之后修改,就会引发重新渲染dom.但是vue会先阻塞),才会重新渲染这个不一样的dom,也就会触发这个方法~ -
再详细点就是,我修改了A,会有两个位置变化,第一个p,和第三个p,第三个p中有个addToA()方法,因此一起被触发了.
“不要因为计算属性的这个优势就不停地使用计算属性,一般情况下依旧是使用再methods中的方法
计算属性一般使用在:大量耗时,和需要大量运算的时候使用(such as 搜索,遍历)
”