VUE3版本新特性-优快云博客

本文链接：https://blog.youkuaiyun.com/Casual_Lei/article/details/139756071

VUE3版本新特性

VUE3和VUE2的区别
路由的使用
vite安装项目
新特性使用

1.VUE3和VUE2的区别

2020年9月18日，Vue.js发布版3.0版本，代号：One Piece 于 2022 年 2 月 7 日星期一成为新的默认版本! Vue3性能更高,初次渲染快55%, 更新渲染快133% 。体积更小 Vue3.0 打包大小减少41%。同时Vue3可以更好的支持TypeScript。 vue3中文文档：Vue.js : https://cn.vuejs.org/，vue2和vue3的主要区别在于以下几点：1、生命周期函数钩子不同

beforeCreate  -> setup()    开始创建组件之前，创建的是data和method
created       -> setup()
beforeMount   -> onBeforeMount    组件挂载到节点上之前执行的函数。
mounted       -> onMounted    组件挂载完成后执行的函数
beforeUpdate  -> onBeforeUpdate    组件更新之前执行的函数。
updated       -> onUpdated    组件更新完成之后执行的函数。
beforeDestroy -> onBeforeUnmount    组件挂载到节点上之前执行的函数。
destroyed     -> onUnmounted    组件卸载之前执行的函数。
activated     -> onActivated    组件卸载完成后执行的函数
deactivated   -> onDeactivated  在组件切换中老组件消失的时候执行

2、数据双向绑定原理不同

VUE2	VUE3
利用ES5的一个APIObject.defineProperty()对数据进行劫持，结合发布者订阅者模式的方式来实现的。	使用了ES6的Proxy API对数据代理。

vue3提供的proxy API代理的优势在于：

defineProperty只能监听某个属性，不能对全对象监听
可以省去for…in，闭包等内容来提升效率（直接绑定整个对象即可）
可以监听数组，不再单独的对数组做特异性处理。可以检测到数组内部数据的变化。

3、定义变量和方法不同

vue2	vue3
在data中定义变量，在methods中创建方法	使用一个新的setup方法

vue3提供的setup方法在组件初始化构造的时候触发，使用以下三个步骤建立反应性数据：

从vue引入reactive
使用reactive方法来声明数据为响应性数据

使用setup方法返回响应性数据，从而template可以获取这些响应式数据。

<script>
export default {
setup(){
 // 数据和方法都写这里，更简洁
  const user = "username";
  const met =  ()=>{

  }
}
}
</script>

4、API类型不同

vue2	vue3
选项型api（在代码中分割不同属性：data，computed，methods等）	组合型api（使用方法进行分隔，显得更加简便整洁）

5、是否支持碎片

vue2	vue3
否	是，即可以拥有多个根节点

<template>
  <div>
   <h1></h1>
  <div>
  <div>
   <h1></h1>
  <div>
</template>

6、父子之间传参不同

vue2	vue3
父传子：子组件通过prop接收子传父：子组件中通过$emit向父组件触发一个监听方法，传递一个参数	使用setup()中的第二个参数content对象中有emit，只需要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7、v-if 和 v-for的优先级

VUE2	VUE3
v-for 优先于 v-if 生效	v-if 优先于 v-for 生效

2.使用Vite创建项目

在VUE3中使用vite来创建项目而不再使用 vue-cli，初始化项目 ,vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如：

轻量快速的热重载（HMR），能实现极速的服务启动。
对 TypeScript、JSX、CSS 等支持开箱即用。
真正的按需编译，不再等待整个应用编译完成。注意：Vite 需要 Node.js 版本 >= 12.0.0。【使用nvm安装 node 18.14.2】

在这里插入图片描述

注意:还需要去设置仓库地址: npm config set registry https://registry.npmmirror.com在VUE2中使用npm进行包的管理，在VUE3中pnpm进行包的管理，首先我们需要安装 pnpm

安装pnpm :

在磁盘上创建一个文件夹，如： vue3-demo,然后进入目录，使用cmd窗口执行命令如下：

npm i pnpm -g

安装vite : 执行下面命令，按照提示完成项目创建

pnpm create vite@latest 或者 yarn create vite

1.输入项目名字，默认为vue3-demo2.选择创建的项目类型，选择vue即可3.选择创建的vue项目类型， TypeScript4.启动项目

命令 ： pnpm create vite@latest  执行效果如下
![1710845893295](images\1710845893295.png)

- 也可以使用 ： npm init vite@latest 
3. 安装依赖： `进入到创建好的项目中`执行命令 pnpm i
```shell
pnpm i

cnpm install

启动项目

启动命令看 package.json -> scripts { … }
```
pnpm dev
```
访问控制台地址，启动效果如下然后使用开发工具，导入创建好的项目

3.项目结构认识

├── dist/                                                        //代码编译目录
└── src/
    ├── api/                       // 接口请求目录
    ├── assets/                    // 静态资源目录
    ├── common/                    // 通用类库目录
    ├── components/                // 公共组件目录
    ├── router/                    // 路由配置目录
    ├── store/                     // 状态管理目录
    ├── style/                     // 通用样式目录
    ├── utils/                     // 工具函数目录
    ├── views/                     // 页面组件目录
    ├── App.vue
    ├── main.ts                                        //主ts
├── tests/                         // 单元测试目录
├── index.html                                        //默认首页，入口页面
├── jsconfig.json                  // JavaScript 配置文件
├── vite.config.js                 // Vite 配置文件
└── package.json