Vue3 - vue3 API学习 - 《GF编程库》

全局 API
- createApp()
- app实例属性方法
组合式API

全局 API

createApp()

创建应用实例 、第一个参数是 根组件 通常我们都是用app.vue, 第二个参数支持传入根组件的props属性
function createApp(rootComponent: Component, rootProps?: object): App

// main.ts
import { createApp } from "vue";
import App from "App.vue";
const app = createApp(App,{
  name:"gf"
})
app.config.errorHandler = (err) => {
  /* 处理错误 */
}
// App.vue
<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps({
  name: String
})
console.log(props) // { name: "gf" }
</script>

app实例属性方法

app.mount()

将应用实例挂载到某个dom节点下

// html
<body>
    <div id="app"></div>
    <div id="app2"></div>
    <script type="module" src="/src/main.ts"></script>
</body>
// main.ts
import { createApp } from "vue"
import App from "App.vue"
const app = createApp(App)
app.mount('#app')
// 挂载多个节点
const buttonText = ref('按钮文案')
const app2 = createApp({
  render: () => {
    return h(
      'div',
      {
        style: {
          width: '100px',
          height: '30px',
          background: 'red',
        },
        onClick: () => {
          buttonText.value = '修改按钮文案'
        },
      },
      [h('button', buttonText.value)]
    )
  },
})
app2.mount('#app2')

app.unmount()

将应用实例卸载

// main.ts
import { createApp, h, ref } from 'vue'
const buttonText = ref('按钮文案')
const app2 = createApp({
  render: () => {
    return h(
      'div',
      {
        style: {
          width: '100px',
          height: '30px',
          background: 'red',
        },
        onClick: () => {
          // 卸载应用
          app2.unmount()
        },
      },
      [h('button', buttonText.value)]
    )
  },
})
app2.mount('#app2')

app.provide()

向所有子代组件注入内容、子代组件通过 inject 接收链接

// main.ts
import { createApp } from 'vue'
import App from './views/app.vue'
const app = createApp(App)
app.provide('rootData', { mes: '根节点注入的provide' })
app.mount('#app')
// app.vue
<script setup lang="ts">
import { inject } from 'vue'
import children from './children.vue'
const rootData = inject('rootData')
console.log('rootData', rootData)
</script>
<template>
  <children></children>
</template>
// children.vue
<template>
  <div class="com" style="width: 100px; height: 100px; background: red">页面2</div>
</template>
<script setup lang="ts">
import { inject } from 'vue'
const rootData = inject('rootData')
console.log('rootData', rootData)
</script>

app.component()

注入 全局组件 链接

// main.ts
import { createApp } from "vue";
import App from "App.vue";
import MyButton from "../button.vue";
const app = createApp(App);
app.component("MyButton", MyButton);
app.mount("#app")
// App.vue
<template>
  <div>
    <MyButton></MyButton>
  </div>
</template>

app.directive()

注入 全局指令 链接

// main.ts
import { createApp } from 'vue'
import type { DirectiveBinding } from 'vue'
import App from './views/app.vue'
const app = createApp(App)
app.directive('my-directive', {
  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
    el.innerText = binding.value
  },
  unmounted() {
    console.log('节点被卸载')
  },
})
app.mount('#app')
// App.vue
<script setup lang="ts">
import { ref } from 'vue';
const v = ref('button文案')'
</script>
<template>
  <div>
    app页面
    <button v-my-directive="v"></button>
  </div>
</template>

app.use()

使用一个 插件 , 插件的理解是你可以做一些插件包给别的开发者使用、插件的作用在于可以在整个工程中做一些全局性的注入! 链接

// 写一个插件、注入全局color指令
// main.ts
import { createApp } from 'vue'
import App from './views/app.vue'
import Color from 'plugin-color'
const app = createApp(App)
app.use(Color)
app.mount('#app')
// plugin-color.js
import type { App, DirectiveBinding } from 'vue'
function colorPlugn() {
  const _install = (app: App, options?: { defaultColor: string }) => {
    app.directive('color', {
      beforeMount(el: HTMLElement, binding: DirectiveBinding) {
        el.style.color = binding.value ?? options?.defaultColor
      },
    })
  }
  return {
    install: _install,
  }
}
// app.vue
<script setup lang="ts">
const color = 'red'
</script>
<template>
  <div>
    app页面
    <span v-color>默认颜色</span>
    <span v-color="color">红色</span>
  </div>
