应用&组件实例

964 阅读2分钟

1.创建一个应用实例

每个Vue应用都是通过用createApp函数创建一个新的应用实例开始的。

  • 该应用实例是用来在应用中注册“全局”组件的
  • 应用实例暴露的大多数方法都会返回该同一实例,允许链式

2.根组件

传递给creatApp的选项用于配置根组件。当我们挂载应用时,该组件被用作渲染的起点。

  • 一个应用需要被挂载到一个DOM元素中:例如id=“app”,mount应该传入‘#app’
  • mount不返回应用本身,返回根组件实例(vm:ViewModel)
  • 大多数真实应用都是被组织成一个嵌套的、可重用的组件树
  • 每个组件将有自己的组件实例vm,应用中的所有组件实例将共享同一个应用实例

3.组件实例property

在data中定义的property是通过组件实例暴露的,还有其他组件选项,可以将用户定义的property添加到组件实例中,例如:methods,props,computed,inject,setup。

  • 组件实例的所有property,无论如何定义,都可以在组件的模板中访问
  • Vue还通过组件实例暴露一些内置property,如attrsattrs和emit

4.生命周期钩子

每个组件在被创建时都要经过一系列的初始化过程:设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM。在这个过程中会运行一些叫做生命周期钩子的函数,给了用户在不同阶段添加自己的代码的机会。

  • created钩子:可以用来在一个实例被创建后执行代码
  • mounted、updated、unmounted等
  • 生命周期钩子的this上下文指向调用它的当前活动实例
  • 箭头函数没有this,因此不要再选项property或回调上使用箭头函数

5.生命周期图示

lifecycle.png