日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告：魔扣目錄網為廣大站長提供免費收錄網站服務，提交前請做好本站友鏈：【 網站目錄：http://www.ylptlb.cn 】， 免友鏈快審服務（50元/站），

點擊這里在線咨詢客服
新站提交
  • 網站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會員：747

Vue3 相比于 Vue2 的有哪些“與眾不同”

發布時間：2023-07-03 01:05:44 作者：網友整理

內容混雜用法 + 原理 + 使用小心得，建議收藏，慢慢看。

區別

生命周期的變化

整體來看，變化不大，只是名字大部分需要 + on，功能上類似。使用上 Vue3 組合式 API 需要先引入；Vue2 選項 API 則可直接調用，如下所示。

// vue3
<script setup>     
import { onMounted } from 'vue'

onMounted(() => {
  ...
})
// 可將不同的邏輯拆開成多個onMounted，依然按順序執行，不被覆蓋
onMounted(() => {
  ...
})
</script>

// vue2
<script>     
   export default {         
      mounted() {             
        ...         
      },           
   }
</script>

常用生命周期表格如下所示。

Vue2.xVue3beforeCreateNot needed*createdNot needed*beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestroyonBeforeUnmountdestroyedonUnmounted

Tips： setup是圍繞beforeCreate和created生命周期鉤子運行的，所以不需要顯式地去定義。

多根節點

Vue3 支持了多根節點組件，也就是fragment。

Vue2中，編寫頁面的時候，我們需要去將組件包裹在<div>中，否則報錯警告。

<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

Vue3，我們可以組件包含多個根節點，可以少寫一層，niceeee ！

<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

異步組件

Vue3 提供 Suspense組件，允許程序在等待異步組件時渲染兜底的內容，如 loading ，使用戶體驗更平滑。使用它，需在模板中聲明，并包括兩個命名插槽：default和fallback。Suspense確保加載完異步內容時顯示默認插槽，并將fallback插槽用作加載狀態。

<tempalte>
   <suspense>
     <template #default>
       <todo-list />
     </template>
     <template #fallback>
       <div>
         Loading...
       </div>
     </template>
   </suspense>
</template>

真實的項目中踩過坑，若想在 setup 中調用異步請求，需在 setup 前加async關鍵字。這時，會受到警告async setup() is used without a suspense boundary。

解決方案：在父頁面調用當前組件外包裹一層Suspense組件。

Teleport

Vue3 提供Teleport組件可將部分DOM移動到 Vue App之外的位置。比如項目中常見的Dialog組件。

<button @click="dialogVisible = true">點擊</button>
<teleport to="body">
   <div class="dialog" v-if="dialogVisible">
   </div>
</teleport>

組合式API

Vue2 是 選項式API（Option API），一個邏輯會散亂在文件不同位置（data、props、computed、watch、生命周期函數等），導致代碼的可讀性變差，需要上下來回跳轉文件位置。Vue3 組合式API（Composition API）則很好地解決了這個問題，可將同一邏輯的內容寫到一起。

除了增強了代碼的可讀性、內聚性，組合式API 還提供了較為完美的邏輯復用性方案，舉個，如下所示公用鼠標坐標案例。

// main.vue
<template>
  <span>mouse position {{x}} {{y}}</span>
</template>

<script setup>
import { ref } from 'vue'
import useMousePosition from './useMousePosition'

const {x, y} = useMousePosition()

}
</script>

// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue'

function useMousePosition() {
  let x = ref(0)
  let y = ref(0)
  
  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }
  
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  
  return {
    x,
    y
  }
}
</script>

解決了 Vue2 Mixin的存在的命名沖突隱患，依賴關系不明確，不同組件間配置化使用不夠靈活。

響應式原理

Vue2 響應式原理基礎是Object.defineProperty；Vue3 響應式原理基礎是 Proxy。

Object.defineProperty

基本用法：直接在一個對象上定義新的屬性或修改現有的屬性，并返回對象。
Tips： writable 和 value 與 getter 和 setter 不共存。

let obj = {}
let name = '瑾行'
Object.defineProperty(obj, 'name', {
  enumerable: true, // 可枚舉（是否可通過for...in 或 Object.keys()進行訪問）
  configurable: true, // 可配置（是否可使用delete刪除，是否可再次設置屬性）
  // value: '', // 任意類型的值，默認undefined
  // writable: true, // 可重寫
  get: function() {
    return name
  },
  set: function(value) {
    name = value
  }
})

