2025-5-14Vue3快速上手
1、vite是新一代构建工具，实现真正的按需加载
2、在终端输入该命令即可创建vue3项目
npm create vue@latest
3、飘红是因为没安装依赖
在项目终端运行
npm i
4、env.d.ts文件是用于为非代码文件声明模块类型，帮助ts识别和处理非代码文件
5、补充export和import相关知识
Vue export、import、export default的详解-CSDN博客
6、在组件的script标签中补充lang="ts"
7、Vue.js Devtools_7.7.0_Chrome插件下载_极简插件
8、vue2是选项式API，vue3是组合式API
组合式API可以把同一个功能的data,method,computed放在一起以函数的形式统一管理
9、vue只能写一个根标签，但是vue3可以写多个根标签
以下是vue3的写法，如果vue2这样写会报错
vue3的Fragment支持减少了无意义的包裹元素
10、setup概述
（1）vue3的setup函数中是不能使用this的
为什么
setup中不能使用this？
- 执行时机更早：
setup在组件实例初始化之前执行，此时组件实例尚未创建，因此this不存在或指向undefined。- Composition API 设计：Composition API 强调函数式编程，通过返回值暴露数据和方法，而非依赖
this上下文。
（2） setup函数中的 变量和方法需要return，才能提供给模版使用
在 Vue 3 的 setup 函数中，变量和方法必须通过 return 暴露后，才能在模板（template）中使用。这是因为 setup 函数是 Composition API 的入口，其内部作用域默认对模板不可见，需要显式返回才能建立连接。
（3）setup的返回值可以是一个渲染函数
当 setup 返回一个函数时，Vue 会将其视为渲染函数，并使用该函数的返回值作为组件的渲染结果
如下：返回一个箭头函数，箭头函数的返回值“哈哈”将会直接渲染到页面
