vue3.0和vue2.0的差別是什麼？-Vue.js-PHP中文網

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

青灯夜游

發布： 2022-02-14 10:12:28

原創

112397 人瀏覽過

區別：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 === &#39;production&#39; ? &#39;/online/&#39; : &#39;/&#39;,
 // outputDir: 在npm run build时 生成文件的目录 type:string, default:&#39;dist&#39;
 // outputDir: &#39;dist&#39;,
 // pages:{ type:Object,Default:undfind }
 devServer: {
 port: 8888, // 端口号
 host: &#39;localhost&#39;,
 https: false, // https:{type:Boolean}
 open: true, //配置自动启动浏览器
 // proxy: &#39;http://localhost:4000&#39; // 配置跨域处理,只有一个代理
 proxy: {
 &#39;/api&#39;: {
 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