vue3总结

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.config.errorHandler = (err) => {
//定义一个应用级的错误处理器，用来捕获所有子组件上的错误。
}

app.config.warnHandler = (msg, instance, trace) => {
  // `trace` 是组件层级结构的追踪，警告仅会在开发阶段显示，因此在生产环境中，这条配置将被忽略
}

app.config.performance //设置此项为 true 可以在浏览器开发工具的“性能/时间线”页中启用对组件初始化、编译、渲染和修补的性能表现追踪。仅在开发模式和支持 performance.mark API 的浏览器中工作。

app.component('TodoDeleteButton', TodoDeleteButton)//这使得 TodoDeleteButton 在应用的任何地方都是可用的。

app.mount('#app')//确保在挂载应用实例之前完成所有应用配置！//或者
app.mount(document.body.firstChild)//也可以将app挂在到实际的dom中。

app.unmount()//卸载一个已挂载的应用实例。卸载一个应用会触发该应用组件树内所有组件的卸载生命周期钩子。

app.use()//安装一个插件。1.插件可以是一个带 install() 方法的对象，亦或直接是一个将被用作 install() 方法的函数。2.插件选项 (app.use() 的第二个参数) 将会传递给插件的 install() 方法。3.若 app.use() 对同一个插件多次调用，该插件只会被安装一次。

app.mixin()//vue3不推荐使用，勉强能用完全是为了兼容性。

app.version//提供当前应用所使用的 Vue 版本号。这在插件中很有用，因为可能需要根据不同的 Vue 版本执行不同的逻辑。

setup()//setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：1.需要在非单文件组件中使用组合式 API 时。2.需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。对于结合单文件组件使用的组合式 API，推荐通过 <script setup> 以获得更加简洁及符合人体工程学的语法。

ref()//接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

computed()//接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

reactive()//返回一个对象的响应式代理。

readonly()//接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

isRef()//检查某个值是否为 ref。

app.component()

例如：
import { createApp } from 'vue'

const app = createApp({})

// 注册一个选项对象
app.component('my-component', {
  /* ... */
})

// 得到一个已注册的组件
const MyComponent = app.component('my-component')

app.directive()

例如：
import { createApp } from 'vue'

const app = createApp({
  /* ... */
})

// 注册（对象形式的指令）
app.directive('my-directive', {
  /* 自定义指令钩子 */
})

// 注册（函数形式的指令）
app.directive('my-directive', () => {
  /* ... */
})

// 得到一个已注册的指令
const myDirective = app.directive('my-directive')

app.provide()

import { createApp } from 'vue'
const app = createApp(/* ... */)
app.provide('message', 'hello')

//在某个应用组件中
import { inject } from 'vue'
export default {
  setup() {
    console.log(inject('message')) // 'hello'
  }
}

import { inject } from 'vue'

app.provide('id', 1)

const injected = app.runWithContext(() => {
  return inject('id')
})

console.log(injected) // 1

app.config.globalProperties.msg = 'hello'

<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++

  // DOM 还未更新
  console.log(document.getElementById('counter').textContent) // 0

  await nextTick()
  // DOM 此时已经更新
  console.log(document.getElementById('counter').textContent) // 1
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

export default {
  setup(props, context) {
    // props 是响应式的，并且会在传入新的 props 时同步更新，请注意如果你解构了 props 对象，解构出的变量将会丢失响应性。
    // 该上下文对象context是非响应式的，可以安全地解构  setup(props, { attrs, slots, emit, expose })
    
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)

    //attrs 和 slots 都是有状态的对象，它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们，并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)

    // 暴露公共属性（函数）
    console.log(context.expose)

    // 将 `props` 转为一个其中全是 ref 的对象，然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)

    // 或者，将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')

    // 让组件实例处于 “关闭状态”
    // 即不向父组件暴露任何东西
    context.expose()

    const publicCount = ref(0)
    const privateCount = ref(0)
    // 有选择地暴露局部状态
    context.expose({ count: publicCount })
  }
}