读 Vue3 API 记录

标签：自定义 记录 app value API 应用 Vue3 组件 config

应用实例

创建一个应用const app = createApp()

将应用挂载在一个容器元素中  app.mount('#app')

卸载一个已挂载的应用 app.unmount()

提供一个值，可以在应用中的所有后代组件中注入使用 app.provide(key,value) 

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象 app.config.globalProperties.msg = 'hello'

在某个组件中使用app应用provide中定义的值 inject(key)

在应用中注册全局组件 app.component(componentName,component)

在应用中注册全局指令 app.directive(directiveName,{/*指令钩子*/})

在应用中安装一个插件 app.use(pluginName)

用于为应用内抛出的未捕获错误指定一个全局处理函数 app.config.errorHandler = (err, instance, info) => { }

用于为 Vue 的运行时警告指定一个自定义处理函数（dev） app.config.warnHandler = (msg, instance, trace) => { // `trace` is the component hierarchy trace }

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

用于指定一个检查方法来识别原生自定义元素 // 将所有标签前缀为 `ion-` 的标签视为自定义元素 app.config.compilerOptions.isCustomElement = (tag) => { return tag.startsWith('ion-') }

用于调整模板中空格的处理行为 app.config.compilerOptions.whitespace

用于调整模板内文本插值的分隔符 app.config.compilerOptions.delimiters

用于调整是否移除模板中的 HTML 注释 app.config.compilerOptions.comments = true

一个用于定义自定义组件选项的合并策略的对象  app.config.optionMergeStrategies

======================================

通用

暴露当前所使用的 Vue 版本 import { version } from 'vue'

等待下一次 DOM 更新刷新的工具方法 import { nextTick } from 'vue'

在定义 Vue 组件时提供类型推导的辅助函数 import { defineComponent } from 'vue' ？？？

定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象 defineAsyncComponent ？？？

返回一个原生自定义元素类的构造器 defineCustomElement

=======================================

组合式api

===========================

响应式核心

ref  原理：重新定义属性的实现方式

reactive 原理 实现对象代理 简单例子：

<script>
        let targetMap = new WeakMap();
        // ref 原理，重新定义属性的实现方式
        let rawString = "a"
        class refImpl {
            _value = null;
            constructor(_rawValue) {
                this._value = _rawValue
            }
            get value() {
                return this._value;
            }
            set value(newValue) {
                this._value = newValue
            }
        }

        let refString = new refImpl(rawString)

        // reactive 原理 实现对象代理
        let rawObj = {
            "a": 1
        }

        function reactive(rawValue) {
            return new Proxy(rawValue, {
                get(target, property, _) {
                    return target[property]
                },
                set(target, property, value) {
                    target[property] = value
                }
            })
        }

        let reactiveObj = reactive(rawObj)

 

  。。。。。next

标签：自定义,记录,app,value,API,应用,Vue3,组件,config
From： https://www.cnblogs.com/Merrys/p/16938876.html