npm init vite@latest
或者
npm init vue@latest

ref和reactive区别

1、ref支持所有类型，reactive适合引用类型（Array Object Map Set）
2、ref取值、赋值都需要加 .value，reactive不需要
3、reactive不能直接赋值，会破坏响应式对象
解决方法：数组可以使用push加解构  或者  添加一个对象，把数组作为一个属性去解决

1、toref只能修改响应式对象的值，非响应式视图毫无变化

vite解决@问题

在config.js中进行配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path');
export default defineConfig({
      plugins: [vue()],
      resolve:{
          //配置路径别名
          alias:{
                  '@': path.resolve(_dirname, './src'),
                },
        },
})

vue2 和 vue3 数据拦截不同的点

vue2：Object.defineProperty
vue3：new Proxy

解决import{ ref, reactive... } 引入问题

1、下载安装
npm i unplugin-auto-import -D

2、在vite.config.js中进行配置

08e4a6e127da9145208f74daf461d0c.png

vue2 和 vue3 钩子函数对比

58f07c4dcb8e02aa30204b0dda590a4.png

vue3 watch和watchEffact对比

watch 特点

watch 监听函数可以添加配置项，也可以配置为空，配置项为空的情况下，watch的特点为：

有惰性：运行的时候，不会立即执行；
更加具体：需要添加监听的属性；
可访问属性之前的值：回调函数内会返回最新值和修改之前的值；
可配置：配置项可补充 watch 特点上的不足：
immediate：配置 watch 属性是否立即执行，值为 true 时，一旦运行就会立即执行，值为 false 时，保持惰性。
deep：配置 watch 是否深度监听，值为 true 时，可以监听对象所有属性，值为 false 时保持更加具体特性，必须指定到具体的属性上

watchEffect 特点

非惰性：一旦运行就会立即执行；
更加抽象：使用时不需要具体指定监听的谁，回调函数内直接使用就可以；
不可访问之前的值：只能访问当前最新的值，访问不到修改之前的值；