Vue 全局API

yuhuo2022-05-14开发库框架库

参考链接

Vue实例

说明

Vue 实例的其他属性方法，参考：组合式API。

version

返回 Vue 版本号。

createApp()

全局方式

<script src="https://unpkg.com/vue@3"></script>

<div id="app">count is {{ count }}</div>

<script>
	const app = Vue.createApp({
    	data() {
      		return {
        		count: 0,
      		}
    	}
  	});
</script>

模块化方式

<script type="importmap">
	{
		"imports": {
         	"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
		}
	}
</script>

<div id="app"></div>

<script type="module">
    // 引入vue
    import { createApp } from "vue"; // 使用导入映射表
    // import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
    // 引入根组件
    import App from "./app.js";
    // 创建应用
    const app = createApp(App);
</script>

// app.js
export default {
    // 模板（根组件没有该选项时，将使用容器的 innerHTML 作为模板）
    template: `<div>count is {{ count }}</div>`,
    // 数据
    data() {
        return {
            count: 0,
        };
    },
};

createSSRApp()

以 SSR 激活open in new window模式创建一个应用实例。用法与 createApp() 完全相同。

defineComponent()

在定义 Vue 组件时提供类型提示的帮助函数，配合 TypeScript 使用。

// webpack需要添加/*#__PURE__*/注释，以便被 tree-shake，vite则不需要
export default /*#__PURE__*/ defineComponent({
    data() {
        return {}
    },
    methods: {},
})

defineAsyncComponent()

定义一个异步组件。

<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>

高级选项

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
});

defineCustomElement()

<script setup>
import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // 这里是同平常一样的 Vue 组件选项
  props: {},
  emits: {},
  template: `...`,

  // defineCustomElement 特有的：注入进 shadow root 的 CSS
  styles: [`/* inlined css */`]
})

// 注册自定义元素之后，所有此页面中的 `<my-vue-element>` 标签，都会被升级
customElements.define('my-vue-element', MyVueElement)
</script>

<template>
	<my-vue-element></my-vue-element>
</template>

应用实例

config

应用配置对象

// 未捕获错误处理函数
app.config.errorHandler = (err, instance, info) => {
  	// err 错误对象
    // instance 来源组件实例
    // info 错误来源类型字符串
}

// vue警告处理函数
app.config.warnHandler = (msg, instance, trace) => {
	// err 警告信息字符串
    // instance 来源组件实例
    // info 组件追踪字符串
}

// 是否在浏览器开发工具的“性能/时间线”页中启用对组件初始化、编译、渲染和修补的性能表现追踪
// 默认false
app.config.performance = false;

// 编译器选项，默认{}
app.config.compilerOptions = {
    // 指定一个检查方法来识别原生自定义元素
    isCustomElement: (tag) => {},
    // 调整模板中空格的处理行为：condense（默认），preserve
    whitespace: "condense",
    // 调整模板内文本插值的分隔符
    delimiters: ['{{', '}}'],
    // 调整是否移除模板中的 HTML 注释
    comments: false,
}
// 添加全局实例属性或方法
app.config.globalProperties.msg = "hello";

// 定义自定义组件选项的合并策略的对象
app.config.optionMergeStrategies.msg = (parent, child) => {
  return (parent || '') + (child || '')
}

// 判断是否为原生标签
app.config.isNativeTag = (tag) => isHTMLTag(tag) || isSVGTag(tag);

// 使用 vue.computed() 时需要配置为 true，vue3.3之后不需要
app.config.unwrapInjectedRef = true;

version

返回 Vue 版本号。

component()

注册或获取全局组件。

import MyComponent from './App.vue';
// 引入组件的vue或js文件
app.component('MyComponent', MyComponent);

// 直接定义组件
app.component('MyComponent',{
    	template: `<div>count is {{ count }}</div>`,
        data() {
            return {
                count: 0,
            };
        },
	}
);

// 获取已注册的全局组件
const MyComponent = app.component('MyComponent')

provide()

供给全局数据。

app.provide('key', 'value');

directive()

定义全局自定义指令。

