Vue入门【三】-- 详解computed计算属性
目录
computed:
♡ ‧₊˚ 基本使用 ‧₊˚ ♡
♡ ‧₊˚语法‧₊˚ ♡
♡ ‧₊˚效果‧₊˚ ♡
♡ ‧₊˚ 面试问点 ‧₊˚ ♡
computed与methods的区别：
computed与watch的区别：
computed:
首先我们要知道computed计算属性是什么，在vue.js的官方文档中是这样解释的：
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example"> {{ message.split('').reverse().join('') }} </div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量
message的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。
所以 computed计算属性 就是用来处理复杂逻辑的，注意：是建议/可以，而不是必须使用。
♡ ‧₊˚ 基本使用 ‧₊˚ ♡
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
<br>
{{total}}
</div>
<script>
new Vue({
el: "#app",
data() {
return {
a: 1,
b: 4,
};
},
computed: {
total() {
return this.a + this.b;
},
},
methods: {},
});
</script>
</body>
</html>♡ ‧₊˚语法‧₊˚ ♡
// 语法
computed: {
计算属性名 () {
return 值
}
}♡ ‧₊˚效果‧₊˚ ♡
且当input输入框内的数字发生变化时，下方的total值也会随之发送改变。
♡ ‧₊˚ 面试问点 ‧₊˚ ♡
- computed与methods的区别：
计算属性有依赖缓存 如果值没有发生变化是不会重新调用计算属性
methods没有缓存 每一个调用都会重新执行/渲染 发送异步请求
计算属性不处理异步请求
实例：
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
{{total}}
{{total}}
{{total}}
{{total}}
{{str()}}
{{str()}}
{{str()}}
{{str()}}
</div>
<script>
new Vue({
el:"#app",
data:{
a:5,
b:6,
},
computed:{
total(){
console.log('计算属性');
return 111;
}
},
methods:{
str(){
console.log('方法');
return 222;
}
}
})
</script>
</body>
</html>
可以看到“计算属性”只打印了一次，而“方法”打印了四次， 因此得知：计算属性基于依赖项的值进行缓存，只要依赖的变量不变，都直接从缓存取结果，不再重新调用计算属性。
- computed与watch的区别：
相同点是都可以实现通过监控data数据域中属性值的变化来触发相应的回调函数，进而实现我们特殊的逻辑业务处理功能。
-
computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）；
-
computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调 ；
-
使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框。