vue3工程创建
一.两种创建方式（vue-cli与vite）
1.vue-cli创建（构建工具是webpack）
打开cmd 运行命令 vue -V 检查vue-cli版本要在4.5以上。
cd desktop 进入桌面 创建一个文件夹 vue create vue3lx 此时创建成功。y
2.运用vite创建（新一代前端构建工具）
对比webpack有如下的优势
1.开发环境中无需打包操作，可快速冷启动。（注意这里说的是开发环境的打包，就是不像之前的webpack需要npm run serve）
2.轻量快速的热加载。（虽然webpack也有这个功能，但是这个更加轻量快速）
3.按需编译，不用等像之前的webpack一样先全部打包，而是需要啥加载啥。
第一步
还是进入desktop 创建文件 npm init vite-app vue3_vite
此时会跳出这个
以前的webpack 是会创建之后自动给你下载依赖，这里需要自己进入并下载依赖。
cd vue3_vite 进入文件
然后npm install 去下载依赖 之后就可以通过npm run dev 打开就行了。
二.这里我们将讨论用vue-cli创建的vue3项目。
这里先打开vue3用cli创建的文件，并分析入口文件
然后根据入口文件执行顺序接下来分析，app组件
app组件主要改变时，模板中可以没有根标签，而vue2必须得有。其他没啥变化。
2.接下来可以去安装一个vue3的浏览器插件也就是vue3的开发者工具。
3.学习内容第一步 关注setup函数
setup是所有组合式api表演的舞台，也就是说数据和方法等都要在setup里面配置，setup函数里面不用像vue2一样要用this，因为都在setup里面的同一个作用域中。
setup有两种返回值
1）返回一个对象，则对象中的方法与属性在模板中都可以用到。
2）若返回一个渲染函数，则可以自定义渲染内容。
vue3与vue2最好不要混用。
4.学习如何操作响应式数据 不同于vue2，vue3要通过引入ref函数来实现包裹数据使数据能够成为引用对象。import {ref} from "vue"
ref作用：定义了一个响应式的数据。
值得注意的是：定义一个响应式数据是这样子定义的，let name = ref("刘浩") let age = ref(18) reference引用；参考
修改的话得 name.value = '李四' age.value = 18
ref接受的数据可以是基本数据类型也可以是对象数据类型
但是基本数据类型的响应式还是采用了Object.defineProperty()的get与set完成的，对象数据类型是采用vue3的新函数reactive()实现，它是由es6中的proxy封装的。
5.reactive()函数，作用：定义了一个对象类型的响应式数据，（基本数据类型不要用它定义）它是基于es6的proxy，通过代理对象操作源对象内部数据进行操作。
6.分析一下vue2的问题以及响应式：
实现原理：vue2对象类型是通过Objiect.defineproperty()对属性的读取与修改进行拦截（数据劫持），数组类型：通过重写更新数组的一些方法来实现拦截（对数组的变更方法进行了包裹）
存在的问题：1）新增属性与删除属性，不具有响应式。2）直接通过下表去修改数组不具备响应式。
解决方案：通过this.$set(增加到哪，属性名，属性值)或者Vue.set(增加到哪，属性名，属性值) 数组的话也可以用前两种，当然也可以调用数组的一些方法来修改。