初学Vue

文章目录

• 初学Vue
• • 1、Vue3概述
  • • 1.1 简介
    • 1.2 同vue相比较
    • 1.3 创建vue3项目
    • • 1.3.1 创建
      • 1.3.2 目录结构
      • 1.3.3 与vue2中的文件做对比

1、Vue3概述

1.1 简介

2020年9月18日发布vue3版本，代号one piece（海贼王）

1.2 同vue相比较

• 带来性能的提升

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

• 源码升级

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

vue官方对Tree-Shaking的解释

• 拥抱TypeScript（微软写的脚本语言）
  vue3可以更好的支持TypeScript，甚至于说以后typeScript是vue中的主流

• vue3中的新特性

1. Composition API（组合API）
   1. setup配置
   2. ref与reactive
   3. watch与watchEffect
   4. provide与inject
   5. …
2. 新的内置组件
   1. Fragment
   2. Teleport
   3. Suspense
3. 其他改变
   1. 新的生命钩子
   2. data选项应始终被生命为一个函数
   3. 移除keyCode支持作为v-on的修饰符

1.3 创建vue3项目

1.3.1 创建

vue create xxx
1

选择Vue3

1.3.2 目录结构

和vue项目结构是很相似的

1.3.3 与vue2中的文件做对比

• main.js

// 引入的不再是Vue构造函数，而是引入一个名为createApp的工厂函数
import { createApp } from 'vue'

import App from './App.vue'

// createApp(App)的返回值是一个对象，类似于vm
// 但这个对象比new Conmponent()创建出来的vm对象更“轻量”
createApp(App).mount('#app')
1
2
3
4
5
6
7
8

其他文件基本和vue2一样