[油猴脚本开发指南]应用 & 组件实例

李恒道

前言

vue系列文章基本属于vue文档的在叙述

仅仅为了防止教程断层而写

由于vue的概念过于复杂

我很难完整清晰的表述

可能在写文章的过程中出现大大小小的错误

应用 & 组件实例

vue的应用在初始化的过程中通过createApp函数创建一个vue应用实例开始

const app = Vue.createApp({
  /* 选项 */
})

Vue分为两个阶段

既createApp创建一个Vue应用实例，以及将vue应用实例挂在到页面中两个过程。

我们在创建应用实例之后可以注册全局的组件、指令等，如：

const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

并且Vue应用实例返回的方法大部分会返回同一应用实例，所以我们可以进行链式调用

Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

根组件

传递跟CreateApp的选项将用于配置应用的根组件，当我们挂载应用的时候，根组件将会用于渲染的开始

如果你想挂载到页面中，即调用应用实例的mount函数

const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

于其他方法不同，mount不返回应用实例，而是根组件实例。

组件也可以继续嵌套组件，所以当我们宏观来看类似于html树结构

Root Component
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

每个组件都有一个自己的组件实例，并且对于一个组件，可能进行多次渲染，但所有的组件实例都会共享一个应用实例。

组件实例Property

我们在data定义的property是通过组件实例暴露在外的

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

不仅有data，还有其他组件选项，如methods，props等等。

Vue还通过组件实例暴露了一些内置的属性和函数，如attrs，emit等等

为了避免于用户定义冲突，通常会在前面加一个美元字符

生命周期钩子

在组件创建-》更新-》销毁的时候

我们有各式各样的需求

所以vue在各种位置做了钩子回调

一旦触发响应的流程，就会执行对应的回调函数

方便让我们执行我们的操作

如created是实例创建后所执行的代码

Vue.createApp({
  data() {
    return { count: 1}
  },
  created() {
    // `this` 指向 vm 实例
    console.log('count is: ' + this.count) // => "count is: 1"
  }
})

还有一些其他钩子，在不同时期呗调用，注意，生命周期的钩子的this是指向当前的组件实例。

所以不要使用箭头函数，因为箭头函数没有this

声明周期图片

关于生命周期的具体情况可以查看下方图片