首頁 web前端 Vue.js vue3.0和vue2.0的差別是什麼?

vue3.0和vue2.0的差別是什麼?

Nov 18, 2020 pm 03:01 PM
vue

區別:vue2.0中不管資料多大,都會在一開始就為其建立觀察者;當資料很大時,這可能會在頁面載入時造成明顯的效能壓力。而vue3.0只會對「被用於渲染初始可見部分的資料」建立觀察者,而且vue3.0的觀察者更有效率。

vue3.0和vue2.0的差別是什麼?

vue3.0和2.0的差異

Vue-cli3.0於8月11日正式發布,看了下評論,相容性不是很好,命令有不少變化,不是特別的樂觀

vue3.0 的發布與vue2.0 相比,優勢主要體現在:更快、更小、更易於維護、更易於原生、讓開發者更輕鬆;

更快
  1、virtual DOM 完全重寫,mounting & patching 加速100% ;
  2、更多編譯時(compile-time)提醒以減少runtime 開銷;
  3、基於Proxy 觀察者機制以滿足全語言覆蓋以及更好的性能;
  4、放棄放棄. defineProperty ,使用更快的原生Proxy;
  5、元件實例初始化速度提高100%;
  6、提速一倍/記憶體使用降低一半;

更小

  1、Tree-shaking 更友善;

  2、新的core runtime:~ 10kb gzipped;

===============

3.0 新加入了TypeScript 以及PWA 的支援

部分指令發生了變化:
  • 下載安裝  npm install -g vue@cli
  • 刪除了vue list
  • 建立專案   vue create
  • 啟動專案   npm run serve
  • #預設專案目錄結構也發生了變化:
  • 移除了設定檔目錄,config 和 build 資料夾
  • 移除了 static 資料夾,新增 public 資料夾,並且 index.html 移至 public 中

  • 在 src 資料夾中新增了 views 資料夾,用於分類視圖元件和公共組件

註:php中文網線上班

也開始教授最新版本的vue課程了,有興趣的朋友可以了解學習。

安裝

npm install -g vue@cli

建立專案檔案:

vue create project //项目的名称

=============== =======

vue2和vue3的差異

一、常用指令

vue -V 檢視本機vue 版本

二、官方文件

3.0:https://cli.vuejs.org/zh/

三、建立檔案

3.0:vue create 進入工程文件夾,創建專案。

2.0:vue init webpack

四、啟動專案

3.0啟動npm run serve

2.0啟動npm run dev

build沒了、config沒了、喔對了還有最重要的一點,3.0的安裝專案時會自動下載node-model。

在根目錄下建立一個vue.config.js

module.exports = {
 baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
 // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
 // outputDir: 'dist',
 // pages:{ type:Object,Default:undfind }
 devServer: {
 port: 8888, // 端口号
 host: 'localhost',
 https: false, // https:{type:Boolean}
 open: true, //配置自动启动浏览器
 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
 proxy: {
 '/api': {
 target: &#39;<url>&#39;,
 ws: true,
 changeOrigin: true
 },
 &#39;/foo&#39;: {
 target: &#39;<other_url>&#39;
 }
 }, // 配置多个代理
 }
 }

==================

Vue3.0和Vue2.0的區別

一、預設進行懶觀察(lazy observation)。

在 2.x 版本裡,不管資料多大,都會在一開始就為其建立觀察者。當資料很大時,這可能會在頁面載入時造成明顯的效能壓力。 3.x 版本,只會對「被用於渲染初始可見部分的資料」建立觀察者,而且 3.x 的觀察者更有效率。

二、更精準的變更通知。

比例來說:2.x 版本中,你使用Vue.set 來為物件新增一個屬性時,這個物件的所有watcher 都會重新運作;3.x 版本中,只有依賴那個屬性的watcher 才會重新運作。

三、3.0 新加入了TypeScript 以及PWA 的支援

四、部分指令發生了變更:

下載安裝npm install -g vue@cli

刪除了vue list

建立專案vue create

啟動專案npm run serve

五、預設專案目錄結構也發生了變化:

#移除了設定檔目錄,config 和build 資料夾

移除了static 資料夾,新增public 資料夾,並且index.html 移動到public 中

在src 資料夾中新增了views 資料夾,用於分類視圖元件和公用元件


相關推薦:

2020年前端vue面試題大總和(附答案)

vue教學推薦:2020最新的5個vue.js影片教學精選

更多程式設計相關知識,請造訪: 程式教學
! !

###

以上是vue3.0和vue2.0的差別是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Stock Market GPT

Stock Market GPT

人工智慧支援投資研究,做出更明智的決策

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

如何使用VUE構建組件庫? 如何使用VUE構建組件庫? Jul 10, 2025 pm 12:14 PM

搭建Vue組件庫需圍繞業務場景設計結構,並遵循開發、測試、發布的完整流程。 1.結構設計應按功能模塊分類,包括基礎組件、佈局組件和業務組件;2.使用SCSS或CSS變量統一主題與樣式;3.統一命名規範並引入ESLint和Prettier保證代碼風格一致;4.配套文檔站點展示組件用法;5.使用Vite等工具打包為NPM包並配置rollupOptions;6.發佈時遵循semver規範管理版本與changelog。

