<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>
Comparaison des fonctions calculées et méthodes en vue
Je suppose que tu aimes
Origine blog.csdn.net/nanzai11111/article/details/108966816
conseillé
Classement