感受Vue3的魔法力量

一、前言

近半年有幸参与了一个创新项目，由于没有任何历史包袱，所以选择了Vue3技术栈，总体来说感受如下：

• setup语法糖

  单向数据流

  1. 大部分情况下应该遵循【单向数据流】原则，禁止子组件直接修改props，否则复杂应用下的数据流将变得混乱，极易出现bug且难排查；

  2. 直接修改props会有告警，但是如果props是引用类型，修改props内部值将不会有告警提示，因此应该有团队约定（第5条除外）；

  3. 如果props为引用类型，赋值到子组件状态时，需要解除引用（第5条除外）；

  4. 复杂的逻辑，可以将状态以及修改状态的方法，封装成自定义hooks或者提升到store内部，避免props的层层传递与修改；

  5. 一些父子组件本就紧密耦合的场景下，可以允许修改props内部的值，可以减少很多复杂度和工作量（需要团队约定固定场景）；

  四、逻辑/UI解耦篇

  利用Vue3的Composition/组合式API，将某种逻辑涉及到的状态，以及修改状态的方法封装成一个自定义hook，将组件中的逻辑解耦，这样即使UI有不同的形态或者调整，只要逻辑不变，就可以复用逻辑。下面是本项目中涉及的一个真实案例-逻辑树组件，UI有2种形态且可以相互转化。
  

  

  • hooks部分的代码：useDynamicTree.ts

  import { ref } from 'vue'
  import { nanoid } from 'nanoid'
  export type TreeNode = {
   id?: string
   pid: string
   nodeUuid?: string
   partentUuid?: string
   nodeType: string
   nodeValue?: any
   logicValue?: any
   children: TreeNode[]
   level?: number
  }
  export const useDynamicTree = (root?: TreeNode) => {
    const tree = ref(root ? [root] : [])
    const level = ref(0)
    //添加节点
    const add = (node: TreeNode, pid: string = 'root'): boolean => {
      //添加根节点
      if (pid === '') {
        tree.value = [node]
        return true
      }
      level.value = 0
      const pNode = find(tree.value, pid)
      if (!pNode) return false
      //嵌套关系不能超过3层
      if (pNode.level && pNode.level > 2) return false
      if (!node.id) {
        node.id = nanoid()
      }
      if (pNode.nodeType === 'operator') {
        pNode.children.push(node)
      } else {
        //如果父节点不是关系节点，则构建新的关系节点
        const current = JSON.parse(JSON.stringify(pNode))
        current.pid = pid
        current.id = nanoid()
        Object.assign(pNode, {
          nodeType: 'operator',
          nodeValue: 'and',
          // 重置回显信息
          logicValue: undefined,
          nodeUuid: undefined,
          parentUuid: undefined,
          children: [current, node],
        })
      }
      return true
    }
    //删除节点
    const remove = (id: string) => {
      const node = find(tree.value, id)
      if (!node) return
      //根节点处理
      if (node.pid === '') {
        tree.value = []
        return
      }
      const pNode = find(tree.value, node.pid)
      if (!pNode) return
      const index = pNode.children.findIndex((item) => item.id === id)
      if (index === -1) return
      pNode.children.splice(index, 1)
      if (pNode.children.length === 1) {
        //如果只剩下一个节点，则替换父节点（关系节点）
        const [one] = pNode.children
        Object.assign(
          pNode,
          {
            ...one,
          },
          {
            pid: pNode.pid,
          },
        )
        if (pNode.pid === '') {
          pNode.id = 'root'
        }
      }
    }
    //切换逻辑关系：且/或
    const toggleOperator = (id: string) => {
      const node = find(tree.value, id)
      if (!node) return
      if (node.nodeType !== 'operator') return
      node.nodeValue = node.nodeValue === 'and' ? 'or' : 'and'
    }
    //查找节点
    const find = (node: TreeNode[], id: string): TreeNode | undefined => {
      // console.log(node, id)
      for (let i = 0; i < node.length; i++) {
        if (node[i].id === id) {
          Object.assign(node[i], {
            level: level.value,
          })
          return node[i]
        }
        if (node[i].children?.length > 0) {
          level.value += 1
          const result = find(node[i].children, id)
          if (result) {
            return result
          }
          level.value -= 1
        }
      }
      return undefined
    }
    //提供遍历节点方法，支持回调
    const dfs = (node: TreeNode[], callback: (node: TreeNode) => void) => {
      for (let i = 0; i < node.length; i++) {
        callback(node[i])
        if (node[i].children?.length > 0) {
          dfs(node[i].children, callback)
        }
      }
    }
    return {
      tree,
      add,
      remove,
      toggleOperator,
      dfs,
    }
  }

  • 在不同组件中使用（UI1/UI2组件为递归组件，内部实现不再展开）

  //组件1
  
  

  //组件2 
   
  

  五、Pinia状态管理篇

  将复杂逻辑的状态以及修改状态的方法提升到store内部管理，可以避免props的层层传递，减少props复杂度，状态管理更清晰

  • 定义一个store（非声明式）：User.ts

  import { computed, reactive } from 'vue'
  import { defineStore } from 'pinia'
  type UserInfo = {
    userName: string
    realName: string
    headImg: string
    organizationFullName: string
  }
  export const useUserStore = defineStore('user', () => {
    const userInfo = reactive({
      userName: '',
      realName: '',
      headImg: '',
      organizationFullName: ''
    })
    const fullName = computed(() => {
      return `${userInfo.userName}[${userInfo.realName}]`
    })
    const setUserInfo = (info: UserInfo) => {
      Object.assgin(userInfo, {...info})
    }
    return {
      userInfo,
      fullName,
      setUserInfo
    }
  })

  •在组件中使用

  问题讨论

  1. Vue2中可以做到逻辑与UI分离吗？如果有，有哪些缺点？

  2. 什么场景下可以约定允许修改props内部的值？

  欢迎留言进行讨论

  -end-