app.directive('focus', {
  	/* 钩子函数 */
    created(el, binding, vnode, prevVnode) {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeUnmount() {},
    unmounted() {}
});
// 简化形式
app.directive('color', (el, binding) => {
  	// 在 mounted 和 updated 时都调用
  	el.style.color = binding.value;
})

参见组件选项-directive

use()

安装插件。

// 插件：带安装函数 install() 的对象
var plugin = {
    install(app, options) {
        // 添加某些全局功能，场景如下：
        // app.component() 注册全局组件
        // app.directive() 定义全局自定义指令
        // app.provide() 供给全局数据
        // app.config.globalProperties 添加全局实例属性或方法
    }
}
// 插件：安装函数
var plugin = function(app, options) {}

app.use(plugin, {
    /* 可选的选项，作为 options 参数 */
});

mount()

将应用程序实例挂载在一个容器元素中。

app.mount("#app");

unmount()

卸载一个已经挂载好的应用实例，会触发应用组件树上所有组件的卸载生命周期钩子。

app.unmount();

组件实例

$data

获取组件数据对象

$props

获取组件 props 对象

$el

获取组件 DOM 元素对象

$options

获取组件 options 对象

$parent

获取父组件对象

<!-- 父组件 -->
<template>
<div class="child"></div>
</template>
<script>
export default {
  	mounted() {
      	// 获取父组件对象
      	const parent = this.$refs.parent;
        // 访问父组件属性和方法
        const message = parent.message;
      	parent.show();
  	}
}
</script>

$root

当前组件树的根组件实例。如果当前实例没有父组件，那么这个值就是它自己。

$slots

一个表示父组件所传入插槽的对象。

export default {
  	render() {
        // 默认插槽, 返回一个 vnode 数组
        return this.$slots.default();
    },
}

$refs

获取 DOM 元素对象

<template>
	<!-- 单个元素 -->
	<div ref="box"></div>
	<!-- 列表元素 -->
	<div v-for="item in list" ref="items">{{ item.name }}</div>
</template>
<script>
export default {
    data() {
        return {
            list: [
                { id: 1, name: "张三" },
                { id: 2, name: "李四" },
                { id: 3, name: "王五" },
            ],
        } 
    },
    mounted() {
        // 元素对象
    	const box = this.$refs.box;
        // 元素对象数组
        const items = this.$refs.items;
  	}
};
</script>

函数型 ref

<template>
	<input :ref="change">
</template>
<script>
export default {
    methods: {
        // 组件更新时调用，el为元素对象
        change(el) {
        	// doSomething
        }
  	}
};
</script>

组件上的 ref

<template>
  	<Child ref="child" />
</template>
<script>
import Child from './Child.vue'
export default {
  	components: {
    	Child
  	},
  	mounted() {
      	// 获取子组件实例
      	const child = this.$refs.child;
        // 访问子组件属性和方法
        const message = child.message;
      	child.show();
  	}
}
</script>

$attrs

获取透传属性对象

参见组件选项-inheritattrs

$watch()

创建侦听器

export default {
	created() {
        // 创建侦听器
    	const unwatch = this.$watch('message', (newValue, oldValue) => {
      		// doSomething
    	}, {
            // 深层侦听对象以及对象里的属性变化
          	deep: true,
			// 创建侦听器时，立即执行一遍回调
			immediate: true,
            // 刷新时机：pre 组件更新之前（默认），post 组件更新之后，sync 异步
            flush: 'post',
        });
        // 停止侦听器
        unwatch();
  	}
}

$emit()

<!-- 父组件 -->
<template>
	<div class="parent">
        <!-- 监听子组件触发的事件 -->
		<Child @enlarge="handle"></Child>
    </div>
</template>
<script>
import Child from './Child.vue'
export default {
  	components: { Child },
    methods: {
        handle(param1, param2) {
            // doSomething
        },
    },
}
</script>

<!-- 子组件 -->
<template>
	<button @click="show()">按钮</button>
</template>
<script>
export default {
    // 声明需要触发的自定义事件，当与原生事件重名时可以避免被当成原生事件
  	emits: ['enlarge'],
    methods: {
        show() {
            // 触发事件
            this.$emit('enlarge', "参数1", "参数2")
        },
    },
}
</script>

$forceUpdate()

强制该组件重新渲染。

$nextTick()

等待下一次 DOM 更新刷新的工具方法。

export default {
	data() {
        return {
            count: 0,
        };
    },
	methods: {
    	increment() {
      		this.count++;
      		this.$nextTick(() => {
        		// 访问更新后的 DOM
      		});
    	}
  	}
}

TODO

Vue 全局API

# Vue实例

# version

# createApp()

# createSSRApp()

# defineComponent()

# defineAsyncComponent()

# defineCustomElement()

# 应用实例

# config

# version

# component()

# provide()

# directive()

# use()

# mount()

# unmount()

# 组件实例

# $data

# $props

# $el

# $options

# $parent

# $root

# $slots

# $refs

#

# $attrs

# $watch()

# $emit()

# $forceUpdate()

# $nextTick()

#

ON THIS PAGE

Vue实例

version

createApp()

createSSRApp()

defineComponent()

defineAsyncComponent()

defineCustomElement()

应用实例

config

version

component()

provide()

directive()

use()

mount()

unmount()

组件实例

$data

$props

$el

$options

$parent

$root

$slots

$refs

$attrs

$watch()

$emit()

$forceUpdate()

$nextTick()