Vue3官网使用及简介

Vue3带来了什么

性能的提升

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

源码的升级

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

拥抱TypeScript

Vue3可以更好的支持TypeScript

新的特性

Composition API（组合API）
setup配置
ref与reactive
watch与watchEffect
provide与inject
…

新的内置组件
Fragment
Teleport
Suspense

其他改变
新的生命周期钩子
data选项应始终被声明为一个函数
移除keyCode支持作为v-on的修饰符

创建Vue3.0工程

使用vue-cli创建

官网地址

https://cli.vuejs.org/zh/guide/creating-a-project.html

安装

1.查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version 或 vue -V
2.安装或者升级你的@vue/cli
npm install -g @vue/cli
3.创建
vue create 文件名
4.选择Vue3

使用vite创建

官网地址

https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网：https://vitejs.cn/

什么是vite?

新一代前端构建工具

优势

开发环境中，无需打包操作，可快速的冷启动。
轻量快速的热重载（HMR）
真正的按需编译，不再等待整个应用编译完成
传统构建与vite构建对比图

安装

创建工程 $ npm init vite-app <project-name>
进入工程目录 $ cd <project-name>
安装依赖 $ npm install
运行 $ npm run dev

内容介绍

main.js

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

App.vue

<!--Vue3组件中的模板结构可以没有根标签-->
<template><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

Vue3官网使用及简介相关推荐

Vue3官网-高级指南（十五）Vue 与 Web Components
Vue3官网-高级指南(十五)Vue 与 Web Components 文章目录 Vue3官网-高级指南(十五)Vue 与 Web Components 1. Vue 与 Web Components ...
Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrack、onTrigger、onInvalidate、副作用的刷新时机、`watch` 、pre）
Vue3官网-高级指南(十七)响应式计算computed和侦听watchEffect(onTrack.onTrigger.onInvalidate.副作用的刷新时机.watch .pre).渲染机制和 ...
Vue3官网-可复用组合式API（十四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件
Vue3官网-可复用&组合式API(十四)实例 property($slots,$attrs).渲染函数render(虚拟节点VNode,h() 参数,使用JavaScript代替模板功能), ...
有意思的一些免费API接口整理，包含官网地址以及简介
1.文档上的小牌子官网:https://shields.io/ 举例:获取vue 在npm上的版本号 https://img.shields.io/npm/v/vue.svg?sanitize=tr ...
Vue2官网使用及简介
官网地址中文官网地址:https://cn.vuejs.org/ 英文官网地址:https://vuejs.org/ 文档使用 Vue定义一套用户构建用户界面的渐进式JavaScript ...
php怎么写官网,PHP - Manual: 简介 (官方文档)
简介 pthreads 是一组允许用户在 PHP 中使用多线程技术的面向对象的 API. 它提供了创建多线程应用所需的全套工具. 通过使用 Thread, Worker 以及 Threaded 对象, ...
商洛学院数学与计算机应用官网,应用数学系简介
商洛学院应用数学系始建于1976年,时称"商洛师范专科学校数学系",2006年学院升本后更名为"商洛学院数学系",2008年11月更名为"商洛学院数学 ...
软件官网与memcached介绍
常见官网 http://www.keepalived.org http://nginx.org/ documentation 模块说明 http://www.apache.org/ https://o ...
王者荣耀官网制作心得
一开始看到官网复杂的页面还是有些心虚的,从网上学了一些关于网页的制作,也是有一些心得的. 开启新的文件夹,一个html一个css,链接进去就OK,现在想想在大公司里开发网页是否也是如此,一个大项目分为 ...

Vue3官网使用及简介

Vue3带来了什么

性能的提升

源码的升级

拥抱TypeScript

新的特性

创建Vue3.0工程

使用vue-cli创建

官网地址

安装

使用vite创建

官网地址

什么是vite?

优势

安装

内容介绍

Vue3官网使用及简介相关推荐

最新文章

热门文章