组件化

Vue 的组件化核心是组件系统，利用 ES 模块化完成了 Vue 组件系统的构建

组件化 是 抽象小型、独立、可预先定义配置、可利用的组件

  • 小型 页面的构成拆分成一个个小单元
  • 独立 每一个小单元心可能都独立开发
  • 预先定义 小单元都可以先定义好，在需要的时候导入使用
  • 预先配置 小单元可以接收一些在使用时需要的一些配置
  • 可复用 小单元可以在多个地方使用

可利用性要适当地考量

  • 有些组件确实是不需复用
  • 可配置性越高， 功能性就越强

组件最大的作用是独立开发、预先配置

  • 为了更好的维护和扩展

组件的嵌套形成一个组件树

应用实例

createApp -> 创建 APP -> 返回一个应用实例
应用实例主要用来注册全局组件

  • 实例上暴露了很多方法
    • component 注册组件
    • directive 注册指令
    • filter 注册过滤器
    • use 使用插件
  • 大多数这样的主方法都会返回 createApp 创建出来的应用实例
    允许链式操作 ```javascript // Application 应用 const app = Vue.createApp({});

// 返回原本的应用实例 app.component(‘MyTitle’, { data() { return { title: ‘I LOVE VUE!!!’ } }, template: <h1 v-to-lower-case>{{ title }}</h1> }).directive(‘toLowerCase’, { mounted(el) { el.addEventListener(‘click’, function() { this.innerText = this.innerText.toLowerCase(); }, false); } });

app.mount(‘#app’);

  1. ```html
  2. <div id="app">
  3.     <my-title></my-title>
  4. </div>

根组件

根组件的本质就是一个对象 {}
createApp 执行的时候需要一个根组件 createApp({})
根组件是 Vue 渲染的起点

根元素是一个 HTML 元素
createApp 执行创建 Vue 应用实例时，需要一个 HTML 根元素 <div id="app"></div>

  1. const RootComponent = {
  2.     data() {
  3.       return {
  4.         a: 1,
  5.       b: 2,
  6.       total: 0
  7.     }
  8.   },
  9.   mounted() {
  10.     this.plus();
  11.   },
  12.   methods: {
  13.       plus() {
  14.         return this.a + this.b;
  15.     }
  16.   },
  17.   template: `<h1>{{ a }} + {{ b }} = {{ total }}</h1>`
  18. }
  20. const app = Vue.createApp(RootComponent);
  21. const vm = app.mount('#app');

mount 方法执行返回的是根组件实例
vm -> ViewModel -> MVVM -> VM
Vue 不是一个完整的 MVVM 模型

组件实例

每个组件都有自己的组件实例
一个应用所有组件都共享一个应用实例
无论是根组件还是应用内其它的组件，配置选项、组件行为是都一样的

  1. const MyTitle = {
  2.   props: ['content']
  3.     template: `
  4.         <h1 :title="content">
  5.             <slot></slot>
  6.         </h1>
  7.     `,
  8.   mounted() {
  9.       console.log(this);
  10.   }
  11. }
  13. const MyAuthor = {
  14.     template: `
  15.         <p>
  16.             Author: <slot></slot>
  17.         </p>
  18.     `
  19. }
  21. const MyContent = {
  22.     template: `
  23.         <p @click="toLowerCase">
  24.             <slot></slot>
  25.         </p>
  26.     `,
  27.   methods: {
  28.       toLowerCase() {
  29.            this.$emit('to-lower-case');
  30.     }
  31.   }
  32. }
  34. const App = {
  35.     component: {
  36.       MyTitle,
  37.     MyAuthor,
  38.     MyContent
  39.   },
  40.   data() {
  41.       return {
  42.         title: 'This is a TITLE',
  43.       author: 'Xiaoye',
  44.       content: 'This is a CONTENT'
  45.     }
  46.   }, 
  47.   template: `
  48.         <div>
  49.             <my-title :content="title">{{ title }}</my-title>
  50.             <my-author>{{ author }}</my-title>
  51.             <my-content @to-lower-case="toLowerCase">{{ content }}</my-title>
  52.         </div>
  53.     `,
  54.   methods: {
  55.       toLowerCase() {
  56.         this.content = this.content.toLowerCase();
  57.     }
  58.   }
  59. }
  61. const app = Vue.createApp(App);
  62. const vm = app.mount("#app“)

组件实例可以添加一些属性 property
data / props / components / methods …
this -> $attres / $emit Vue 组件实例内置方法 $