vue3.0学习日常，慢慢整理吧

了解下pnpm
好多大佬写的项目 https://vue3js.cn/
vite搭建3.0项目终端不要用git
应用包 2.0用vuter 3.0用volar
3.0需要安装全局的ts-node typescript
npm install -g ts-node
npm install -g typescript
需要安装个全局的cross-env（原因：windows不支持NODE_ENV=development的设置方式）
npm install -g cross-env –save-dev
然后在cmd中执行下面命令可以成功：
cross-env NODE_ENV=development nodemon --watch ‘app/**/*’ -e ts --exec ‘ts-node’ app.ts

vue3中没有this对象, 所有的逻辑代码都写在setup方法里面.
若是要在HTML模板页面中使用变量或者方法, 需要在setup方法return出去.

关于为何声明周期为何都要定义在setup里

vue 3.0项目搭建
使用vite脚手架搭建指令： npm init vite-app 项目名字
使用vue-cli搭建指令： vue create 项目名称

vite官方中文文档地址：https://cn.vitejs.dev/guide/features.html#glob-import

Composition API
好处不仅仅是以不同的方式进行编码，更重要的是对于代码的重用
npm install @vue/composition-api --save
main.js
import VueCompositionApi from ‘@vue/composition-api’
Vue.use(VueCompositionApi)
为什么要用？
1.使用ref定义字符串，数组等变量值；
带 ref 的响应式变量
ref 接受参数并返回它包装在具有 value 属性的对象中，然后可以访问它或者变更此响应式变量的值
在 Vue 3.0 中，我们可以通过使用一个新的 ref 函数使任何变量在任何地方变成响应式
2.变量赋值需要使用.value；
3.为什么所有声明的变量值都要用ref（）包裹
4.toRefs

解决了在template中必须使用data.girls的方式使用变量， 现在可以直接使用变量名称了；

vue3.0手动配置路由

https://www.cnblogs.com/zsg88/p/15652750.html
vite搭建的vue项目配置路由的时候为了实现‘自动加载其他路由模块’
出现了异步问题
同步任务：会立即执行的任务
异步任务：不会立即执行的任务（异步任务又分为宏观任务和微观任务）
宏观任务的方法有：
script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)；
微观任务的方法有：
Promise.then、MutaionObserver、process.nextTick(Node.js 环境)，async/await实际上是promise+generator的语法糖，也就是promise，也就是微观任务；

// 先来看下下面这段代码
async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2');
}
 
console.log('script start');
 
setTimeout(function() {
  console.log('setTimeout');
}, 0)
 
async1();
 
new Promise(function(resolve) {
  console.log('promise1');
  resolve();
}).then(function() {
  console.log('promise2');
});
console.log('script end');
 
 
/*执行结果
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

从上往下看，先走同步队列，再走异步队列（包含微观任务队列和宏观任务队列）。（await后的代码块会放入微观任务中，await前的代码块会立即执行）

同步队列：script start → async1 start → async2 → promise1 → script end

异步队列：包括微观任务和宏观任务。

微观任务：async1 end → promise2

宏观任务: setTimeout（如果发现该宏观任务中依然有script，promise，async
，setTimeOut，则循环执行知道只想完所有的宏观任务为止）