好事总会发生在下个转弯。希望你的愿望都能一一实现。

本文纯属个人理解，学习记录知识的笔记，如有错误请指出，我会及时改正谢谢！！

vue3新特性

创建实例使用createApp，单页面中可以有多个实例

一.异步组件需要使用defineAsyncComponent创建

全局注册

const app = createApp(App)
const AsyncComp = defineAsyncComponent(() =>
import('./components/AsyncComp.vue')
)
app.component('async-component', AsyncComp)

二.自定义指令的更新

自定义指令的钩子
// vue2
bind - 指令绑定到元素后发生。只发生一次。
inserted - 元素插入父 DOM 后发生。
update - 当元素更新，但子元素尚未更新时，将调用此钩子。
componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。.
// vue3
bind → beforeMount
inserted → mounted
beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
componentUpdated → updated
beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
unbind -> unmounted

三.Teleport

将组件的DOM可以放到指定的节点，脱离父子关系

<div class="app">
    <Teleport to="body">
      <input type="text">
    </Teleport>
</div>

四.Data

data的声明现在必须是function声明返回

五.多根节点组件和函数是组件

多根节点允许 template 标签内直接出现多个子集标签，注意默认根节点需要明确指定

<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
// $attrs 默认本来绑定在唯一根节点上，多节点时需要明确指定挂在哪个节点下

六.组合式API

1.setup 函数组件创建前执行的初始化函数，默认参数包含 props 和 context。context 可以理解为组件实例挂载之前的上下文（虽然这么理解，但不是实例本身，这点要清楚），所以实例上的 attrs，slots，emit 可以在 context 上访问到。

2.reactive | readonly | shallowReactive | shallowReadonly

用于创建响应式的对象，isReactive 可以判断对象是否为响应式的。isProxy 区分是哪种方法创建的代理对象，isReadonly 判断对象是否为 readonly 创建。shallowXXX 根据名称可知，只将对象自身的浅层属性进行转换，深层属性保持不变。

3.toRaw | markRaw

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

常用于包装基本类型值为响应式对象，例如 const box = ref(0), box.value === 0

unref: isRef(data) ? data.value : data

shallowRef：创建浅层的包装对象

triggerRef：人为触发订阅了 shallowRef 的副作用。

5.effect | watch | watchEffect

对数据源的更新订阅，一旦订阅的数据发生变化，将自动执行副作用函数。效果与 vue2

的 watch 配置类似。

6.computed

基于响应式数据生成衍生数据，且衍生数据会同步响应式数据的变化，效果与 vue2 的computed 属性一样。

provide，inject

跨组件传递数据的方案。

import {h, reactive} from 'vue'
setup() {
  const data = reactive({count: 0})
  const increament = () => {
    data.count ++
  }
  const printCountRef = () => {
    console.log(++count.value)
  }
  return () => h('div', {
  onclick: increament
  }, 'composition', data.count, increament)
}

7.基于 setup 方法使用的生命周期钩子同样有对应更新（这里不需要this）

beforeCreate -> setup()

created -> setup()beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeUnmount -> onBeforeUnmount

unmounted -> onUnmounted

errorCaptured -> onErrorCaptured // 错误上报钩子，仅做了解

renderTracked -> onRenderTracked // { key, target, type } 仅做了解

renderTriggered -> onRenderTriggered // { key, target, type } 仅做了解

8.终极简化：单文件组件

defineProps，defineEmits 直接在

// 在<script setup>内部的顶层变量，均能直接用于模板部分，

// 省略了 setup 函数及其返回值

<template>

  <span @click="increment">{{count}}</span>

</template>

<script setup>

import { ref } from 'vue'

const count = ref(0)

const increment = () => {

count.value++

}

</script>

vue3入门学习笔记