搬運 Vue2 核心源碼，略刪減。

function defineReactive(obj, key, val) {
  // 一 key 一個 dep
  const dep = new Dep()
  
  // 獲取 key 的屬性描述符，發現它是不可配置對象的話直接 return
  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) { return }
  
  // 獲取 getter 和 setter，并獲取 val 值
  const getter = property && property.get
  const setter = property && property.set
  if((!getter || setter) && arguments.length === 2) { val = obj[key] }
  
  // 遞歸處理，保證對象中所有 key 被觀察
  let childOb = observe(val)
  
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    // get 劫持 obj[key] 的 進行依賴收集
    get: function reactiveGetter() {
      const value = getter ? getter.call(obj) : val
      if(Dep.target) {
        // 依賴收集
        dep.depend()
        if(childOb) {
          // 針對嵌套對象，依賴收集
          childOb.dep.depend()
          // 觸發數組響應式
          if(Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
    }
    return value
  })
  // set 派發更新 obj[key]
  set: function reactiveSetter(newVal) {
    ...
    if(setter) {
      setter.call(obj, newVal)
    } else {
      val = newVal
    }
    // 新值設置響應式
    childOb = observe(val)
    // 依賴通知更新
    dep.notify()
  }
}

那 Vue3 為何會拋棄它呢？那肯定是有一些缺陷的。

主要原因：無法監聽對象或數組新增、刪除的元素。
Vue2 方案：針對常用數組原型方法push、pop、shift、unshift、splice、sort、reverse進行了hack處理；提供Vue.set監聽對象/數組新增屬性。對象的新增/刪除響應，還可以new個新對象，新增則合并新屬性和舊對象；刪除則將刪除屬性后的對象深拷貝給新對象。

Tips： Object.defineOProperty是可以監聽數組已有元素，但 Vue2 沒有提供的原因是性能問題，具體可看見參考第二篇 ~。

Proxy

Proxy是ES6新特性，通過第2個參數handler攔截目標對象的行為。相較于Object.defineProperty提供語言全范圍的響應能力，消除了局限性。但在兼容性上放棄了（IE11以下）

局限性

  1. 對象/數組的新增、刪除。
  2. 監測.length修改。
  3. Map、Set、WeakMap、WeakSet的支持。

基本用法：創建對象的代理，從而實現基本操作的攔截和自定義操作。

const handler = {
  get: function(obj, prop) {
    return prop in obj ? obj[prop] : ''
  },
  set: function() {},
  ...
}

搬運 Vue3 的源碼 reactive.ts 文件

function createReactiveObject(target, isReadOnly, baseHandlers, collectionHandlers, proxyMap) {
  ...
  // collectionHandlers: 處理Map、Set、WeakMap、WeakSet
  // baseHandlers: 處理數組、對象
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}

以 baseHandlers.ts 為例，使用Reflect.get而不是target[key]的原因是receiver參數可以把this指向getter調用時，而非Proxy構造時的對象。

// 依賴收集
function createGetter(isReadonly = false, shallow = false) {
  return function get(target: Target, key: string | symbol, receiver: object) {
    ...
    // 數組類型
    const targetIsArray = isArray(target)
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }
    // 非數組類型
    const res = Reflect.get(target, key, receiver);
    
    // 對象遞歸調用
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res)
    }

    return res
  }
}
// 派發更新
function createSetter() {
  return function set(target: Target, key: string | symbol, value: unknown, receiver: Object) {
    value = toRaw(value)
    oldValue = target[key]
    // 因 ref 數據在 set value 時就已 trigger 依賴了，所以直接賦值 return 即可
    if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
      oldValue.value = value
      return true
    }

    // 對象是否有 key 有 key set，無 key add
    const hadKey = hasOwn(target, key)
    const result = Reflect.set(target, key, value, receiver)
    
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

虛擬DOM

Vue3 相比于 Vue2 虛擬DOM 上增加patchFlag字段。我們借助Vue3 Template Explorer來看。

<div id="app">
  <h1>技術摸魚</h1>
  <p>今天天氣真不錯</p>
  <div>{{name}}</div>
</div>

渲染函數如下。

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue"

const _withScopeId = n => (_pushScopeId("scope-id"),n=n(),_popScopeId(),n)
const _hoisted_1 = { id: "app" }
const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("h1", null, "技術摸魚", -1 /* HOISTED */))
const _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("p", null, "今天天氣真不錯", -1 /* HOISTED */))

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _createElementVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */)
  ]))
}

