【金秋打卡】第6天 Vue3 + Typescript 从0到1开发通用基础组件（3-6~3-7）

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：
3-6 vue3 - ref 的妙用
3-7 vue3 reactive

课程讲师：张轩

课程内容：

今天课程学习的主要知识点内容包括：
1、vue3 - ref 的使用；
2、vue3 - reactive 的使用；

课程收获：

通过学习老师的视频课程和同学的公开笔记，主要收获如下：
一、vue3 - ref 的使用

<script lang="ts">
import { ref } from 'vue'
export default {
  name:'App',
  setup() {
    const count = ref(0)
    const increase = () => {
      count.value++
    }
    return {
      count
    }
  }
};
</script>

1、setup的意思是准备，它是在props、data、computed、methods 、生命周期函数之前运行的。在setup方法中，无法访问this。

2、在setup中返回的数据，我们要精确的控制哪些数据和方法要被导出使用。在vue2 方法都是写在methods中的，vue3则是直接写在setup上。

3、count是个响应式对象，count.value才是值。

4、值是存在value里的，但在template上可以直接使用count显示，实因为vue中对一个ref对象在模板中引用的时候，它可以直接帮忙把里面的值展示出来。

二、vue3 - reactive 的使用

const data: DataProps = reactive({
  count:0,
  increase: () => {data.count++},
  double: computed(() => data.count *2)
})
const refData toRefs(data)
return {
  ...refData
}

1、ref ：声明一个基本类型的响应数据声明

2、reactive:声明一个引用类型的响应数据（如果将里面的值抽出单独使用会丢失响应特性）

3、toRefs: 可以将通过 toRefs(reactive)进行转化赋值给一个新变量，解决丢失响应特征