欢迎您来到Ganace 的个人博客。
在茫茫互联网的海洋里能够遇见您，实在是一份不小的幸运。
诚挚地向您问候一声:您好，朋友！
这里是属于Ganace个人的隐秘小空间，记录了工作学习中遇到的知识点与灵感，以及生活中的碎碎念与吐槽、突如其来的中二病、尬尬的文艺时间、锻炼腹肌的时刻、惊喜的小发现等等。
想要在自己的平淡无奇的人生长河中留下些什么，
或者只是为了拯救老人家岌岌可危的记忆力，
仅此而已。
来到此地，分享与你。
也期待与您的再次相遇！
有任何的分享或者建议与吐槽，都可以Email我：ganace@foxmail.com
欢迎您的来信！
前段时间因为工作需要学习了前端Vue框架，目前有正在开发的项目也是用的Vue框架，有了一定程度的开发经验，现在有一点空闲时间，正好总结梳理一下Vue的一些学习笔记。第五篇，内容包括Vue的一些基础学习：Vue的计算属性和事件监听。
计算属性的缓存：计算属性只调用一次之后缓存起来，当this.firstName和this.lastName中有改变时，才再次调用然后缓存
<div id="app">
<p>{{ fullName }}</p>
<!-- setter&getter -->
<p>{{ fullName1 }}</p>
</div>
<script src="../common/js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
firstName: '夏目',
lastName: '贵志',
},
computed: {// computed计算属性
// 计算属性单独调取get方法的简写
fullName: function () {
console.log('fullName');
return this.firstName + ' ' + this.lastName;
},
// setter&getter
// 计算属性一般没有set方法，只读属性
// 单独调取get方法，例如上fullName方法
fullName1: {
set: function (newValue) {
console.log('set', newValue);
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function () {
return this.firstName + ' ' + this.lastName;
}
}
},
});
</script>
computed计算属性只有第一次调用时会计算，之后只要data数据没有发生改变，每次调用都会返还缓存的计算结果，调用N次计算1次，性能较高。
methods方法每次调用都会重新计算，调用N次计算N次，没有缓存，性能不高。
<div id="app">
<p>{{ getFullName() }}</p>
<p>{{ getFullName() }}</p>
<p>{{ getFullName() }}</p>
<p>{{ getFullName() }}</p>
<p>{{ fullName }}</p>
<p>{{ fullName }}</p>
<p>{{ fullName }}</p>
<p>{{ fullName }}</p>
</div>
<script src="../common/js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
firstName: '夏目',
lastName: '贵志',
},
// computed计算属性
computed: {
fullName: function () {
console.log('fullName');
return this.firstName + ' ' + this.lastName;
},
},
methods: {
getFullName: function () {
console.log('getFullName');
return this.firstName + ' ' + this.lastName;
}
},
});
</script>