注意第 3 個_createElementVNode的第 4 個參數即patchFlag字段類型，字段類型情況如下所示。1 代表節點為動態文本節點，那在 diff 過程中，只需比對文本對容，無需關注 class、style等。除此之外，發現所有的靜態節點，都保存為一個變量進行靜態提升，可在重新渲染時直接引用，無需重新創建。

export const enum PatchFlags { 
  TEXT = 1, // 動態文本內容
  CLASS = 1 << 1, // 動態類名
  STYLE = 1 << 2, // 動態樣式
  PROPS = 1 << 3, // 動態屬性，不包含類名和樣式
  FULL_PROPS = 1 << 4, // 具有動態 key 屬性，當 key 改變，需要進行完整的 diff 比較
  HYDRATE_EVENTS = 1 << 5, // 帶有監聽事件的節點
  STABLE_FRAGMENT = 1 << 6, // 不會改變子節點順序的 fragment
  KEYED_FRAGMENT = 1 << 7, // 帶有 key 屬性的 fragment 或部分子節點
  UNKEYED_FRAGMENT = 1 << 8,  // 子節點沒有 key 的fragment
  NEED_PATCH = 1 << 9, // 只會進行非 props 的比較
  DYNAMIC_SLOTS = 1 << 10, // 動態的插槽
  HOISTED = -1,  // 靜態節點，diff階段忽略其子節點
  BAIL = -2 // 代表 diff 應該結束
}

事件緩存

Vue3 的 cacheHandler可在第一次渲染后緩存我們的事件。相比于 Vue2 無需每次渲染都傳遞一個新函數。加一個click事件。

<div id="app">
  <h1>技術摸魚</h1>
  <p>今天天氣真不錯</p>
  <div>{{name}}</div>
  <span onCLick="() => {}"><span>
</div>

渲染函數如下

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue"

const _withScopeId = n => (_pushScopeId("scope-id"),n=n(),_popScopeId(),n)
const _hoisted_1 = { id: "app" }
const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("h1", null, "技術摸魚", -1 /* HOISTED */))
const _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("p", null, "今天天氣真不錯", -1 /* HOISTED */))
const _hoisted_4 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("span", { onCLick: "() => {}" }, [
  /*#__PURE__*/_createElementVNode("span")
], -1 /* HOISTED */))

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _createElementVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    _hoisted_4
  ]))
}

Diff 優化

搬運 Vue3 patchChildren 源碼。結合上文與源碼，patchFlag幫助 diff 時區分靜態節點，以及不同類型的動態節點。一定程度地減少節點本身及其屬性的比對。

function patchChildren(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  // 獲取新老孩子節點
  const c1 = n1 && n1.children
  const c2 = n2.children
  const prevShapeFlag = n1 ? n1.shapeFlag : 0
  const { patchFlag, shapeFlag } = n2
  
  // 處理 patchFlag 大于 0 
  if(patchFlag > 0) {
    if(patchFlag && PatchFlags.KEYED_FRAGMENT) {
      // 存在 key
      patchKeyedChildren()
      return
    } els if(patchFlag && PatchFlags.UNKEYED_FRAGMENT) {
      // 不存在 key
      patchUnkeyedChildren()
      return
    }
  }
  
  // 匹配是文本節點（靜態）：移除老節點，設置文本節點
  if(shapeFlag && ShapeFlags.TEXT_CHILDREN) {
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      unmountChildren(c1 as VNode[], parentComponent, parentSuspense)
    }
    if (c2 !== c1) {
      hostSetElementText(container, c2 as string)
    }
  } else {
    // 匹配新老 Vnode 是數組，則全量比較；否則移除當前所有的節點
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
        patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense,...)
      } else {
        unmountChildren(c1 as VNode[], parentComponent, parentSuspense, true)
      }
    } else {
      
      if(prevShapeFlag & ShapeFlags.TEXT_CHILDREN) {
        hostSetElementText(container, '')
      } 
      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
        mountChildren(c2 as VNodeArrayChildren, container,anchor,parentComponent,...)
      }
    }
  }
}

patchUnkeyedChildren 源碼如下。

