5、Vue_计算属性computed、监听属性watch
2019-09-26 本文已影响0人
猪儿打滚
计算属性：computed
之前例子中，使用过vue的methods，computed和它的效果是一样的。只不过computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而methods在重新渲染的时候，函数总会重新调用执行
所以说，使用computed性能会更好。但是，如果不希望缓存时，就使用methods
- 字符串反转例子
<template>
<div>
<p>{{msgs}}</p>
<p>反转后的值：{{reversedMessage}}</p>
</div>
</template>
<script>
export default {
name: "computed",
data() {
return {
msgs: '反转我吧'
}
},
// 计算属性
computed: {
// 默认是getter
reversedMessage() {
return this.msgs.split('').reverse().join('')
}
}
}
</script>
<style scoped>
</style>
-
computed默认只有getter，不过在需要的时候，也可以定义一个setter
例子，创建一个htnl文件：
var vm = new Vue({
el: '#app',
data: {
name: 'lzl',
age: 18
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.age
},
// setter
set: function (newValue) {
var values= newValue.split(' ')
this.name = values[0]
this.age= values[values.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.age也会被对应更新
vm.site = 'zl 20';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('age: ' + vm.age);
监听属性：watch
-
watch监听属性：监听数据的变化，然后触发对应的方法 - 类型：
{ [key: string]: string | Function | Object | Array } -
[key: string]是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。 - 场景：可以对项目的一些属性进行调试
- 例子：分秒之间的转换，并且文字提示，输入值就触发
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>watch</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="values">
<!-- 绑定属性m和s -->
分：<input type="text" v-model="m"></input><br/>
秒：<input type="text" v-model="s"></input>
</div>
<p id="info"></p>
<script type="text/javascript">
var vm = new Vue(
{
el: '#values',
data: {
m: 0,
s: 0
},
// 监听
watch: {
// watch对象中创建两个方法：
// 触发后，修改m
m: function (val) {
this.m = val;
this.s = this.m * 60;
},
// 触发后，修改s
s: function (val) {
this.m = val / 60;
this.s = val;
}
}
}
);
// $watch是实例方法；如果watch监听中的m发生改变，则执行函数
vm.$watch('m', function (arg1, arg2) {
// 显示结果
document.getElementById('info').innerHTML = "修改前的值是:" + arg2 + "，修改后的值是:" + arg1
})
</script>
</body>
</html>
结果：
watch
- 增加值按钮，增加就触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>counter</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="counter">
<p>值：{{ value }}</p>
<button @click="value++">加1</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#counter',
data:{
value:1
}
});
vm.$watch('value', function (newvalue, oldvalue) {
alert('增加前的值是：'+oldvalue + '，增加后的值是：'+ newvalue )
});
</script>
</body>
</html>
结果：
image.png
