版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/shine_a/article/details/88054497
1、computed里面定义reversedMessage方法
computed里面定义的reversedMessage方法依赖于data()里面的message变量,当message发生改变时,依赖于message的reversedMessage也会更新。如果message没有变化,执行reversedMessage方法时就会直接取缓存中的值,不会再次执行,我们通过打印时间戳console.log(Date.now())
来看一下实际的效果
<template>
<div id="app">
<!-- 执行三次reversedMessage方法 -->
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
message: 'Hello'
}
},
computed: {
reversedMessage: function () {
console.log(Date.now())
return this.message.split('').reverse().join('')
}
}
}
</script>
页面打印结果:
控制台打印结果:
我们可以看出控制台只打印出一条时间戳信息,我们虽然执行了三次reversedMessage方法,但是因为message没有变化,所以只会真正执行一次reversedMessage方法。
2、methods里面定义reversedMessage方法
methods里面定义reversedMessage方法不依赖于data()中定义的message变量,所以不管message变量是否变化,reversedMessage方法都会重新执行。
<template>
<div id="app">
<!-- 执行三次reversedMessage方法 -->
<p>Reversed message: "{{ reversedMessage() }}"</p>
<p>Reversed message: "{{ reversedMessage() }}"</p>
<p>Reversed message: "{{ reversedMessage() }}"</p>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
message: 'Hello'
}
},
methods: {
reversedMessage: function () {
console.log(Date.now())
return this.message.split('').reverse().join('')
}
}
}
</script>
页面打印结果:
控制台打印结果:
我们可以看出控制台打印出了3条时间戳信息,因为执行了三次reversedMessage方法,虽然message没有变化,但是methods里面定义的reversedMessage方法不依赖于message的变化。