Vue3中5個可以提升開發效率的小知識【整理分享】-Vue.js-PHP中文網

首頁

web前端

Vue.js

Vue3中5個可以提升開發效率的小知識【整理分享】

青灯夜游

Jan 21, 2022 am 10:36 AM

這篇文章跟大家聊聊Vue3 開發，整理分享5個可以提升開發效率的小知識，讓你在 Vue3 的專案開發中更加絲滑，希望對大家有所幫助！

Vue3中5個可以提升開發效率的小知識【整理分享】

最近鼓搗了一下Vue3 Vite2，遇到了不少問題，整理了5個可以提高開發效率的小知識，讓你在Vue3 的專案開發中更加絲滑、順暢。

一、setup name 增強

Vue3的setup語法糖是好東西，但使用setup 語法帶來的第一個問題就是無法自訂name，而我們使用keep-alive往往是需要name的，解決這個問題通常是透過寫兩個script標籤來解決，一個使用setup，一個不使用，但這樣必然是不夠優雅的。

<script>
import { defineComponent, onMounted } from &#39;vue&#39;

export default defineComponent({
  name: &#39;OrderList&#39;
})
</script>

<script setup>
onMounted(() => {
  console.log(&#39;mounted===&#39;)
})
</script>

這時候借助插件vite-plugin-vue-setup-extend可以讓我們更優雅的解決這個問題，不用寫兩個script標籤，可以直接在script標籤上定義name。

安裝

npm i vite-plugin-vue-setup-extend -D

#設定

// vite.config.ts
import { defineConfig } from &#39;vite&#39;
import VueSetupExtend from &#39;vite-plugin-vue-setup-extend&#39;

export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

##使用<pre class='brush:php;toolbar:false;'><script setup name="OrderList"> import { onMounted } from &#39;vue&#39; onMounted(() => { console.log(&#39;mounted===&#39;) }) </script></pre>二、API 自動導入#setup語法讓我們不用再一個的把變數和方法都return出去就能在模板上使用，大大的解放了我們的雙手。然而對於一些常用的VueAPI，例如

ref

、computed、watch#等，還是每次都需要我們在頁面上手動進行import。

我們可以透過unplugin-auto-import實現自動導入，無需import即可在檔案裡使用

Vue

的API。安裝

<pre class='brush:php;toolbar:false;'>npm i unplugin-auto-import -D</pre>

#設定

// vite.config.ts
import { defineConfig } from &#39;vite&#39;
import AutoImport from &#39;unplugin-auto-import/vite&#39;

export default defineConfig({
  plugins: [
    AutoImport({
      // dts: &#39;src/auto-imports.d.ts&#39;, // 可以自定义文件生成的位置，默认是根目录下
      imports: [&#39;vue&#39;]
    })
  ]
})

已安裝設定完會自動產生

auto-imports.d.ts

檔案。 <pre class='brush:php;toolbar:false;'>// auto-imports.d.ts // Generated by &#39;unplugin-auto-import&#39; // We suggest you to commit this file into source control declare global { const computed: typeof import(&#39;vue&#39;)[&#39;computed&#39;] const createApp: typeof import(&#39;vue&#39;)[&#39;createApp&#39;] const customRef: typeof import(&#39;vue&#39;)[&#39;customRef&#39;] const defineAsyncComponent: typeof import(&#39;vue&#39;)[&#39;defineAsyncComponent&#39;] const defineComponent: typeof import(&#39;vue&#39;)[&#39;defineComponent&#39;] const effectScope: typeof import(&#39;vue&#39;)[&#39;effectScope&#39;] const EffectScope: typeof import(&#39;vue&#39;)[&#39;EffectScope&#39;] const getCurrentInstance: typeof import(&#39;vue&#39;)[&#39;getCurrentInstance&#39;] const getCurrentScope: typeof import(&#39;vue&#39;)[&#39;getCurrentScope&#39;] const h: typeof import(&#39;vue&#39;)[&#39;h&#39;] const inject: typeof import(&#39;vue&#39;)[&#39;inject&#39;] const isReadonly: typeof import(&#39;vue&#39;)[&#39;isReadonly&#39;] const isRef: typeof import(&#39;vue&#39;)[&#39;isRef&#39;] // ... } export {}</pre>使用<pre class='brush:php;toolbar:false;'><script setup name="OrderList"> // 不用import，直接使用ref const count = ref(0) onMounted(() => { console.log(&#39;mounted===&#39;) }) </script></pre>上面我們在vite.config.ts的設定裡只導入了 vue，

imports: ['vue']

，除了vue的你也可以根據文件導入其他的如vue-router、 vue-use等。

個人建議只對一些比較熟悉的API做自動導入，如vue的API我們在開發時都比較熟悉，閉著眼都能寫出來，對於一些不大熟悉的像VueUse這種函式庫，還是用<span style="font-size: 16px;">import</span>比較好一些，畢竟編輯器都有提示，不容易寫錯。 解決

eslint#錯誤問題

##。 #import的情況下使用會導致

eslint

提示報錯，可以透過在eslintrc.js安裝外掛程式**vue-global-api**#解決。

// 安装依赖
npm i vue-global-api -D

// eslintrc.js
module.exports = {
  extends: [
    &#39;vue-global-api&#39;
  ]
}

三、告別.value

###眾所周知，###ref###要求我們存取變數時需要加上###.value###，這讓許多開發者覺得難受.###

let count = ref(1)

const addCount = () => {
  count.value += 1
}

###後來尤大大也提交了一份新的###ref###語法糖提案。 ###

ref: count = 1

const addCount = () => {
  count += 1
}

###該提案一出便引起了社區的一片討論，時間已經過去很久了，這裡就不再廢話這個話題了。 ######這裡我介紹的是另一種寫法，也是官方後來出的一種方案，在###ref###前加上###$###，該功能預設關閉，需要手動開啟。 ###

// vite.config.ts
import { defineConfig } from &#39;vite&#39;
import vue from &#39;@vitejs/plugin-vue&#39;

export default defineConfig({
  plugins: [
    vue({
      refTransform: true // 开启ref转换
    })
  ]
})

###開啟之後可以這樣寫：###

let count = $ref(1)

const addCount = () => {
  count++
}

###該語法糖根據不同的版本配置也略有不同，下面貼一下我自己所用相關插件的版本：###

"vue": "^3.2.2",
"@vitejs/plugin-vue": "^1.9.0",
"@vue/compiler-sfc": "^3.2.5",
"vite": "^2.6.13"

## ####四、自動導入圖片#########在###Vue2###時我們常會這樣引用圖片：###

<img  src="/static/imghwm/default1.png"  data-src="require(&#39;@/assets/image/logo.png&#39;)"  class="lazy"  : / alt="Vue3中5個可以提升開發效率的小知識【整理分享】" >

###但在###Vite###中不支持###require###了，引用圖片變成了下面這樣：###

<template>
  <img  src="/static/imghwm/default1.png"  data-src="Logo"  class="lazy"  : / alt="Vue3中5個可以提升開發效率的小知識【整理分享】" >
</template>

<script setup>
import Logo from &#39;@/assets/image/logo.png&#39;
</script>

###每次使用圖片都得###import###，顯然耽誤了大家摸魚的時間，這時我們可以藉助###vite-plugin-vue-images###來實現自動導入圖片。 ############安裝#########

npm i vite-plugin-vue-images -D

##########設定#########

// vite.config.ts
import { defineConfig } from &#39;vite&#39;
import ViteImages from &#39;vite-plugin-vue-images&#39;

export default defineConfig({
  plugins: [
    ViteImages({
      dirs: [&#39;src/assets/image&#39;] // 指明图片存放目录
    })
  ]
})

################################# ##使用#########

<template>
  <!-- 直接使用 -->
  <img  src="/static/imghwm/default1.png"  data-src="Logo"  class="lazy"  : / alt="Vue3中5個可以提升開發效率的小知識【整理分享】" >
</template>

<script setup>
// import Logo from &#39;@/assets/image/logo.png&#39;
</script>

######五、忽略.vue後綴#########相信很多人在###Vue2###開發時，導入文件都是忽略.vue後綴的。但在###Vite###裡，忽略.vue後綴會造成報錯。 ###

import Home from &#39;@/views/home&#39; // error
import Home from &#39;@/views/home.vue&#39; // ok

###根據尤大大的回答，必須寫後綴其實是故意這麼設計的，也就是提倡大家這麼去寫。 ######但如果你真的不想寫，官方也是提供了支持的。 ###

// vite.config.ts
import { defineConfig } from &#39;vite&#39;

export default defineConfig({
  resolve: {
    extensions: [&#39;.js&#39;, &#39;.ts&#39;, &#39;.jsx&#39;, &#39;.tsx&#39;, &#39;.json&#39;, &#39;.vue&#39;]
  }
})

这里要注意，手动配置extensions要记得把其他类型的文件后缀也加上，因为其他类型如js等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。

虽然可以这么做，不过毕竟官方文档说了不建议忽略.vue后缀，所以建议大家在实际开发中还是老老实实写上.vue。

感谢

本次分享到这里就结束了，感谢您的阅读！予人玫瑰，手有余香，别忘了动动手指点个赞。

本文如果有什么错误或不足，也欢迎评论区指正！

【相关推荐：vue.js视频教程】

以上是Vue3中5個可以提升開發效率的小知識【整理分享】的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

當vue.js虛擬DOM檢測變化時會發生什麼？May 14, 2025 am 12:12 AM

whenthevue.jsvirtualdomdetectschange，itupdatesthevirlualdom，diffsit和appliesminimalchangeStothereAldom.thisprocessensuresrocessensureshighhighpperformance byformance byavoidingunnnnnnnnnnneclastory dommaniplastions。

將Vue.js的虛擬DOM視為真實DOM的鏡像是多麼準確？May 13, 2025 pm 04:05 PM

Vue.js的VirtualDOM既是真實DOM的鏡像，又不完全是。 1.創建和更新：Vue.js基於組件定義創建VirtualDOM樹，狀態變化時先更新VirtualDOM。 2.差異和修補：通過diff操作比較新舊VirtualDOM，僅將最小變化應用到真實DOM。 3.效率：VirtualDOM允許批量更新，減少直接DOM操作，優化渲染過程。 VirtualDOM是Vue.js優化UI更新的戰略工具。

vue.js vs.反應：可伸縮性和可維護性May 10, 2025 am 12:24 AM

Vue.js和React在可擴展性和可維護性上的表現各有優勢。 1)Vue.js易於上手，適合小型項目，CompositionAPI提升了大型項目可維護性。 2)React適用於大型複雜項目，Hooks和虛擬DOM提高了性能和可維護性，但學習曲線較陡峭。

vue.js和React的未來：趨勢和預測May 09, 2025 am 12:12 AM

Vue.js和React的未來趨勢和預測分別是：1)Vue.js將在企業級應用中廣泛應用，並在服務端渲染和靜態站點生成方面有突破；2)React將在服務器組件和數據獲取方面創新，並進一步優化並發模式。

Netflix的前端：深入研究其技術堆棧May 08, 2025 am 12:11 AM

Netflix的前端技術棧主要基於React和Redux。 1.React用於構建高性能的單頁面應用，通過組件化開發提升代碼重用性和維護性。 2.Redux用於狀態管理，確保狀態變化可預測和可追踪。 3.工具鏈包括Webpack、Babel、Jest和Enzyme，確保代碼質量和性能。 4.性能優化通過代碼分割、懶加載和服務端渲染實現，提升用戶體驗。

vue.js和前端：構建交互式用戶界面May 06, 2025 am 12:02 AM

Vue.js是一種漸進式框架，適用於構建交互性強的用戶界面。其核心功能包括響應式系統、組件化開發和路由管理。 1)響應式系統通過Object.defineProperty或Proxy實現數據監聽，自動更新界面。 2)組件化開發允許將界面拆分為可複用的模塊。 3)VueRouter支持單頁面應用，提升用戶體驗。