Vu3爬坑指南

1、引入vue文件报错（因为velur插件）

问题：

image.png

解决：

image.png

取消选中后关闭文件，推荐使用volar插件

2、reactive 直接赋值后失去响应式

如果reactive 是个数组

const arr = reactive（[]）
arr.length=0
arr.push(...new Array)

如果是个对象

 Object.assign(formState,res.data) 

或者多嵌套一层

 let a=reactive({a:{id:1,name:'小明'}})

3、toRaw、markRaw 、 toRef 和 toRefs 的作用、用法、区别

1、
toRaw 将响应式对象转化为普通对象
markRaw 使用markRaw包裹之后的对象，永远不能转成响应式数据，即使使用ref包裹。页面不会发生改变
注意点：前提不先使用 reactive 包裹
2、
toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref，而且它既保留了响应式，也保留了引用，也就是你从 reactive 复制过来的属性进行修改后，除了视图会更新，原有 ractive 里面对应的值也会跟着更新，如果你知道 浅拷贝 的话那么这个引用就很好理解了，它复制的其实就是引用 + 响应式 ref
不加 s 和 加 s 的区别就是这样：
toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref

3、
toRefs 可批量创建响应式数据。 直接结构出来的数据，是非响应式的数据，通过toRefs定义为响应式数据。
（不管是修改解构后的值，或者修改直接的赋的值，都会影响原来的reactive）
应用场景：解构赋值，避免重复定义响应式对象，直接引用使用reactive对象里的属性。

<template>
  <h2>
    reactive-info-greet: {{ info.greet }} 
  </h2>
  // 要带上 .value
  <h2>
    toRefs-rInfo-greet: {{ rInfo.greet.value }}
  </h2>
  <button @click="onChangeGreet">更新</button>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
    setup() {
    let info = reactive({
      name: 'Tony',
      greet: 'Hello'
    })
    // 复制整个 info
    let rInfo = toRefs(info)
    // 更改 rInfo.greet
    const onChangeGreet = () => {
      rInfo.greet.value = 'world!'
    }
    return {
      info,
      rInfo,
      onChangeGreet
    }
  }
}
</script>

使用toRefs 直接赋值后（没有解构赋值）：
template 要想访问 toRefs 的值，需要带上 .value 如果不带上，就会出现双引号。
template 要想访问 toRef 的值，不需要带上 .value

image.png