Vue3.0

一、Vue3.0环境集成(有两种)

第一种:使用vue-cli创建(也就是webpack)：

   // 1.查看@vue/cli的版本,确保@vue/cli版本在4.5.0以上
  vue --version
   // 2.安装或者升级你的@vue-cli
   //3.创建项目
  vue create 项目名
   //  4.进入项目
  cd vueproject
   //5.启动项目
  npm run serve

Vue CLI 优点	Vue CLI 缺点
经历过战斗考验，可靠	开发服务器速度与依赖数量成反比
与 Vue 2 兼容
可以捆绑任何类型的依赖关系
插件生态系统
可以针对不同的目标进行构建

第二种：使用vite创建：

// 第一种：创建模板文件
npm init vite hello-vue3 -- --template vue 
//第二种：创建文件，自定义（可以选择集成的插件：路由、仓库、ts等等）
npm init vite 项目名
//启动项目
npm run dev

优点：

• 开发环境中,无需打包，可快速的冷启动
• 轻量快速的热加载

Vite 优点	Vite 缺点
开发服务器比 Webpack 快 10-100 倍	只能针对现代浏览器（ES2015+）
将 code-splitting 作为优先事项	与 CommonJS 模块不完全兼容
	处于测试阶段，仅支持 Vue 3
	最小的脚手架不包括 Vuex、路由器等
	不同的开发服务器与构建工具

与webpack相比，vite具有以下特点：

1. 快速的冷启动，不需要等待打包

2. 即时的热模块更新

3. 真正的按需编译，不用等待整个项目编译完成

4. 也因为完全跳过了打包这个概念，Vite的出现大大的撼动了Webpack的地位，且真正做到了服务器随起随用

5. 使用vite创建vue项目有点类似于cdn引入，运行这份vue项目，需要加载一些公共库，如果用户第一次加载就会很慢，因为要做网络请求加载下来，而如果用户在浏览器中打开我们网页之前，使用过的其他网页有和我们需要使用的公共库一样的话，就说明浏览器中已经加载过这些我们需要的公共库，那么用户在打开我们网页时，就可以在本地加载我们网页需要的公共库，效率就会很快。

注意：

使用vite第三方插件要求node.js版本 >= 14.18.0

二、熟悉vue3.0

1.vue2.0项目是单页应用，而vue3.0可以是多页应用

建议：在vue3.0项目依然只使用单页应用 （ 原因 ）

2.新增了setup函数：

vue3.0新出了一个setup函数：

1. 这个函数内部的变量/函数是局部的
2. 这个函数的返回值，可以被当前组件的任意地方使用
3. 这个函数内部不要使用this来操作组件数据
4. setup函数返回的对象中的数据和data中的数据同名了，setup优先级更高
5. setup函数在组件加载期间，只会运行一次（因为运行一次后，这个函数就会被销毁）
6. setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性
7. 注意：这个函数内的数据不是响应式的（重点）
8. setup函数内部的变量可以去设计为响应式的变量，那么可以使用官方的hook，也就是ref、reactive等工具

图1：

setup函数的语法糖：

就是在script标签上添加一个setup属性，这样打包工具打包时，就直接帮我们把setup函数内部声明的变量/函数 return （返回）出去，然后组件就可以使用了这些变量和函数了。 （现在这个script标签内部环境就有点像我们最开始了解js语言的时候，使用js的环境 ）

图2：（图1是图2的原理）

3.ref函数

作用：定义一个响应式的数据，解决了setup函数内部的数据不是响应式的问题。

使用方法：

1.引入ref：

import {ref} from "vue"

2.使用ref：

//1.创建一个包含响应式的数据的引用对象(reference对象)
//定义一个响应式的数据
var msg=ref("成都")
var count=ref(0)
//2.操作这份数据：变量.value="修改的值"
msg.value="重庆"
//前面一个count.value代表的是存值，后面一个代表的是取值
count.value=count.vaule++
//注意：在模板中读取数据不需要变量.value，直接使用变量就行了

注意：

• 接收的数据类型可以是基本数据类型也可以是引用数据类型
• 基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的（就是监听了value值的改变，劫持了value属性的setter和getter）
• 对象类型的数据：内部“求助”了Vue3.0的一个新的函数------reactive函数（虽然ref也可以去监听引用数据，但是由于数据里面可以放很多数据，用ref去监听，它会监听里面的每一个数据，性能就不太好）

案例：

4.reactive函数

作用： 定义一个响应式数据，与ref不一样，它底层采用的是ES6的proxy代理了整个引用数据。

使用方法：

1.引入reactive：

import {reactive} from "vue"

2.使用reactive：

//1.定义一个响应式的数据
var c=reactive({age:20,name:"karen"})
//2.操作这份数据：变量="修改的值"
c.age=30;
c.name="jack";

5.组件

使用方法：

1.创建一个vue文件，用来写组件

2.在我们需要引入组件的组件中引入这份vue文件，就行了（因为setup函数的底层会帮我们去实现注册组件）

6.计算属性：computed函数

使用方法：

1.引入computed：

import {computed} from "vue"

2.使用方法：

//监听函数total返回值的变化，做到响应式数据。
var total=computed(()=>{
    return arr.reduce((n1,n2)=>{
        return n1+n2.price*n2.count
    },0)
})

案例：