Vue.js的核心学习笔记 - 第五章侦听器和计算属性教程
前言
今天我们来学习一下Vue中的侦听器和计算属性:Watch(侦听器)、Computed(计算属性)
侦听器和计算属性是Vue中比较常用的功能了。
- 侦听器一般围绕着Vue中的动态数据 是否响应式改变的监听方式。
- 计算属性一般简化在网页中较为复杂的JavaScript表达式,计算属性在某种机制上跟方法(Method)相似,在下面我会介绍一下关于方法与计算属性的区别。
侦听器(watch)
简介:对于动态数据的一个监听
代码实例:
<!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>Vue.js的核心学习笔记 - 第五章侦听器和计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 侦听器 -->
<div class="vue_watch">
<span>msg: {{msg}}</span>
<span>watch后的input表单</span>
<input type="text" :placeholder="msg">
</div>
</div>
</body>
<script type="text/javascript">
// 定义Vue
var vue = new Vue({
el: "#app",
methods:{
},
// 数据
data:{
message: "一条默认消息",
value: 2,
msg: "消息"
},
// 侦听器
watch:{
msg: function(newMsg,oldMsg)
{
console.log("监听修改前:" + oldMsg);
console.log("监听修改后:" + newMsg);
if(newMsg == "test"){
console.log("修改为test");
}
}
},
// 计算属性
computed:{
// 计算参数值
computedValue: function(){
// 初始化5
var val = 5;
var values = this.value + val;
console.log(values);
// 初始化的参数值+我们给定的一个五 结果为7
return values;
},
//计算属性默认带一个get方法,那我们用计算属性也可以增加一个set方法
newComputedValue:{
get: function(){
return this.value;
},
set: function(newValue){
console.log("set 前: " + this.value);
this.value = newValue;
console.log("set 后:" + this.value);
}
}
}
})
</script>
</html>
计算属性(Computed)
简介:对于一些JS的表达式可以放在里面进行处理,并且内部可以封装set get方法。
前面提到跟方法(Method)相似。
跟方法的比较
优点
- 独特的缓存机制(多次使用只会执行一次)
缺点
- 由于独特缓存机制而会导致大部分缓存占用。
实例:
<!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>Vue.js的核心学习笔记 - 第五章侦听器和计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 计算属性 -->
<div class="vue_computed">
<span>message:{{message}}</span>
<span>计算属性给出的结果:{{computedValue}}</span>
<span>另一种方式的计算参数值:{{newComputedValue}}</span>
</div>
</div>
</body>
<script type="text/javascript">
// 定义Vue
var vue = new Vue({
el: "#app",
methods:{
},
// 数据
data:{
message: "一条默认消息",
value: 2,
msg: "消息"
}
// 计算属性
computed:{
// 计算参数值
computedValue: function(){
// 初始化5
var val = 5;
var values = this.value + val;
console.log(values);
// 初始化的参数值+我们给定的一个五 结果为7
return values;
},
//计算属性默认带一个get方法,那我们用计算属性也可以增加一个set方法
newComputedValue:{
get: function(){
return this.value;
},
set: function(newValue){
console.log("set 前: " + this.value);
this.value = newValue;
console.log("set 后:" + this.value);
}
}
}
})
</script>
</html>
结束语
回到目录点我 序章