原谅我标题的不合时宜，只不过现在一直在做react开发，导致vue新知识的补充不及时，但是作为我的”母语“,还是要学一学看一看的

创建项目

    使用脚手架

    vue create projectName

（选择vue3）

    或者基于vite

    npm init vite-app projectName 

多实例创建

    vue3通过暴露createApp允许项目中定义多个实例，它们相互独立互不影响

异步组件

    使用defineAsyncComponent来注册一个异步组件并挂载到指定的实例上，仅在被挂载的实例的组件树中可用

（异步组件挂载需要在获得实例后，实例挂载前；这在实际渲染前应该和vue2一样放个占位符；异步组件在打包后会被分包出来）

自定义指令

    命名变化

        bind→beforeMount

        inserted→mounted

        componentUpdated→updated

        unbind->unmounted

    新增

        beforeUpdate：元素本身更新之前调用

        beforeUnmount：卸载元素之前调用

    移除

        update

teleport

    将子组件脱离，挂载到指定dom节点

    对于一些需要根据每个组件或路由而动态显示内容的组件很有用，比如h5中的title组件，每一个路由的名称都不一样，则可以在子组件内部去挂载标题，而不是通过导航守卫或vuex来做

（样式也在组件内维护）

多根

（类似react的<></>）

    通过v-bind="attrs"在节点上继承组件使用时传递的属性

函数式组件

    和react的函数式组件差不多

优先级

    v-if修改为比v-for优先级高

    标签属性以属性顺序，后向前覆盖

组合式API--setup

    setup

        在setUp中返回的值可以在模板中直接访问，且接收props和context两个参数，前者是父组件传递的数据，后者则是当前组件自身的一些api能力

    reactive | readonly | shallowReactive | shallowReadonly

        上一个示例中的a值不是响应式的，需要借助reactive，并且将其修改为对象，同时提供一个修改接口，这有点像react的const [a,setA] = useState来管理状态

（readonly  标识不可便，shallowXXX 标识被锁定的范围，如shallowReadonly 则只锁定第一层不可修改）

    toRaw | markRaw

        前者返回代理对象的源对象，后者将普通对象转换为不可代理的对象

    ref | toRef | unref | toRefs | isRef | shallowRef | triggerRef

        上一个例子我们解决了响应式的问题，但是我们却把a从number类型修改成了对象，这主要是因为vue3使用proxy做响应式处理。对于非对象的基本类型，可以使用ref

（当对reactive中的值进行结构后返回，则需要使用toRef重新响应式赋能；toRefs则针对整个对象做解构处理）

        除此之外，ref也可以用来获取dom引用

（框红的两个地方必须一致）

    effect | watch | watchEffect

        effect和react的useEffect很像，但他的依赖不需要传递，而是vue根据内部使用到的响应式数组作为依赖项

        effect对ref包装的值是无效的，如果想要对ref进行监听，则可以使用watch。其参数一可以是对象、数组或函数（返回值为true时执行）

    computed

        同vue2的computed

    provide，inject

        同vue2的跨级通信

    生命周期、计算属性、侦听属性

（在框黄的位置发现，setup内的生命周期和组件的生命周期是一致的）

            参数

                参数一是props，需要注意的是如果想要使用es6的解构赋值语法的话，需要借助toRefs或toRef函数，前者用于确定值，后者则作用于可选值（官方文档说直接解构会导致props失去响应式，但是我这里测试没有发现，不知道是不是写的不对，代码如下）

（或许是理解有偏差，props的更新是可以实时反应到子组件的）

                参数二是context上下文，它提供了slots、attrs和emit三个属性

                    emit这玩意儿和之前的this.$emit是一样的，都是父子组件通信手段

                slots也是向setup暴露的作用域插槽，这在setup中使用render函数时有用

    不同的setup间通信

（readonly保证了数据的单项流动，ref使基本值响应，reactive则将对象变为响应式）

（helloword的子组件，app的孙组件）