<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中计算属性，方法，侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!--{{fullName()}}-->
{{fullName}}
{{age}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
FirstName: 'alex',
lastName: 'Xu',
fullName: "alex Xu",
age: 25
},
//侦听器 有缓存机制
watch: {
FirstName: function () {
console.log('计算一次');
this.fullName = this.FirstName + ' ' + this.lastName;
},
lastName: function () {
console.log('计算一次');
this.fullName = this.FirstName + ' ' + this.lastName;
}
},
//方法 内部没有缓存机制
methods: {
fullName: function () {
console.log("计算一次");
return this.FirstName + " " + this.lastName
}
},
// 计算属性 用于缓存的 优先选择
computed: {
fullName: function () {
console.log('计算一次'); //如果仅修改年龄 fullName 是不需要重新渲染的
return this.FirstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
<!--
如果一个效果 计算属性 方法 和侦听器都可以实现 优先选择计算属性
-->