Rumah hujung hadapan web View.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、放弃 Object.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
Salin selepas log masuk

创建项目文件:

vue create project //项目的名称
Salin selepas log masuk

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

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;
 }
 }, // 配置多个代理
 }
 }
Salin selepas log masuk

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

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视频教程精选

更多编程相关知识,请访问:编程教学!!

Atas ialah kandungan terperinci vue3.0和vue2.0的区别是什么?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Kenapa tidak ada maklumat permintaan halaman di rangkaian konsol selepas melompat Vue-router? Kenapa tidak ada maklumat permintaan halaman di rangkaian konsol selepas melompat Vue-router? Apr 04, 2025 pm 05:27 PM

Kenapa tidak ada maklumat permintaan halaman di rangkaian konsol selepas melompat Vue-router? Apabila menggunakan Vue-Router untuk pengalihan halaman, anda mungkin melihat ...

Bagaimana cara menggunakan Vue untuk melaksanakan borang petikan elektronik dengan header tunggal dan berbilang badan? Bagaimana cara menggunakan Vue untuk melaksanakan borang petikan elektronik dengan header tunggal dan berbilang badan? Apr 04, 2025 pm 11:39 PM

Cara melaksanakan borang petikan elektronik dengan header tunggal dan berbilang badan dalam Vue. Dalam pengurusan perusahaan moden, pemprosesan elektronik borang petikan adalah untuk meningkatkan kecekapan dan ...

Bagaimana untuk melaksanakan fungsi memuat naik foto ahli-ahli fotografi tinggi jenama yang berbeza di hujung depan? Bagaimana untuk melaksanakan fungsi memuat naik foto ahli-ahli fotografi tinggi jenama yang berbeza di hujung depan? Apr 04, 2025 pm 05:42 PM

Bagaimana untuk melaksanakan fungsi memuat naik foto jenama-jenama ahli fotografi yang berbeza di hujung depan apabila membangunkan projek-projek front-end, anda sering menghadapi keperluan untuk mengintegrasikan peralatan perkakasan. untuk ...

Bagaimana untuk mencapai kesan segmentasi dengan sempadan lengkung 45 darjah? Bagaimana untuk mencapai kesan segmentasi dengan sempadan lengkung 45 darjah? Apr 04, 2025 pm 11:48 PM

Petua untuk melaksanakan kesan segmen dalam reka bentuk antara muka pengguna, Segmenter adalah elemen navigasi biasa, terutamanya dalam aplikasi mudah alih dan laman web responsif. …

Bagaimana cara menggunakan El-Table untuk melaksanakan pengelompokan meja, seret dan drop penyortiran di VUE2? Bagaimana cara menggunakan El-Table untuk melaksanakan pengelompokan meja, seret dan drop penyortiran di VUE2? Apr 04, 2025 pm 07:54 PM

Melaksanakan El-Table Table Group Drag dan Drop Sorting di VUE2. Menggunakan jadual el-meja untuk melaksanakan seretan kumpulan dan penyortiran drop dalam VUE2 adalah keperluan biasa. Katakan kita mempunyai ...

Bagaimana untuk memastikan bahagian bawah objek 3D ditetapkan pada peta menggunakan Mapbox dan Three.js di Vue? Bagaimana untuk memastikan bahagian bawah objek 3D ditetapkan pada peta menggunakan Mapbox dan Three.js di Vue? Apr 04, 2025 pm 06:42 PM

Cara menggunakan Mapbox dan Three.js di Vue untuk menyesuaikan objek tiga dimensi untuk memetakan sudut tontonan. Apabila menggunakan Vue untuk menggabungkan Mapbox dan Three.js, objek tiga dimensi yang dicipta perlu ...

Adakah JavaScript Menamakan Spesifikasi Meningkatkan Isu Keserasian di Android Webview? Adakah JavaScript Menamakan Spesifikasi Meningkatkan Isu Keserasian di Android Webview? Apr 04, 2025 pm 07:15 PM

Spesifikasi Penamaan JavaScript dan Android ...

See all articles