关于大前端的笔记（8）Vue3基础二
搭建Vue项目，可以通过手动搭建或者脚手架搭建。
手动搭建：1. 下载Vue3构建文件直接使用；2. 使用webpack搭建；3. 使用rollup搭建。
脚手架搭建：1. vue/cli； 2. vite
现代项目一般推荐使用vite, 使用命令pnpm create vite vue-demo –template vue-ts
vue3的SFC组件文件一般以<script setup lang=”ts”> 开头，这句话的意思是：
内置Composition API：
- ref、reactive、coumputed: js中操作要用ref.value, 在模板中直接用ref即可。基础数据类型的响应式：相当于给ref.value赋值，把value挂在响应式的对象上。const count = ref(0)和const count = reactive({value: 0})两个“等价”， ref是reactive的语法糖，两者的区别是：reactive在模板中也要用variable.value的写法。computed用于将基础响应式数据派生出来计算属性。
- watch: 可以监听数组，此时newValue, oldValue都是新值和旧值的数组。第一个参数是watch的对象，第二个是监听函数，第三个是可选的配置对象，immediate设置为true的时候表示初始化的时候就触发一次watch.
- watchEffect是watch的语法糖。
- watchPostEffect和watch的区别：watch发生在onUpdated之前，watchPostEffect发生在onUpdated之后。但是可以把watch的第三个参数中设置flush: ‘post’来获得跟watchPostEffect类似的效果。watchSyncEffect是在最前面，可以用flush:’sync’模拟。
5. 工具函数：
a. isRef: 判断一个数据是不是ref响应式数据
b. isReactive：判断一个数据是不是reactive响应式数据
c. isProxy: 判断一个数据是否是代理数据
d. unRef: 把一个数据从ref响应式转成非响应式
e. toRef: 把普通数据转成响应式数据
f. toRefs: 将 reactive 对象的所有属性转换为 ref 。
g: toValue:获取ref的value
h:shallowRef: 只能响应单层数据的变化，对多层的响应方式：const handleClick = () => {
personRef.value.age++;
triggerRef(personRef);
};
声明周期
onRenderTracked/onRenderTriggered:
onErrorCaptured: 返回false, 则异常不会向上传递
自定义指令：另一种形式的面向切面，可以把一些处理逻辑封装到指令中，使用的时候用自定义指令即可。
teleport:react/vue中， 所有内容都挂载在一个root节点下的，但是提供方法把某个元素放到app之外。多用于模态框。
