vue3 新特性 / 新用法 / 新写法及注意点

1watch / watchEffect

watch 监听 ref 及 reactive 的区别，二者具体用法如下。

监听 ref

watch(state, (newValue, oldValue) => {
  console.log(`原值为${oldValue}`)
  console.log(`新值为${newValue}`)
})

监听 reactive

const state = reactive({ count: 0 })
watch(() => state.count, (newValue, oldValue) => {
  console.log(`原值为${oldValue}`)
  console.log(`新值为${newValue}`)
})

watchEffect

const state = reactive({ count: 0, name: 'zs' })
watchEffect(() => {
  console.log(state.count)
  console.log(state.name)
})

何时使用 watch、watchEffect，二者区别

// watch 典型用法：deep + immediate 配置
watch(
  symbolDataList,
  newVal => {
    if (!newVal.length) return;
    symbolDataListObjData.symbolDataList = [...newVal];
  },
  {
    deep: true,
    immediate: true
  }
);

// watchEffect 典型用法：自动收集依赖
watchEffect(() => {
  console.log(state.count)
  console.log(state.name)
})

2getCurrentInstance proxy

由于 vue3 不会提供 this 选项，在处理路由时会获取当前的路由列表，可如下操作：

import { defineComponent, onMounted, ref, watch, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance()!;
const routeList = proxy?.$router.getRoutes() || [];
routeList.forEach(item => {
  if (item.meta.menu && item.children && item.children.length > 0) {
    item.children = item.children.filter(sonItem => {
      return !sonItem.meta?.hidden;
    });
    menuList.value.push(item);
  }
});