計算屬性：computed
之前例子中，使用過vue的methods突梦，computed和它的效果是一樣的诫舅。只不過computed是基于它的依賴緩存，只有相關(guān)依賴發(fā)生改變時才會重新取值宫患。而methods在重新渲染的時候刊懈，函數(shù)總會重新調(diào)用執(zhí)行
所以說，使用computed性能會更好撮奏。但是俏讹，如果不希望緩存時，就使用methods
- 字符串反轉(zhuǎn)例子
<template>
<div>
<p>{{msgs}}</p>
<p>反轉(zhuǎn)后的值：{{reversedMessage}}</p>
</div>
</template>
<script>
export default {
name: "computed",
data() {
return {
msgs: '反轉(zhuǎn)我吧'
}
},
// 計算屬性
computed: {
// 默認(rèn)是getter
reversedMessage() {
return this.msgs.split('').reverse().join('')
}
}
}
</script>
<style scoped>
</style>
-
computed默認(rèn)只有getter畜吊，不過在需要的時候，也可以定義一個setter
例子户矢，創(chuàng)建一個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]
}
}
}
})
// 調(diào)用 setter玲献， vm.name 和 vm.age也會被對應(yīng)更新
vm.site = 'zl 20';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('age: ' + vm.age);
監(jiān)聽屬性：watch
-
watch監(jiān)聽屬性：監(jiān)聽數(shù)據(jù)的變化，然后觸發(fā)對應(yīng)的方法 - 類型：
{ [key: string]: string | Function | Object | Array } -
[key: string]是一個對象梯浪，鍵是需要觀察的表達式捌年，值是對應(yīng)回調(diào)函數(shù)。值也可以是方法名挂洛，或者包含選項的對象礼预。Vue 實例將會在實例化時調(diào)用 $watch()，遍歷 watch 對象的每一個屬性虏劲。 - 場景：可以對項目的一些屬性進行調(diào)試
- 例子：分秒之間的轉(zhuǎn)換托酸，并且文字提示，輸入值就觸發(fā)
<!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
},
// 監(jiān)聽
watch: {
// watch對象中創(chuàng)建兩個方法：
// 觸發(fā)后柒巫，修改m
m: function (val) {
this.m = val;
this.s = this.m * 60;
},
// 觸發(fā)后励堡，修改s
s: function (val) {
this.m = val / 60;
this.s = val;
}
}
}
);
// $watch是實例方法；如果watch監(jiān)聽中的m發(fā)生改變堡掏，則執(zhí)行函數(shù)
vm.$watch('m', function (arg1, arg2) {
// 顯示結(jié)果
document.getElementById('info').innerHTML = "修改前的值是:" + arg2 + "应结，修改后的值是:" + arg1
})
</script>
</body>
</html>
結(jié)果：
watch
- 增加值按鈕，增加就觸發(fā)
<!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>
結(jié)果：
image.png
