vue的computed用法

最近浏览到一篇文章发现computed可以结构props的值，于是写了一个小demo使用computed的解构赋值。

1.父组件: 引用了一个子组件，使用props向子组件传递数据count，默认值为0，父组件还有一个changeCount用于改变count数组。

<template>
  <div>
    <div>
      first:
      <First :count-number="count"></First>
      <button @click="changeCount" >change count</button>
    </div>
  </div>
</template>

<script>
import First from "/@/views/MyComputed/component/First.vue";
export default {
  name: "index",
  components:{
    First
  },
  data(){
    return {
      count: 0
    }
  },
  methods:{
    changeCount(){
      this.count ++;
    }
  }
}
</script>
<style scoped>
</style>

2.子组件：在computed中可以解构data和props的值，达到一个缓存数据的效果。有人会问了，使用this指针也可以达到这个效果为什么要使用解构赋值呢，这就和响应式数据有关了，当我们调用this.变量名就会触发getter，就会执行依赖收集等操作，但是解构出来的局部变量并不用执行依赖收集而是等数据发生变化时执行computed做数据改变。

<template>
  <div>
    <div>
      <ul>
        <li>1.{{ title }} {{ count }}</li>
        <li>2.{{ titleAndCount }}</li>
        <li>3.{{ changeText() }}</li>
        <li>4.{{ funcText }}</li>
      </ul>
    </div>
<!--    <div>-->
<!--      {{arrayNumber}}-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: "First",
  props:{
    countNumber: {
      type: Number,
      default: 0
    },
    arrayNumber: {
      type: Array,
      default: []
    }
  },
  data(){
    return{
      strTitle: 'Count'
    }
  },
  computed:{
    title({strTitle}){
      return strTitle + ':';
    },
    count({countNumber}){
      return countNumber;
    },
    titleAndCount({strTitle,countNumber}){
      return strTitle + ':' + countNumber;
    },
    funcText({changeText}){
      return changeText();
    }
  },
  methods:{
    changeText(){
      return this.strTitle + ':' + this.countNumber;
    }
  }
}
</script>

<style scoped>

</style>

3.结果:当点击了count改变时数据都发生了变化。

4.总结：computed可以解构出props、data，甚至是函数都可以解构。

文章想法来源：

黄奕老师《揭秘 Vue.js 九个性能优化技巧》中的Local variables https://juejin.cn/post/6922641008106668045#heading-1