应用API

应用API:

createApp({}): 返回一个应用实例

vue2: 
    import Vue from 'vue'
    new Vue({
        el: '#app',
        router,
        store,
        render: h => h(App)
    })


vue3:
    import { createApp } from 'vue';
    const app = createApp(App);
    app.mount("#app").use(router).use(store);

    或者

    import Vue from 'vue'
    const app = Vue.createApp(App);
    app.mount("#app").use(router).use(store);

component: 注册或检索全局组件

注册： 注册一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})

config: 应用配置对象

app.config = {..}

directive: 自定义指令

// 注册
app.directive('my-directive', {
  // 指令是具有一组生命周期的钩子：
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 绑定元素的父组件挂载时调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 卸载绑定元素的父组件时调用
  unmounted() {}
})

// 注册 (功能指令)
app.directive('my-directive', () => {
  // 这将被作为 `mounted` 和 `updated` 调用
})

// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')

mixin: 全局混入(注意: 使用全局混入，它将影响每一个之后创建的组件)

app.mixin({
    created() {
        const myOption = this.$options.myOption
        if (myOption) {
            console.log(myOption)
        }
    }
})  
app.mount('#mixin-global')

mount: 将应用实例的根组件挂载在提供的DOM元素上

app.mount('#app')

unmount: 在提供的 DOM 元素上卸载应用实例的根组件

app.unmount('#app')

provide/inject: 多层级的组件嵌套，可以通过这对CP在想用的某个嵌套层级的组件使用，避免一层层去传递而增加代码量

//  基本使用方式
const app = Vue.createApp({})
app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  // -----------提供
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- 模板的其余部分 -->
    </div>
  `
})
app.component('todo-list-statistics', {
    // ------------子组件注入
    inject: ['user'],
    created() {
       console.log(`Injected property: ${this.user}`) // > 注入 property: John Doe
    }
})


// 响应式式方案
app.component('todo-list', {
  provide() {
    return {
      // computed
      todoLength: Vue.computed(() => this.todos.length)
    }
  }
})

use: 引入插件

app.use(router)
app.use(store)