function patchUnkeyedChildren(c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  c1 = c1 || EMPTY_ARR
  c2 = c2 || EMPTY_ARR
  const oldLength = c1.length
  const newLength = c2.length
  const commonLength = Math.min(oldLength, newLength)
  let i
  for(i = 0; i < commonLength; i++) {
    // 如果新 Vnode 已經掛載，則直接 clone 一份，否則新建一個節點
    const nextChild = (c2[i] = optimized ? cloneIfMounted(c2[i] as Vnode)) : normalizeVnode(c2[i])
    patch()
  }
  if(oldLength > newLength) {
    // 移除多余的節點
    unmountedChildren()
  } else {
    // 創建新的節點
    mountChildren()
  }
  
}

patchKeyedChildren源碼如下，有運用最長遞增序列的算法思想。

function patchKeyedChildren(c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  let i = 0;
  const e1 = c1.length - 1
  const e2 = c2.length - 1
  const l2 = c2.length
  
  // 從頭開始遍歷，若新老節點是同一節點，執行 patch 更新差異；否則，跳出循環 
  while(i <= e1 && i <= e2) {
    const n1 = c1[i]
    const n2 = c2[i]
    
    if(isSameVnodeType) {
      patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSvg, optimized)
    } else {
      break
    }
    i++
  }
  
  // 從尾開始遍歷，若新老節點是同一節點，執行 patch 更新差異；否則，跳出循環 
  while(i <= e1 && i <= e2) {
    const n1 = c1[e1]
    const n2 = c2[e2]
    if(isSameVnodeType) {
      patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSvg, optimized)
    } else {
      break
    }
    e1--
    e2--
  }
  
  // 僅存在需要新增的節點
  if(i > e1) {    
    if(i <= e2) {
      const nextPos = e2 + 1
      const anchor = nextPos < l2 ? c2[nextPos] : parentAnchor
      while(i <= e2) {
        patch(null, c2[i], container, parentAnchor, parentComponent, parentSuspense, isSvg, optimized)
      }
    }
  }
  
  // 僅存在需要刪除的節點
  else if(i > e2) {
    while(i <= e1) {
      unmount(c1[i], parentComponent, parentSuspense, true)    
    }
  }
  
  // 新舊節點均未遍歷完
  // [i ... e1 + 1]: a b [c d e] f g
  // [i ... e2 + 1]: a b [e d c h] f g
  // i = 2, e1 = 4, e2 = 5
  else {
    const s1 = i
    const s2 = i
    // 緩存新 Vnode 剩余節點 上例即{e: 2, d: 3, c: 4, h: 5}
    const keyToNewIndexMap = new Map()
    for (i = s2; i <= e2; i++) {
      const nextChild = (c2[i] = optimized
          ? cloneIfMounted(c2[i] as VNode)
          : normalizeVNode(c2[i]))
      
      if (nextChild.key != null) {
        if (__DEV__ && keyToNewIndexMap.has(nextChild.key)) {
          warn(
            `Duplicate keys found during update:`,
             JSON.stringify(nextChild.key),
            `Make sure keys are unique.`
          )
        }
        keyToNewIndexMap.set(nextChild.key, i)
      }
    }
  }
  
  let j = 0
  // 記錄即將 patch 的 新 Vnode 數量
  let patched = 0
  // 新 Vnode 剩余節點長度
  const toBePatched = e2 - s2 + 1
  // 是否移動標識
  let moved = false
  let maxNewindexSoFar = 0
  
  // 初始化 新老節點的對應關系（用于后續最大遞增序列算法）
  const newIndexToOldIndexMap = new Array(toBePatched)
  for (i = 0; i < toBePatched; i++) newIndexToOldIndexMap[i] = 0
  
  // 遍歷老 Vnode 剩余節點
  for (i = s1; i <= e1; i++) {
    const prevChild = c1[i]
    
    // 代表當前新 Vnode 都已patch，剩余舊 Vnode 移除即可
    if (patched >= toBePatched) {
      unmount(prevChild, parentComponent, parentSuspense, true)
      continue
    }
    
    let newIndex
    // 舊 Vnode 存在 key，則從 keyToNewIndexMap 獲取
    if (prevChild.key != null) {
      newIndex = keyToNewIndexMap.get(prevChild.key)
    // 舊 Vnode 不存在 key，則遍歷新 Vnode 獲取
    } else {
      for (j = s2; j <= e2; j++) {
        if (newIndexToOldIndexMap[j - s2] === 0 && isSameVNodeType(prevChild, c2[j] as VNode)){
           newIndex = j
           break
        }
      }           
   }
   
   // 刪除、更新節點
   // 新 Vnode 沒有 當前節點，移除
   if (newIndex === undefined) {
     unmount(prevChild, parentComponent, parentSuspense, true)
   } else {
     // 舊 Vnode 的下標位置 + 1，存儲到對應 新 Vnode 的 Map 中
     // + 1 處理是為了防止數組首位下標是 0 的情況，因為這里的 0 代表需創建新節點
     newIndexToOldIndexMap[newIndex - s2] = i + 1
     
     // 若不是連續遞增，則代表需要移動
     if (newIndex >= maxNewIndexSoFar) {
       maxNewIndexSoFar = newIndex
     } else {
       moved = true
     }
     
     patch(prevChild,c2[newIndex],...)
     patched++
   }
  }
  
  // 遍歷結束，newIndexToOldIndexMap = {0:5, 1:4, 2:3, 3:0}
  // 新建、移動節點
  const increasingNewIndexSequence = moved
  // 獲取最長遞增序列
  ? getSequence(newIndexToOldIndexMap)
  : EMPTY_ARR
  
  j = increasingNewIndexSequence.length - 1

  for (i = toBePatched - 1; i >= 0; i--) {
    const nextIndex = s2 + i
    const nextChild = c2[nextIndex] as VNode
    const anchor = extIndex + 1 < l2 ? (c2[nextIndex + 1] as VNode).el : parentAnchor
    // 0 新建 Vnode
    if (newIndexToOldIndexMap[i] === 0) {
      patch(null,nextChild,...)
    } else if (moved) {
      // 移動節點
      if (j < 0 || i !== increasingNewIndexSequence[j]) {
        move(nextChild, container, anchor, MoveType.REORDER)
      } else {
        j--
      }
    }
  }
}