如何用PHP開發問答社區平台 PHP互動社區變現模式詳解 如何用PHP開發問答社區平台 PHP互動社區變現模式詳解 Jul 23, 2025 pm 07:21 PM

1.PHP開發問答社區首選Laravel MySQL Vue/React組合,因生態成熟、開發效率高;2.高性能需依賴緩存(Redis)、數據庫優化、CDN和異步隊列;3.安全性必須做好輸入過濾、CSRF防護、HTTPS、密碼加密及權限控制;4.變現可選廣告、會員訂閱、打賞、佣金、知識付費等模式,核心是匹配社區調性和用戶需求。

Vue成品資源網站免費入口 完整Vue成品永久在線觀看 Vue成品資源網站免費入口 完整Vue成品永久在線觀看 Jul 23, 2025 pm 12:39 PM

本文為Vue開發者和學習者精選了一系列頂級的成品資源網站。通過這些平台,你可以免費在線瀏覽、學習甚至復用海量高質量的Vue完整項目,從而快速提升開發技能和項目實踐能力。

如何用PHP開發AI智能表單系統 PHP智能表單設計與分析 如何用PHP開發AI智能表單系統 PHP智能表單設計與分析 Jul 25, 2025 pm 05:54 PM

選擇合適的PHP框架需根據項目需求綜合考慮:Laravel適合快速開發,提供EloquentORM和Blade模板引擎,便於數據庫操作和動態表單渲染;Symfony更靈活,適合複雜系統;CodeIgniter輕量,適用於對性能要求較高的簡單應用。 2.確保AI模型準確性需從高質量數據訓練、合理選擇評估指標(如準確率、召回率、F1值)、定期性能評估與模型調優入手,並通過單元測試和集成測試保障代碼質量,同時持續監控輸入數據以防止數據漂移。 3.保護用戶隱私需採取多項措施:對敏感數據進行加密存儲(如AES

如何用PHP實現AI內容推薦系統 PHP智能內容分發機制 如何用PHP實現AI內容推薦系統 PHP智能內容分發機制 Jul 23, 2025 pm 06:12 PM

1.PHP在AI內容推薦系統中主要承擔數據收集、API通信、業務規則處理、緩存優化與推薦展示等角色,而非直接執行複雜模型訓練;2.系統通過PHP收集用戶行為與內容數據,調用後端AI服務(如Python模型)獲取推薦結果,並利用Redis緩存提升性能;3.基礎推薦算法如協同過濾或內容相似度可在PHP中實現輕量級邏輯,但大規模計算仍依賴專業AI服務;4.優化需關注實時性、冷啟動、多樣性及反饋閉環,挑戰包括高並發性能、模型更新平穩性、數據合規與推薦可解釋性,PHP需協同消息隊列、數據庫與前端共同構建穩

vue免費成品資源入口 vue免費成品網站導航 vue免費成品資源入口 vue免費成品網站導航 Jul 23, 2025 pm 12:42 PM

對於Vue開發者而言,一個高質量的成品項目或模板是快速啟動新項目、學習最佳實踐的利器。本文為你精選了多個頂級的Vue免費成品資源入口和網站導航,幫助你高效地找到所需的前端解決方案,無論是後台管理系統、UI組件庫還是特定業務場景的模板,都能輕鬆獲取。

如何用PHP開發電商後台變現 PHP電商系統架構與盈利策略 如何用PHP開發電商後台變現 PHP電商系統架構與盈利策略 Jul 25, 2025 pm 06:33 PM

1.PHP電商後台主流框架有Laravel(開發快、生態強)、Symfony(企業級、結構穩)、Yii(性能優、適合標準化模塊);2.技術棧需搭配MySQL Redis緩存 RabbitMQ/Kafka消息隊列 Nginx PHP-FPM,並考慮前後端分離;3.高並發架構應分層模塊化、數據庫讀寫分離/分庫分錶、用緩存和CDN加速、異步處理任務、負載均衡與Session共享、逐步微服務化並建立監控告警體系;4.多元變現路徑包括商品差價或平台佣金、站內廣告、SaaS訂閱、定制開發與插件市場、API接

PHP打造客戶管理系統變現 PHPCRM系統設計與應用 PHP打造客戶管理系統變現 PHPCRM系統設計與應用 Jul 25, 2025 pm 06:03 PM

設計一個既實用又能變現的PHPCRM系統,首先要打造包含客戶管理、銷售追踪、自動化流程等核心功能的MVP,並採用模塊化架構(如Laravel)支持後續增值功能擴展;2.通過直觀UX設計(如Vue.js前端)降低使用門檻,讓用戶願意持續付費;3.利用數據分析報告(如銷售漏斗、績效分析)幫助客戶提升決策效率,基礎功能免費、高級報告付費實現變現;4.實施多租戶架構保障數據隔離,為SaaS模式打下基礎,避免後期重構影響商業化;5.變現不僅靠訂閱費,還可通過API開放、定制開發、技術支持及插件市場多元獲益

See all articles