带你快速了解Vue3

首先简单介绍一下vue3和vue的区别，

vue2 的绝大多数的特性 在 Vue3 都能使用，毕竟 Vue 是渐进式的

响应式原理进行使用 Proxy 实现，v-model 可以传参了等等新特性

1，首先是基本工作，创建vue3项目，要保障电脑安装node.js的前提下，才能使用npm 命令，创建一个就可以，后面再创项目直接使用vite打包工具

# npm
npm install -g @vue/cli
# yarn
yarn global add @vue/cli

npm init vite-app 项目名
cd 项目名
npm install
npm run dev

Vue3项目目录

- src/
  - assets/             // 存放静态资源文件，如图片、样式等
  - components/         // 存放可复用的Vue组件
  - views/              // 存放页面级的Vue组件
  - router/             // 存放Vue Router的路由配置文件
  - store/              // 存放Vuex的状态管理文件
  - services/           // 存放与后端API交互的服务文件
  - utils/              // 存放通用的工具函数文件
  - App.vue             // 应用的根组件
  - main.js             // Vue应用的入口文件
- public/
  - index.html          // 应用的入口HTML文件
- package.json          // 项目的配置信息和依赖项管理文件

2，Vue3是组合式API，Vue2是分散式API;

在 Vue2.X 我们使用的是 OptionAPI 里面有我们熟悉的 data、computed、methods、watch...

在 Vue3 中，我们依旧可以使用 OptionAPI当然不建议 和 Vue3 混用

在 Vue2 中，我们实现一个功能得分到不同的地方，把数据放在 data ,computed 方法放在 methods 里面，分开的太散乱了，几个功能还好，几十个上百个，那就有点...

所以 Vue3 提出了 Composition API ，它可以把 一个逻辑的代码都收集在一起 单独写个hook,然后再引入，这样就不到处分布，显得很乱了

3,setup是vue3中的一个新的配置项，值为一个函数，我们在组件中用到的数据、方法等等，都要配置在setup中。它在beforeCreate之前执行一次，beforeCreate这个钩子 的任务就是初始化，在它之前执行，那么 this 就没有被初始化 this = undefined 这样就不能通过 this 来调用方法 和 获取属性。

4，新增了ref,reactive两个用来实现响应式数据的

值类型 vs 引用类型：

ref：ref用于创建一个包装了值类型的响应式引用。它接受一个初始值作为参数，并返回一个对象，其中value属性包含了初始值。可以通过value属性获取或修改值。
reactive：reactive用于创建引用类型的响应式对象。它接受一个普通对象或数组作为参数，并返回一个响应式代理对象。可以直接通过访问或修改属性来操作数据。
自动解包 vs 手动解包：

ref：ref对象的值可以通过value属性直接访问或修改。当在模板中使用ref时，它会自动解包，不需要额外的操作。
reactive：reactive对象的属性需要手动解包，即使用.value来访问或修改。这是因为reactive对象本身是一个代理，所以需要显式解包。

总的来说，reactive更适合处理复杂的数据结构，而ref更适合处理简单的数据类型。

5，watch和computed监听和计算属性；

watch：既要指明监视的属性，也要指明监视的回调，watch里面执行的是一个回调函数，第一个参数是监听的对象或者数组，第二是回调函数，里面有newValue和oldValue,一个是新值，一个是旧值，后面还会有一个对象，里面可以配置深度监听deep:true,立即执行immediate:true。
watchEffect：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性，回调函数里面引用那个数据，就监听那个
watchEffect跟computed类似，区别有：
computed注重的计算出来的结果（回调函数的返回值），所以必须要return;
而watchEffect更注重的是过程（回调函数的函数体）,所以不用return;

//computed计算属性有两种写法，简写是只读的
const dnum = computed(()=>num.value*2)

//完整写法，有get和set两个方法，比如全选与反选，反选就是要获取到allcheck的值，需要用到get
 //全选就需要用到set，回调函数里面会传入一个allcheck的值
const allchecked = computed({
      get :()=>{
           return produceList.value.every(item=>item.check)//反选
      }，
      set: (value)=>{
         console.log(value);
         produceList.value.forEach(item=>item.value = value)//全选
      }


 })

//watch
 watch(num,(newValue,oldValue)=>{
     console.log("num发生变化了",newValue,oldValue)
},{deep:true})
//(newValue,oldValue)如果这里面只写一个默认是新值,也就是newValue
//stop是事件，当触发该事件时，停止监听
const stop = watch(list,newValue=>{
    console.log("list发生变化了",newValue)
},{可以配置选项})

//watchEffect
watchEffect(()=>{
     //只要这里面引用的数据发生变化时都会触发这个回调函数
    console.log("num",num.value)
},{})

6,生命周期

Vue.js 3在生命周期方面对Vue.js 2进行了一些调整和改进，以提供更加一致且灵活的使用体验。通过引入新的生命周期钩子函数和使用setup函数作为Vue组件的入口点，Vue.js 3提供了更直观和清晰的生命周期管理方式。