</template>

app.version()

获取vue版本、一般用于版本判断

import { createApp } from 'vue'
import App from './views/app.vue'
const app = createApp(App)
console.log('vue版本', app.version)
app.mount('#app')

app.config()

vue配置选项、vue2在原型挂载内容到vue3都挂载到app.config里面、还包括vue3一些编译配置项设置、自定义元素配置等等….

app.config.globalProperties()

配置全局属性或方法、小尤目前推荐使用provide方式使用全局属性方法 链接

// main.ts
import { createApp } from 'vue'
import App from './views/app.vue'
const app = createApp(App)
app.config.globalProperties.globalName = '张三'
app.config.globalProperties.getGlobalName = function () {
  return app.config.globalProperties.globalName
}
app.mount('#app')
// app.vue
<script setup lang="ts">
import { getCurrentInstance } from 'vue'
import type { proxyRefs } from 'vue'
const { proxy } = getCurrentInstance()
console.log(proxy.globalName)
</script>
<template>
  <div>app页面</div>
</template>

app.compilerOptions = {…}

编译配置选项

interface ComponentOptions {
  compilerOptions?: {
    isCustomElement?: (tag: string) => boolean  // 判断自定义元素配置
    whitespace?: 'condense' | 'preserve' // 默认：'condense' 用于调整模板中空格的处理行为
    delimiters?: [string, string] // 默认：['{{', '}}'] 用于调整模板内文本插值的分隔符。
    comments?: boolean // 默认：false
  }
}

组合式API

定义props

使用 withDefaults() 可以定义默认值

// button.vue
<template>
  <div style="width: 100px; height: 100px; background: red">
    {{ props.name }}
  </div>
</template>
<script setup lang="ts">
import { defineProps, withDefaults } from 'vue'
// 定义Props
const props = withDefaults(
  defineProps<{ 
    name: string 
    age?: number
  }>(),
  { age: 18 } //定义默认值
)
</script>
// app.vue
<script setup lang="ts">
import MyButton from './button.vue'
</script>
<template>
  <MyButton name="张三"></Button>
  <span>{{ props.age }}</span>
</template>

子组件派发事件

// Mybutton.vue
<template>
   <button @click="displayMes">派发事件</button>
</template>
<script setup lang="ts">
  import { defineEmits } from 'vue'
  // 定义emit
  const emit = defineEmits<{
    (e: 'getName', v: string): void
  }>()
  // 派发事件
  function displayMes() {
    emit('getName', props.name)
  }
</script>
//app.vue
<script setup lang="ts">
  import MyButton from './my-button.vue'
  function myButtonGetName(v: string) {
    console.log(v)
  }
</script>
<template>
  <MyButton @getName="myButtonGetName"></MyButton>
</template>

父组件获取子组件实例

这里需要通过defineExpose导出去的才能被父组件拿到

// MyButton.vue
<template>
  <div style="width: 100px; height: 100px; background: red">
    <button @click="displayMes">派发事件</button>
  </div>
</template>
<script setup lang="ts">
function getName() {
  console.log('ref调用方式', '李四')
}
// 定义导出的方式
defineExpose({
  getName,
  name:'李四'
})
</script>
// app.vue
<script setup lang="ts">
import { ref } from 'vue'
import MyButton from './my-button.vue'
const myButtonRef = ref()
function getMybutton() {
  myButtonRef.value.getName() // 'ref调用方式', '李四'
  console.log(myButtonRef.value.name) //李四 
}
</script>
<template>
  <MyButton ref="myButtonRef"></MyButton>
  <button @click="getMybutton">获取子组件实例</button>
</template>

useSlots和useAttrs

<script setup lang="ts">
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>