上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]

216

主题

1775

帖子

2322

积分

管理员

非物质文化遗产社会摇传承人

Rank: 9Rank: 9Rank: 9

积分
2322
发表于 2021-12-20 22:29:02 | 显示全部楼层 | 阅读模式

前言

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

声明周期图片

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

实例的生命周期

混的人。

发表回复

本版积分规则

快速回复 返回顶部 返回列表