最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

【报资讯】vue3

来源:博客园

一、简介

2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)

github.com/vuejs/vue-n…

1.性能的提升

  • 打包大小减少41%
  • 初次渲染快55%, 更新渲染快133%
  • 内存减少54%

2.源码的升级

  • 使用Proxy代替defineProperty实现响应式
  • 重写虚拟DOM的实现和Tree-Shaking

3.拥抱TypeScript

  • Vue3可以更好的支持TypeScript

4.新的特性

  1. Composition API(组合API)
    • setup配置
    • refreactive
    • watchwatchEffect
    • provideinject
  2. 新的内置组件
    • Fragment
    • Teleport
    • Suspense
  3. 其他改变
    • 新的生命周期钩子
    • data 选项应始终被声明为一个函数
    • 移除keyCode支持作为 v-on的修饰符

二、创建一个Vue项目

1. 使用 vue-cli 创建

官方文档:cli.vuejs.org/zh/guide/cr…


(资料图)

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上vue --version## 安装或者升级你的@vue/clinpm install -g @vue/cli## 创建Vue项目,选择Vue3vue create vue3_test## 启动cd vue_testnpm run serve

2. 使用 vite 创建

官方文档:v3.cn.vuejs.org/guide/insta…

vite官网:vitejs.cn

  • 什么是vite?—— 是Vue团队打造的新一代前端构建工具。
  • 优势如下:
    • 开发环境中,无需打包操作,可快速的冷启动。
    • 轻量快速的热重载(HMR)。
    • 真正的按需编译,不再等待整个应用编译完成。
  • 传统构建 与 vite构建对比图

传统构建模式,是将所有资源都打包好,再上线

而Vite是按需加载

接下来我们就用Vite来创建一个Vue3的项目

## 创建工程npm init vite-app vue3_test-vite## 进入工程目录cd vue3_test-vite## 安装依赖npm install## 运行npm run dev

三、分析文件目录

main.js

Vue2项目的main.js

import Vue from "vue"import App from "./App.vue"Vue.config.productionTip = falsenew Vue({  render: h => h(App),}).$mount("#app")

我们再来看看Vue3项目中的main.js

import { createApp } from "vue"import App from "./App.vue"createApp(App).mount("#app")

分析一下

// 引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数import { createApp } from "vue"import App from "./App.vue"// 创建应用实例对象——app(类似于之前Vue2中的vm,但app比vm更“轻”)const app = createApp(App)console.log(app)// 挂载app.mount("#app")

App.vue

我们再来看看组件

template标签里可以没有根标签了

关键词: