例如:
<template>
<view>
{{fullText}}
<button type="primary" @click="click">change</button>
{{name}}
</view>
</template>
<script>
export default {
data() {
return {
firstText: 'hello',
lastText: 'world',
fullText:'hello world',
name: 'qq'
}
},
methods: {
click() {
this.firstText = 'tt'
},
// fullText() {
// console.log('方法')
// return this.firstText + ' ' + this.lastText;
// }
},
watch:{
firstText() {
console.log('监听')
this.fullText = this.firstText + ' ' + this.lastText;
},
lastText() {
console.log('监听')
this.fullText = this.firstText + ' ' + this.lastText;
}
}
// computed:{
// fullText(){
// console.log('计算属性')
// return this.firstText + ' ' + this.lastText;
// }
// }
}
</script>
<style>
</style>
1、对于计算属性来说,当计算属性中的值(firstText、lastText)发生改变的时候,则计算属性中的相关方法(fullText)将被触发
2、对于监听来说,当变量值(firstText、lastText)发生改变的时候,监听中变量值的监听方法(firstText、lastText)将被触发
3、对于方法来说,当页面发生重新渲染的时候,方法将被重新执行
网友评论