vue的应用实例和组件实例

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