Vue3 学习笔记06-计算属性、监听属性

1.计算属性

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

<template>
    <p>原始字符串: {{ message }}</p>
    <p>计算后反转字符串: {{ reversedMessage }}</p>
</template>
 
 
<script>
export default {
    data() {
        return {
            message: 'RUNOOB!!'
        }
    },
    computed: {
    // 计算属性的 getter
      reversedMessage: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
      }
    },
    
}
</script>
 
<style>
 
</style>

效果图：

2.监听属性

Vue3 监听属性 watch，我们可以通过 watch 来响应数据的变化。

案例：千米与米之间的换算

<template>
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</template>
 
 
<script>
export default {
    // V-model实现数据的双向绑定
    data() {
      return {
        kilometers : 0,
        meters:0
      }
    },
    watch : {
      kilometers:function(val) {
          this.kilometers = val;
          this.meters = this.kilometers * 1000
      },
      meters : function (val) {
          this.kilometers = val/ 1000;
          this.meters = val;
      }
      
   }
    
}
</script>
 
<style>
 
</style>

效果图：