创建vue项目

首先现在德vue3已经成为了默认德版本了，现在的创建vue项目的方式有两种：
1：使用脚手架，不走和vue2大致是一样的但是需要注意的是我们vue的版本必须要在4.5以上才能创建vue3项目，现在如果你还再使用vue2过渡到vue3的时候必须要更新开发者工具，不然它无法工作


2：使用一个新的构建工具vite这是vue团队基于vue推出的一套工具，它于weakpack不同之处就在于weaked是将我们所有的代码打包好后，然后将所有的志愿上传到服务器，然后再生成一个服务器端口，vite的原理是我先给你一个端口，你需要访问那部分资源，我再去加载
使用vite,需要自己打开项目文件夹去下载依赖

下面的知识点依然是基于脚手架去学习

分析vue3工程结构

main.js的变化

1. vue2引入的是vue，vue3引入的是creatApp
   
   
2. 因为引入的不再是一个构建函数所以创建的也不再是vm，而是app,app和vm有什么区别？其实他们的作用是类似的只不过app里去除了许多用不上的方法，属性

注意vue3并不兼用vue2的写法

App的变化

app中最大的变化即使书写html时不必加上一个根标签，当然你习惯了写也可以，其他的变化不大

常用的Composition API

组合式API

了解setup

例子如下：

首先式这个setup配置项的作用：在vue2的时候我们习惯于将数据放在data配置项中，方法放在methods配置项中，在vue3中就不再这样使用了，我们统一将这些数据方法都放在setup配置项中，然后将这些数据作为一个对象返回即可，在vue3中依然可以使用data,methods这些配置项，但不推荐混合使用因为setup无法访问data与methods中的数据，其次就是重名的问题

ref函数

我们之前学习 vue2的时候有一个ref属性，这个属性的作用是为了获取dom节点

ref函数的作用

在上面的那个例子中我们提到了一个响应式数据的问题，也就是说我们上面的数据并不是响应式的我们更改setup中的数据后，页面的数据并不会更新，所以要实现相应式的数据我们必须要使用ref函数

ref函数的工作原理

我们将数据交给ref后，它会生成一个ref引用实例对象，然后它会将我们的数据保存在value中，并生成代理（set,get函数），然后根据set和get的调用页面进行更新，所以我们在使用ref函数后如果需要在setup中使用ref代理的数据就应该使用该ref引用对象中的value属性 ，但在模版中就不需要再使用value了，因为vue会自动帮我们调用.value

例子如下：

ref处理对象类型的数据

为普通的数据添加ref对象的时候：使用代理后可以直接通过使用value来使用对象，对象也是一样的使用，应为它深层已经为我们设置好了，就不需要我们自己考虑了

例子如下：

reactive函数

作用：同样是生成响应式数据，不过这个函数式用于生成对象类型的响应式数据，而ref则什么数据都可以使用

标签：vue,数据,vue3,使用,vue2,上手,ref
来源： https://blog.csdn.net/weixin_48342617/article/details/122696241