打包優化

tree-shaking：模塊打包webpack、rollup等中的概念。移除 JAVAScript 上下文中未引用的代碼。主要依賴于import和export語句，用來檢測代碼模塊是否被導出、導入，且被 JavaScript 文件使用。

以nextTick為例子，在 Vue2 中，全局 API 暴露在 Vue 實例上，即使未使用，也無法通過tree-shaking進行消除。

import Vue from 'vue'

Vue.nextTick(() => {
  // 一些和DOM有關的東西
})

Vue3 中針對全局 和內部的API進行了重構，并考慮到tree-shaking的支持。因此，全局 API 現在只能作為ES模塊構建的命名導出進行訪問。

import { nextTick } from 'vue'

nextTick(() => {
  // 一些和DOM有關的東西
})

通過這一更改，只要模塊綁定器支持tree-shaking，則 Vue 應用程序中未使用的api將從最終的捆綁包中消除，獲得最佳文件大小。受此更改影響的全局API有如下。

  • Vue.nextTick
  • Vue.observable （用 Vue.reactive 替換）
  • Vue.version
  • Vue.compile （僅全構建）
  • Vue.set （僅兼容構建）
  • Vue.delete （僅兼容構建）

內部 API 也有諸如 transition、v-model等標簽或者指令被命名導出。只有在程序真正使用才會被捆綁打包。

根據 尤大 直播可以知道如今 Vue3 將所有運行功能打包也只有22.5kb，比 Vue2 輕量很多。

自定義渲染API

Vue3 提供的createApp默認是將 template 映射成 html。但若想生成canvas時，就需要使用custom renderer api自定義render生成函數。

// 自定義runtime-render函數
import { createApp } from './runtime-render'
import App from './src/App'

createApp(App).mount('#app')

TypeScript 支持

Vue3 由TS重寫，相對于 Vue2 有更好地TypeScript支持。

  • Vue2 Option API中 option 是個簡單對象，而TS是一種類型系統，面向對象的語法，不是特別匹配。
  • Vue2 需要vue-class-component強化vue原生組件，也需要vue-property-decorator增加更多結合Vue特性的裝飾器，寫法比較繁瑣。

分享到：
標簽：Vue3
用戶無頭像

網友整理

注冊時間：

網站：5 個   小程序：0 個  文章：12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號，推廣您的網站吧！
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲，玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題，題庫，初中，高中，大學四六

運動步數有氧達人2018-06-03

記錄運動步數，積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定