vue分享会准备

Vue实体对象

// Vue 2.x
const vm = new Vue({
	datas: {
		message: 'Hello Vue!'
	}
});
// 透过 $mount 挂载至指定的网页模板
vm.$mount('#app');

// Vue 3.0
const vm = Vm.createApp({
	data() {
		return {
			message: 'Hello Vue 3.0!'
		}
	}
});
vm.mount('#app');

定义一个组件ButtonCounter.vue

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

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

const count = ref(0)
</script>

使用组件ButtonCounter.vue按需引入

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
  <ButtonCounter />
  <ButtonCounter />
</template>
<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>

组件注册

1、全局注册：让组件在当前 Vue 应用中全局可用
如果使用单文件组件，你可以注册被导入的 .vue 文件：

import { createApp } from 'vue'
import MyComponent from './App.vue'

const app = createApp({})
app.component('MyComponent', MyComponent)

.component() 方法可以被链式调用：

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

全局注册的组件可以在此应用的任意组件的模板中使用：

<!-- 这在当前应用的任意组件中都可用 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

2、局部注册：局部注册的组件在后代组件中并不可用
在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册：

<template>
  <ComponentA />
</template>

<script setup>
import ComponentA from './ComponentA.vue'
</script>

如果没有使用 <script setup>，则需要使用 components 选项来显式注册：

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

全局注册虽然很方便，但有以下几个问题：

全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。

全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。