[油猴脚本开发指南]应用 & 组件实例
# 前言vue系列文章基本属于vue文档的在叙述
仅仅为了防止教程断层而写
由于vue的概念过于复杂
我很难完整清晰的表述
可能在写文章的过程中出现大大小小的错误
# 应用 & 组件实例
vue的应用在初始化的过程中通过createApp函数创建一个vue应用实例开始
~~~javascript
const app = Vue.createApp({
/* 选项 */
})
~~~
Vue分为两个阶段
既createApp创建一个Vue应用实例，以及将vue应用实例挂在到页面中两个过程。
我们在创建应用实例之后可以注册全局的组件、指令等，如：
```javascript
const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)
```
并且Vue应用实例返回的方法大部分会返回同一应用实例，所以我们可以进行链式调用
```javascript
Vue.createApp({})
.component('SearchInput', SearchInputComponent)
.directive('focus', FocusDirective)
.use(LocalePlugin)
```
# 根组件
传递跟CreateApp的选项将用于配置应用的根组件，当我们挂载应用的时候，根组件将会用于渲染的开始
如果你想挂载到页面中，即调用应用实例的mount函数
```javascript
const RootComponent = {
/* 选项 */
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')
```
于其他方法不同，mount不返回应用实例，而是根组件实例。
组件也可以继续嵌套组件，所以当我们宏观来看类似于html树结构
```javascript
Root Component
└─ TodoList
├─ TodoItem
│├─ DeleteTodoButton
│└─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
```
每个组件都有一个自己的组件实例，并且对于一个组件，可能进行多次渲染，但所有的组件实例都会共享一个应用实例。
# 组件实例Property
我们在data定义的property是通过组件实例暴露在外的
```javascript
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是实例创建后所执行的代码
```javascript
Vue.createApp({
data() {
return { count: 1}
},
created() {
// `this` 指向 vm 实例
console.log('count is: ' + this.count) // => "count is: 1"
}
})
```
还有一些其他钩子，在不同时期呗调用，注意，生命周期的钩子的this是指向当前的组件实例。
所以不要使用箭头函数，因为箭头函数没有this
# 声明周期图片
关于生命周期的具体情况可以查看下方图片
页:
[1]