Vue3+ts(day03：ref和reactive)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学，可以点心心支持一下哈**（笔记是根据b站上学习的** 尚硅谷的前端视频【 张天禹老师】，记录一下学习笔记，用于自己复盘，有需要学习的可以去b站学习原版视频）

一、ref 创建（基本类型的响应式数据）

• **作用：**定义响应式变量。
• **语法：**let xxx = ref(初始值)。
• 返回值： 一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
• 注意点：

• • JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。

  • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

二、reactive 创建（对象类型的响应式数据）

• 作用： 定义一个响应式对象（基本类型不要用它，要用ref，否则报错）

• **语法：**let 响应式对象= reactive(源对象)。

• **返回值：**一个Proxy的实例对象，简称：响应式对象。

• **注意点：**reactive定义的响应式数据是"深层次"的。

三、ref 创建（对象类型的响应式数据）

• 其实ref接收的数据可以是：基本类型 、对象类型。

• 若ref接收的是对象类型，内部其实也是调用了reactive函数。

四、ref 对比 reactive

宏观角度看：

1. ref用来定义：基本类型数据 、对象类型数据；
2. reactive用来定义：对象类型数据。

区别：

1. ref创建的变量必须使用.value（可以打开设置里面的插件自动添加.value）。
2. reactive重新分配一个新对象，会失去 响应式（可以使用Object.assign去整体替换）。

先安装这个插件，之前老师推荐的插件好像不能用了

然后点击设置，找到扩展，如下图：

在扩展中找到vue，勾选Auto Insert:Dot Value

使用原则：

1. 若需要一个基本类型的响应式数据，必须使用ref。
2. 若需要一个响应式对象，层级不深，ref、reactive都可以。
3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

五、toRefs 与 toRef

• 作用：将一个响应式对象中的每一个属性，转换为ref对象（适用于解构对象时使用）

• 备注：toRefs与toRef功能一致，但toRefs可以批量转换。

• 语法如下：

六、computed

作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。

<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{fullName}}</span> <br>
    <button @click="changeFullName">全名改为：li-si</button>
  </div>
</template>

<script setup lang="ts" name="App">
  import {ref,computed} from 'vue'

  let firstName = ref('zhang')
  let lastName = ref('san')

  // 计算属性------只读取，不修改
  /* let fullName = computed(()=>{
    return firstName.value + '-' + lastName.value
  }) */


  // 计算属性------既读取又修改
  let fullName = computed({
    // 读取
    get(){
      return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val){
      console.log('有人修改了fullName',val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })

  function changeFullName(){
    fullName.value = 'li-si'
  } 
</script>