<div id="app">
<!-- 1、通过字符串直接拼接，一般不适用，语法过于繁琐-->
<h2>{{firstName+' '+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<!-- 2、直接定义methods函数-->
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<!-- 3、通过computed计算属性-->
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<!-- 其中2和3相比看起来差不多，当时当进行多次调用的时候就开始不一样了
2在每次调用的时候都会重新执行一下函数，
3在每次调用的时候只要执行一次属性中的函数就可以了，计算机对其进行了缓存，
每次调用的时候它会进行比较属性值是否发生改变，如果没有改变，那么直接返回，如果改变，就重新调用。
所以相比之下3的性能是要高于2的，这也是为什么大多数情况下要使用3而不用2。
-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName:'lebron',
lastName:'james'
},
computed:{
fullName:function () {
console.log('fullName')
return this.firstName+' '+this.lastName
}
},
methods:{
getFullName:function () {
console.log('getFullName()')
return this.firstName+' '+this.lastName
}
}
})
</script>
Processed:
0.018, SQL:
9
