感受Vue3的魔法力量

近半年有幸參與了一個創新專案，由於沒有任何歷史包袱，所以選擇了Vue3技術棧，總體來說感受如下：

當然也遇到一些問題，最典型的就是響應式相關的問題

響應式篇

本篇主要藉助watch函式，理解ref、reactive等響應式資料/狀態，有興趣的同學可以檢視Vue3原始碼部分加深理解，

watch資料來源可以是ref (包括計算屬性)、響應式物件、getter 函式、或多個數據源組成的陣列

import { ref, reactive, watch, nextTick } from 'vue'

//定義4種響應式資料/狀態
//1、ref值為基本型別
const simplePerson = ref('張三') 
//2、ref值為引用型別，等價於：person.value = reactive({ name: '張三' })
const person = ref({
    name: '張三'
})
//3、ref值包含巢狀的引用型別，等價於：complexPerson.value = reactive({ name: '張三', info: { age: 18 } })
const complexPerson = ref({ name: '張三', info: { age: 18 } })
//4、reactive
const reactivePerson = reactive({ name: '張三', info: { age: 18 } })

//改變屬性，觀察以下不同情景下的監聽結果
nextTick(() => { 
    simplePerson.value = '李四' 
    person.value.name = '李四' 
    complexPerson.value.info.age = 20
    reactivePerson.info.age = 22
})

//情景一：資料來源為RefImpl
watch(simplePerson, (newVal) => {
    console.log(newVal) //輸出：李四
})
//情景二：資料來源為'張三'
watch(simplePerson.value, (newVal) => { 
    console.log(newVal) //非法資料來源，監聽不到且控制檯告警 
})
//情景三：資料來源為RefImpl，但是.value才是響應式物件，所以要加deep
watch(person, (newVal) => { 
    console.log(newVal) //輸出：{name: '李四'}
},{
    deep: true //必須設定，否則監聽不到內部變化
}) 
//情景四：資料來源為響應式物件
watch(person.value, (newVal) => { 
    console.log(newVal) //輸出：{name: '李四'}
})
//情景五：資料來源為'張三'
watch(person.value.name, (newVal) => { 
    console.log(newVal) //非法資料來源，監聽不到且控制檯告警 
})
//情景六：資料來源為getter函式，返回基本型別
watch(
    () => person.value.name, 
    (newVal) => { 
        console.log(newVal) //輸出：李四
    }
)
//情景七：資料來源為響應式物件（在Vue3中狀態都是預設深層響應式的）
watch(complexPerson.value.info, (newVal, oldVal) => { 
    console.log(newVal) //輸出：Proxy {age: 20} 
    console.log(newVal === oldVal) //輸出：true
}) 
//情景八：資料來源為getter函式，返回響應式物件
watch( 
    () => complexPerson.value.info, 
    (newVal) => { 
        console.log(newVal) //除非設定deep: true或info屬性被整體替換，否則監聽不到
    }
)
//情景九：資料來源為響應式物件
watch(reactivePerson, (newVal) => { 
    console.log(newVal) //不設定deep: true也可以監聽到 
})

總結：

Props篇

設定預設值

type Props = {
  placeholder?: string
  modelValue: string
  multiple?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  placeholder: '請選擇',
  multiple: false,
})

雙向繫結（多個值）

//FieldSelector.vue
type Props = {
 businessTableUuid: string
 businessTableFieldUuid?: string
}
const props = defineProps<Props>()
const emits = defineEmits([
 'update:businessTableUuid',
 'update:businessTableFieldUuid',
])
const businessTableUuid = ref('')
const businessTableFieldUuid = ref('')
// props.businessTableUuid、props.businessTableFieldUuid轉為本地狀態，此處省略
//表切換
const tableChange = (businessTableUuid: string) => {
 emits('update:businessTableUuid', businessTableUuid)
 emits('update:businessTableFieldUuid', '')
 businessTableFieldUuid.value = ''
}
//欄位切換
const fieldChange = (businessTableFieldUuid: string) => {
 emits('update:businessTableFieldUuid', businessTableFieldUuid)
}

<template>
  <FieldSelector
    v-model:business-table-uuid="stringFilter.businessTableUuid"
    v-model:business-table-field-uuid="stringFilter.businessTableFieldUuid"
  />
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const stringFilter = reactive({
  businessTableUuid: '',
  businessTableFieldUuid: ''
})
</script>

單向資料流

邏輯/UI解耦篇

利用Vue3的Composition/組合式API，將某種邏輯涉及到的狀態，以及修改狀態的方法封裝成一個自定義hook，將元件中的邏輯解耦，這樣即使UI有不同的形態或者調整，只要邏輯不變，就可以複用邏輯。下面是本專案中涉及的一個真實案例-邏輯樹元件，UI有2種形態且可以相互轉化。





 

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<TreeNode[]>(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,
  }
}

//元件1
<template>
  <UI1 
    :logic="logic"
    :on-add="handleAdd"
    :on-remove="handleRemove"
    :toggle-operator="toggleOperator"  
  </UI1>
</template>
<script setup lang="ts">
  import { useDynamicTree } from '@/hooks/useDynamicTree'
  const { add, remove, toggleOperator, tree: logic, dfs } = useDynamicTree()
  const handleAdd = () => {
    //新增條件
  }
  const handleRemove = () => { 
    //刪除條件 
  }
  const toggleOperator = () => { 
    //切換邏輯關係：且、或  
   }
</script>

//元件2 
<template> 
  <UI2 :logic="logic" 
    :on-add="handleAdd" 
    :on-remove="handleRemove" 
    :toggle-operator="toggleOperator"
  </UI2> 
</template> 
<script setup lang="ts"> 
  import { useDynamicTree } from '@/hooks/useDynamicTree' 
  const { add, remove, toggleOperator, tree: logic, dfs } = useDynamicTree() 
  const handleAdd = () => { //新增條件 } 
  const handleRemove = () => { //刪除條件  } 
  const toggleOperator = () => { //切換邏輯關係：且、或  } 
</script>

Pinia狀態管理篇

將複雜邏輯的狀態以及修改狀態的方法提升到store內部管理，可以避免props的層層傳遞，減少props複雜度，狀態管理更清晰

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<UserInfo>({
    userName: '',
    realName: '',
    headImg: '',
    organizationFullName: ''
  })
  const fullName = computed(() => {
    return `${userInfo.userName}[${userInfo.realName}]`
  })
  const setUserInfo = (info: UserInfo) => {
    Object.assgin(userInfo, {...info})
  }
  return {
    userInfo,
    fullName,
    setUserInfo
  }
})

<template>
  <div class="welcome" font-JDLangZheng>
    <el-space>
      <el-avatar :size="60" :src="userInfo.headImg ? userInfo.headImg : avatar"> </el-avatar>
      <div>
        <p>你好，{{ userInfo.realName }}，歡迎回來</p>
        <p style="font-size: 14px">{{ userInfo.organizationFullName }}</p>
      </div>
    </el-space>
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from '@/stores/user'
  import avatar from '@/assets/avatar.png'
  const { userInfo } = useUserStore()
</script>