computed计算属性

computed计算属性，我们在之前课程中已经有所了解了（如果你不够了解的话可以翻一下第一季的基础视频），只不过我们之前是选项式API里面来使用的，这节课我们来看一下在选项式API里面怎么来使用技术属性。

选项api的写法

我们简单回顾一下在选项式API里面的使用方式：

export default {
  data:{
    count:1
  },
  computed:{
    abc(){
      return this.count+1
    }
  },

}

组合式API的写法

我们先来声明一个响应式变量

const name = ref("小朱")

我们使用computed之前我们需要先引入

import {ref,computed} from 'vue'

然后在setup里面定一个新的变量用来接收computed计算得到的新数据，此时computed它是作为一个API来调用的，我们需要往来里面传入一个Function，在这个function里面来写我们的计算逻辑，最后将计算得到新值返回出去。

 const newName = computed(()=>{
     return name.value+"很帅"
 })

如上代码，newName就是我们通过计算属性得到的新值。此时的newName它其实也是响应式的，我们在setup里面return导出，然后template里面就可以直接访问了，例如以下代码。

<template>
  <div>
    {{ newName }}
  </div>
</template>

<script>
import {ref,computed} from 'vue'
export default {
  setup(props,context){
    const name = ref("小朱")

    const newName = computed(()=>{
      return name.value+"很帅"
    })

    return{
     newName
    }
  }
}
</script>

如果我们想要在js里面读取newName的话，我们可以通过newName.value来访问，因为此次它也是一个ref结构的变量。

我们添加一个按钮，给他绑定一个点击事件，然后可以打印newName.value来验证是否能访问到它。

 const handleClick = () => {
    console.log(newName.value)   //===》小朱很帅
 }

修改name，计算属性会自动触发计算，将newName更新为新的值。

 const handleClick = () => {
    name.value="小张"   //===》小朱很帅
 }

此时我们页面上会显示小张很帅。

可写计算属性

计算属性默认是只读的。一般情况下我们想要修改计算属性的值它是不允许的，vue是会给我们报错的。但是在组合式API中，vue还是给我提供修改的方法，在某些特殊场景下你可能需要用到它“可写”能力，我们可以通过同时提供 getter 和 setter 来实现。

我们给computed传入一个对象，并且给它添加get和set属性

const newName = computed({
   get(){
      return name.value+"很帅"  //计算逻辑写在get方法里面 然后返回计算好的数据
   },
   set(newValue){
     //set方法里面可以接收到一个新的值，把这个值赋值给我原始依赖
     //通过修改原始依赖的name来触发new Name的修改
     name.value = newValue  
   }
 })

小建议：虽然选项式API里面为我们提供了计算属性的可写方式，但是为代码的易读性应该谨慎使用。因为我们完全可以通过修改计算属性的依赖项来实习同样的目的

计算属性依赖与reactive对象

计算属性是可以用于所有响应式数据的，怕大家不理解，所以给大家再做一个演示。

<template>
  <div>
    {{ newName }}
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
import {computed, reactive } from 'vue'
export default {
  setup(props,context){
    const userinfo = reactive({ name: "小朱",age:18})

    const newName = computed({
      get(){
        return userinfo.name+"很帅,今天刚满"+userinfo.age
      },
      set(newValue){
        userinfo.name = newValue
      }
    })

    const handleClick = () => {
      newName.value="小王"
    }

    return{
     newName,
     handleClick
    }
  }
}
</script>