computed 计算属性

1. 计算属性

• 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
• 计算属性是基于它们的响应式依赖进行缓存的
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

<template>
  <div id="app">
    <p> {{ msg }} </p>
    <p> {{ reverseString }} </p>
    <p> {{ reverseString }} </p>
  </div>

</template>

<script>
    export default {
      data(){
          return{
              msg: 'hello'
          }
      },
      computed:{
          reverseString(){
          	// 缓存原因，只打印一次
          	  console.log(1)
              // 反转字符串
              return this.msg.split('').reverse().join('')
          }
      }
    }
</script>

2. 计算属性和方法的区别

计算属性有缓存，方法没有缓存

3. get set

<template>
    <div>
        <input type="text" v-model="firstname">
        <input type="text" v-model="lastname">
        <input type="text" v-model="fullname">
    </div>
</template>

<script>
    export default {
        data(){
            return{
                firstname: 'A',
                lastname: 'B',
            }
        },

        computed:{
            fullname:{
                // 数据改变时获取fullname
                get(){
                    return this.firstname + ' ' + this.lastname
                },
                // 监视fullname的变化  和watch一样
                set(value){
                    const name = value.split(' ');
                    this.firstname = name[0];
                    this.lastname = name[1]
                }
            }
        }
    }
</script>