ref 与 reactive

ref 与 reactive与react的useState类似，返回一个响应式对象，官方推荐ref用来存简单类型，reactive存储复杂类型

setup(){
  const count = ref(0) // js简单类型
  const obj = reactive({ count: 0 }) // js复杂类型（对象，数组）
}

社区推荐写法

社区推荐一个组件，使用一个reactive，不去定义多个ref

<template>
  <span>{{tagViewHeight}}</span>
  <span>{{skyList.a}}</span>
</template>
  setup() {
    // 之前的做法需要定义5个ref，这样使用一个reactive，统一对状态进行管理
    const state = reactive({
        tagViewHeight: '',
        skyList: {a: 1},
        dBtnList: [1,2,3],
        myCharts: [],
    });
    
    return {
       ...toRefs(state) 
    }
}

reactive 注意点

1. 不能重新赋值，重新赋值失去了响应式

setup () {
  let person = reactive({ name:'刘备'})
    // 调用changePerson方法，可以看到页面使用的person.name字段并不会更新
    function changePerson(){
      person={name:'张飞'}
    }
    return {
      person,
      changePerson
    }
    }

正确做法:

setup () {
  let person = reactive({ name:'刘备'})
    function changePerson(){
      // 单个字段去赋值
      person.name= '张飞'
    }
    return {
      person,
      changePerson
    }
}

toRefs

对响应式对象进行包装，确保使用扩展符解构后，仍具有响应式
参考：

• VUE3 reactive与toRefs函数 (opens new window)

<template>
  <span>{{foo}}</span>
  <span>{{bar}}</span>
</template>

setup () {
  const state = reactive({
    foo: 1,
    bar: 2
  })
  // ......
  
  return {
    ...toRefs(state), 
  }
}

Vue3中shallowReactive 与 shallowRef 的用法

Vue3中shallowReactive 与 shallowRef 的用法 (opens new window)