前言

本文意在浅谈computed在实际应用的场景以及与watch区别！！！

computed计算属性🥬

1.1 概述🍀

计算属性归根结底也是属性，它也是跟表现层是时刻同步的，虽然我们可以在插值中对数据进行各种处理，但是插值中的表达式处理毕竟只能用于简单的运算，不能拥有太多的业务逻辑。

1.2 应用场景🍂

当一个变量的值，需要用另一个变量计算而得来---就可以使用计算属性computed

1.3 注意点🌵

• 计算属性和data属性都是变量-两者里的属性值不能重名！函数内变量变化，不需要手动修改，会自动重新计算结果返回

写法如下 👇--（具体使用哪种，需看需求使用）

正常情况下，计算属性中的每一个属性对应的都是一个对象，对象中包括了set方法与get方法

1. 给计算属性赋值的时候触发set函数
2. 获取计算属性的时候触发get函数 简单写法 🐟 - 计算属性没有set方法，是一个只读属性

computed: {
    "计算属性名"(){
        return "值"
    }
}

> 需求: 求2个数的和显示到页面上

看一个栗子🌰：

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      a: 10,
      b: 20
    }
  },
  computed: {
    num(){
      return this.a + this.b
    }
  }
}
</script>
<style>
</style>

完整写法 🐟

computed: {
    "属性名":{
        set(值){

        },
        get(){
            return "值"
        }
    }
}

> 需求: 获取input文本框的内容

看一个栗子🌰：

<template>
  <div>
      <input type="text" v-model="full">
  </div>
</template>

<script>
export default {
data () {
    return {
        fullData=''
    }
},
computed: {
    full:{
        set(val){
         this.fullData=val
        },
        get(){
         return this.fullData
        }
    }
}
}
</script>

<style>

</style>

计算属性缓存vs方法🙇‍♂️🙇‍♂️

计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变，都可以直接从缓存取结果

请看代码实例👇

<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg: "Hello, Vue"
    }
  },
  computed: {
    reverseMessage(){
      console.log("计算属性执行了");
      return this.msg.split("").reverse().join("")
    }
  },
  methods: {
    getMessage(){
      console.log("函数执行了");
      return this.msg.split("").reverse().join("")
    }
  }
}
</script>

<style>

</style>

计算属性优势 🤏：

🥝 带缓存，计算属性对应函数执行后，会把return值缓存起来

🍇 依赖项不变，多次调用都是从缓存取值

🍌 依赖项值-变化，函数会自动重新执行-并缓存新的值，比普通方法性能更高

计算属性vs侦听器watch🙇‍♀️🙇‍♀️

> 需求: 将名字显示到页面

侦听器watch代码👇

<template>
  <div >{{ fullName }}</div>
</template>
<script>
export default {
  data () {
    return {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
}
</script>

计算属性代码👇

<template>
  <div >{{ fullName }}</div>
</template>
<script>
export default {
  data () {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

区别🥬

• 侦听器watch代码是命令式且重复，计算属性反之

• watch可以进行异步操作--（定时器），计算属性不可操作

• 两个重要小原则：

1.所被vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象

2. 所有不被vue所管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件对象

结语

计算属性computed和侦听器watch在vue开发中还算常用的，computed能完成的功能，watch都可以完成，反之则不行。以上文章分享仅是我个人的理解，如果以上文章有写的不恰当的地方，还望各位大神指点！！