vue的应用实例和组件实例

vue 专栏收录该内容
8 篇文章 0 订阅

vue的应用实例和组件实例

  • 创建一个vue的应用实例

    • 通过createApp函数创建

    • const app = Vue.createApp({})  //app就是应用实例
      
    • 应用实例可以用于注册全局组件

    • app.component('组件名',Xcomponent)
      
    • 应用实例上的很多方法都允许链式

    • Vue.createApp({})
      	.component('组件名',Xcomponent)
      

      之所以可以进行链式调用,是因为它们都返回同一个app实例

  • 根组件

    • 利用createApp创建实例时需要传递一个选项表示根组件的配置

    • import {createApp} from 'vue'
      import App from './App.vue'
      
      createApp(App).mount('#app')   App就是根组件的配置
      
    • 可通过mount方法将一个应用挂载到一个DOM中,当挂载时,根组件会作为渲染的起点。需要注意:mount返回的是根组件实例,而不是应用实例

    • const app = createApp(App)
      console.log(app);
      console.log(app.mount('#app'));
      
      • 一个根组件时可以包含n个子组件,每个组件将有自己的组件实例,在这里插入图片描述
        这些组件实例都共享同一个应用实例
  • 组件配置选项

    • data中定义的属性都是通过组件实例暴露

    • data(){
      	return {
      		name:'app'
      	}
      }
      定义之后我们通过组件实例来获取  
      console.log(vm.name) //app
      
    • 其他选项如methods、props、computed、inject和setup,当中定义的属性也会添加到组件实例中

    • 组件实例的所有属性,都可以在组件的模板中访问

    • 组件实例还存在一些内置属性,如$attrs 和 emit

  • 生命周期钩子函数

    • 每个组件在被创建时都会经过一系列的初始化过程,这个过程中会运行一些生命周期钩子函数

    • 该过程会包括模板编译、挂载、数据变化、更新DOM等
      
    • 作用是:用户可以在组件的不同阶段添加自己的代码

    • 常见的钩子函数,如created、mounted、updated和unmounted等

    • 这里面的this指向调用它的当前活动实例

    • 注:不要再选项配置的属性中使用箭头函数,也不要在钩子函数的回调中使用箭头函数,因为箭头函数中没有this

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值