vue3.2知识点记录

vue3面试知识点

1.性能更好，体积更小 2.更好的ts支持 3.更好的代码组织，更好的逻辑抽离

beforeDestroy改成beforeUnmount；destroyed改成unmounted

在setup和其他Composition API中没有this，可以通过getCurrentInstance获取当前实例

前者setup只会被调用一次，后者函数会被多次调用(useMemo、useCallback);前者无需顾虑调用顺序，后者要保证hooks的顺序一致

1.抽离逻辑代码到一个函数 2.函数命名约定为useXxx(类似React Hooks) 3.在setup中引用useXxx函数

1.生成值类型的响应式数据 2.可用于模板和reactive(不需要加.value) 3.通过.value修改值

1.返回值类型，会丢失响应式 2.在setup、computed、合成函数，都有可以能返回值类型

1.针对一个响应式对象(reactive封装)的prop，而toRef如果用于非响应式对象，产生的结果不具备响应式

2.创建一个ref，具有响应式

3.两者保持引用关系

setup() {
  const state = reactive({
    name: 'Messi',
    age: 33
  })
  const ageRef = toRef(state,'age')
  return {
    state,
    ageRef
  }
}

1.将响应式对象(reactive封装)转换为普通对象 2.对象的每个prop都是对应的ref 3.两者保持引用关系

setup() {
  const state = reactive({
    name: 'Messi',
    age: 33
  })
  const stateAsRefs = toRefs(state)
  return stateAsRefs  
}

合成函数返回响应式对象

function useXxxx() {
  const state = reactive({
    x: 1,
    y: 2
  })
}

......

//返回时转换为ref
return toRefs(state)

export default {
  setup() {
    //可以在不失去响应式的情况下破坏结构
    const { x, y } = use Xxxx() {
      return {
        x,
        y
      }
    }
  }
}

1.用reactive做对象的响应式，ref做值类型的响应式

2.setup中返回toRefs(state),或者toRef(state, 'xxx')

3.ref的变量名用xxxRef

4.合成函数返回响应式对象，使用toRefs

1.初衷：在不丢失响应式的情况下，把对象数据分解、扩散

2.前提：针对的是响应式对象(reactive封装的)非普通对象

3.不创造响应式，而是延续响应式