持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情

前言

现在新项目要使用vue3，然后以前是使用vue2的，就要转成vue3的语法，然后这个过程中遇到一些问题，今天总结下。

vue3

ref

把一个基本类型转成具有响应式的ref对象，这个ref对象有个value。如果要修改这个基本类型，直接赋值value就可以修改。如果你直接赋值对象修改，是无效的。

// 定义
const num = ref(0)

// 修改，有效
num.value = 123

// 修改，无效
num = 123

通过.value修改，最终template上的值也会响应式更新。

但是在template模板上使用时，不用特意加上value。

<div class="home">
    <span>{{num}}</span>
</div>

一般是针对基本类型数据就使用ref,但是也可以针对引用类型使用，赋值的时候同样需要对.value赋值。

const obj = ref({})

// 修改
obj.value.name = '答案cp3'

// 等同于上面
obj.value = {name" '答案cp3'}

不过对象等引用类型更推荐使用下面讲到的reactive。

reactive

针对对象等类型，响应式监听内部的属性变化，变化的时候会同步更新。

const obj = reactive({})

// 修改
obj.name = '答案cp3'

// 修改
obj.age = 18

这里要注意一点，reactive的修改，可以针对属性直接赋值修改，这是有效果的。

但是不能直接对reactive的对象直接赋值，这会丢失响应式，并不会响应式更新。

let obj = reactive({})

const clickFn = () => {
  obj = { name: '答案cp3' } // 无效
}

执行clickFn的时候，obj并不会在template上实时更新。

所以只能针对它的key去做赋值操作。

const clickFn = () => {
  obj.name = '答案cp3' // 有效
}

toRefs

这个toRefs是把reactive对象从proxy对象转成普通对象，然后内部的key都转成ref对象（上面的ref）。

    const obj = reactive({ name: '答案cp3' })
    const refsObj = toRefs(obj)
    console.log(obj, refsObj)
    console.log(isRef(refsObj.name))

因为它内部的属性都是ref对象，所以你对它们解构都是有响应式的

  <span @click="clickFn">{{name}}</span>
  
  setup () {
    const obj = reactive({ name: '答案cp3' })
    const refsObj = toRefs(obj)
    const clickFn = () => {
      refsObj.name.value = 'hello world'
    }
    return {
      clickFn,
      ...refsObj
    }
  }

执行clickFn函数，name就会变成hello world。

使用vue3总结的几个知识点

前言

vue3

ref

reactive

toRefs