概述

面对复杂问题的处理方式

  • 任何一个人处理信息的逻辑能力都是有限的
  • 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容
  • 但是，我们人有一种天生的能力，就是将问题进行拆解
  • 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解

组件化也是类似的思想

  • 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展
  • 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了
  • 如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目

可以说整个的大前端开发都是组件化的天下

  • 无论从三大框架（Vue、React、Angular），还是跨平台方案的 Flutter，甚至是移动端都在转向组件化开发，包括小程序的开发也是采用组件化开发的思想

我们需要通过组件化的思想来思考整个应用程序

  • 我们将一个完整的页面分成很多个组件
  • 每个组件都用于实现页面的一个功能块
  • 而每一个组件又可以进行细分
  • 而组件本身又可以在多个地方进行复用
<body>

  <div id="app">
    <h2>{{message}}</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.组件: App组件(根组件)
    const App = {
      data() {
        return {
          message: "Hello Vue"
        }
      }
    }

    // 1.创建app
    const app = Vue.createApp(App)

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
  • 上前面我们的 createApp 函数传入了一个对象 App，这个对象其实本质上就是一个组件，也是我们应用程序的根组件
  • 组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用
  • 任何的应用都会被抽象成一颗组件树

注册组件

组件分成两种

  • 全局组件：在任何其他的组件中都可以使用的组件
  • 局部组件：只有在注册的组件中才能使用的组件

全局组件

注册全局组件:

  • 使用全局创建的 app 来注册组件
  • 通过 component 方法传入组件名称、组件对象即可注册一个全局组件
  • 在 App 组件的 template 中直接使用这个全局组件

代码演示:

<body>

  <div id="app">
    <!-- 1.内容一: -->
    <product-item></product-item>
    
    <!-- 2.内容二: -->
    <product-item></product-item>

    <!-- 3.内容三: -->
    <product-item></product-item>
  </div>


  <!-- 组件product-item的模板 -->
  <template id="item">
    <div class="product">
      <h2>我是商品</h2>
      <div>商品图片</div>
      <div>商品价格: <span>¥9.9</span></div>
      <p>商品描述信息, 9.9秒杀</p>
    </div>
  </template>
  
  <script src="../lib/vue.js"></script>
  <script>
    /*
      1.通过app.component(组件名称, 组件的对象)
      2.在App组件的模板中, 可以直接使用product-item的组件
    */

    // 1.组件: App组件(根组件)
    const App = {}

    // 2.创建app
    const app = Vue.createApp(App)

    // 3.注册一个全局组件
    // product-item全局组件
    app.component("product-item", {
      template: "#item"
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>

组件本身也可以有自己的代码逻辑

  • 比如自己的 data、computed、methods 等等
// 注册全局组件
app.component("product-item", {
  template: "#product",
  data() {
    return {
      title: "我是商品Item",
      price: 9.9
    }
  },
  methods: {
    favarItem() {
      console.log("收藏了当前的item")
    }
  }
})

在通过 app.component 注册一个组件的时候，第一个参数是组件的名称

  • 可以使用 kebab-case（短横线分割符）
    • 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case
  • 可以使用 PascalCase（驼峰标识符）
    • 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用
app.component("product-item", {
    /*...*/
}
/*或者下面*/
app.component("ProductItem", {
    /*...*/
}

局部组件

全局组件往往是在应用程序一开始就会全局组件完成，那么就意味着如果某些组件我们并没有用到，也会一起被注册

  • 比如我们注册了三个全局组件：ComponentA、ComponentB、ComponentC
  • 在开发中我们只使用了 ComponentA、ComponentB，如果 ComponentC 没有用到但是我们依然在全局进行了注册，那么就意味着类似于 webpack 这种打包工具在打包我们的项目时，我们依然会对其进行打包
  • 这样最终打包出的 JavaScript 包就会有关于 ComponentC 的内容，用户在下载对应的 JavaScript 时也会增加包的大小

在开发中我们通常使用组件的时候采用的都是局部注册

  • 局部注册是在我们需要使用到的组件中，通过 components 属性选项来进行注册
  • 比如之前的 App 组件中，我们有 data、computed、methods 等选项了，事实上还可以有一个 components 选项
  • 该 components 选项对应的是一个对象，对象中的键值对是组件的名称: 组件对象

Vue 开发模式

上面开发过程中都是在 html 文件中，通过 template 编写自己的模板、脚本逻辑、样式等

随着项目越来越复杂，我们会采用组件化的方式来进行开发

  • 意味着每个组件都会有自己的模板、脚本逻辑、样式等
  • 可以把它们抽离到单独的 js、css 文件中，但是它们还是会分离开来
  • 包括 script 是在一个全局的作用域下，很容易出现命名冲突的问题
  • 且代码为了适配一些浏览器，必须使用 ES5 的语法
  • 代码完成之后，依然需要通过工具对代码进行构建、代码

在真实开发中，我们可以通过一个后缀名为 . vue 的 single-file components (SFC, 单文件组件) 来解决，并且可以使用 webpack 或者 vite 或者 rollup 等构建工具来对其进行处理

单文件的特点

  • 代码的高亮
  • ES6、CommonJS 的模块化能力
  • 组件作用域的 CSS
  • 可以使用预处理器来构建更加丰富的组件，比如 TypeScript、Babel、Less、Sass等

如果想要使用这一的 SFC 的 . vue 文件，比较常见的是两种方式

  • 方式一：使用 Vue CLI 来创建项目，项目会默认帮助我们配置好所有的配置选项，可以在其中直接使用 . vue 文件
  • 方式二：自己使用 webpack 或 rollup 或 vite 这类打包工具，对其进行打包处理

在公司进行开发，通常都会采用 Vue CLI 的方式来完成

Vue 脚手架

脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架

在真实开发中，我们通常会使用脚手架来创建一个项目，Vue 的项目我们使用的就是 Vue 的脚手架

Vue 的脚手架就是 Vue CLI

  • CLI 是 Command-Line Interface, 翻译为命令行界面
  • 可以通过 CLI 选择项目的配置和创建出我们的项目
  • Vue CLI 已经内置了 webpack 相关的配置，我们不需要从零来配置

安装和使用

一般是全局安装，这样在任何时候都可以通过 vue 的命令来创建项目

npm install @vue/cli -g

升级 Vue CLI

npm update @vue/cli -g

使用脚手架创建项目

Vue create 项目的名称

项目的目录结构

"scripts": {
    "server": "vue-cli-service server",
    "build": "vue-cli-service build"
}

运行原理

组件生命周期

每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程

$refs $ parent 和$root

某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例

  • 在 Vue 开发中不推荐进行 DOM 操作的
  • 可以给元素或者组件绑定一个 ref 的 attribute 属性

组件实例有一个$refs 属性

  • 它一个对象 Object，持有注册过 ref attribute 的所有 DOM 元素和组件实例
visitElement() {
    // 访问元素
    console.log(this.$refs.title);
    // 访问组件实例
    console.log(this.$refs.helloCpn.$el);
    // 访问组件实例
    this.$refs.helloCpn.showMessage();
}

通过 $parent 来访问父元素

代码演示:
Banner. vue

<template>
  <div class="banner">
    <h2>Banner</h2>
  </div>
</template>
<script>
  export default {
    created() {
    },
    methods: {
      bannerClick() {
        console.log("bannerClick")
      }
    }
  }
</script>
<style scoped>
</style>

App. vue

<template>
  <div class="app">
    <h2 ref="title" class="title" :style="{ color: titleColor }">{{ message }}</h2>
    <button ref="btn" @click="changeTitle">修改title</button>
    <banner ref="banner"/>
  </div>
</template>
<script>
  import Banner from "./Banner.vue"
  export default {
    components: {
      Banner
    },  
    data() {
      return {
        message: "Hello World",
        titleColor: "red"
      }
    },
    methods: {
      changeTitle() {
        // 1.不要主动的去获取DOM, 并且修改DOM内容
        // this.message = "你好啊, 李银河!"
        // this.titleColor = "blue"

        // 2.获取h2/button元素
        console.log(this.$refs.title)
        console.log(this.$refs.btn)

        // 3.获取banner组件: 组件实例
        console.log(this.$refs.banner)

        // 3.1.在父组件中可以主动的调用子组件的对象方法
        this.$refs.banner.bannerClick()

        // 3.2.获取banner组件实例, 获取banner中的元素
        console.log(this.$refs.banner.$el)

        // 3.3.如果banner template是多个根, 拿到的是第一个node节点
        // 注意: 开发中不推荐一个组件的template中有多个根元素
        // console.log(this.$refs.banner.$el.nextElementSibling)

        // 4.组件实例还有两个属性(了解):
        console.log(this.$parent) // 获取父组件
        console.log(this.$root) // 获取根组件
      }
    }
  }
</script>
<style scoped>
</style>

动态组件

想要实现了一个功能, 点击一个 tab-bar，切换不同的组件显示

有两种不同的实现思路来实现

  • 方式一：通过 v-if 来判断，显示不同的组件
  • 方式二：动态组件的方式

动态组件是使用 component 组件，通过一个特殊的 attribute is 来实现

currentTab 的值

  • 全局注册：可以是通过 component 函数注册的组件
  • 布局注册：在一个组件对象的 components 对象中注册的组件

动态组件的传值

  • 将属性和监听事件放到 component 上来使用
<component name="fredo"
           :age="20"
           @pageClick="pageClick"
           :is="currentTab"/>

代码演示:

<template>
  <div class="app">
    <div class="tabs">
      <template v-for="(item, index) in tabs" :key="item">
        <button :class="{ active: currentTab === item }" 
                @click="itemClick(item)">
          {{ item }}
        </button>
      </template>
    </div>
    <div class="view">
      <!-- 1.第一种做法: v-if进行判断逻辑, 决定要显示哪一个组件 -->
      <!-- <template v-if="currentIndex === 0">
        <home></home>
      </template>
      <template v-else-if="currentIndex === 1">
        <about></about>
      </template>
      <template v-else-if="currentIndex === 2">
        <category></category>
      </template> -->

      <!-- 2.第二种做法: 动态组件 component -->
      <!-- is中的组件需要来自两个地方: 1.全局注册的组件 2.局部注册的组件 -->
      <!-- <component :is="tabs[currentIndex]"></component> -->
      <component name="fredo" 
                 :age="20"
                 @homeClick="homeClick"
                 :is="currentTab">
      </component>
    </div>
  </div>
</template>

<script>
  import Home from './views/Home.vue'
  import About from './views/About.vue'
  import Category from './views/Category.vue'

  export default {
    components: {
      Home,
      About,
      Category
    },
    data() {
      return {
        tabs: ["home", "about", "category"],
        // currentIndex: 0
        currentTab: "home"
      }
    },
    methods: {
      itemClick(tab) {
        this.currentTab = tab
      },
      homeClick(payload) {
        console.log("homeClick:", payload)
      }
    }
  }
</script>

<style scoped>
  .active {
    color: red;
  }
</style>

keep-alive

在之前案例中, 进行切换不同组件后, 原来的组件会销毁 (unmount), 若之前组件记录数据, 再切换回来后会重新创建新的组件, 原数据就会丢失

若想继续保持组件的状态，而不是销毁掉，这个时候就可以使用一个内置组件： keep-alive

<keep-alive include="home,about">
    <component name="fredo"
               :age="20"
               @pageClick="pageClick"
               :is="currentTab"/>
</keep-alive>

属性

  • include - string | RegExp | Array。只有名称匹配的组件会被缓存
  • exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存
  • max - number | string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁

include 和 exclude prop 允许组件有条件地缓存

  • 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
  • 匹配首先检查组件自身的 name 选项
<!--逗号分隔字符串-->
<keep-alive include="a,b">
    <component :is="view"></component>
</keep-alive>
<!--regex(使用 'v-bind')-->
<keep-alive include="/a|b">
    <component :is="view"></component>
</keep-alive>
<!--array(使用 'v-bind')-->
<keep-alive include="['a','b']">
    <component :is="view"></component>
</keep-alive>

缓存组件

对于缓存的组件来说，再次进入时，是不会执行 created 或者 mounted 等生命周期函数的

  • 但是有时候又确实希望监听到何时重新进入到了组件，何时离开了组件
  • 这个时候可以使用 activated 和 deactivated 这两个生命周期钩子函数来监听
activated() {
  console.log("about activated")
}, 
deactivated() {
  console.log("about deactivated")
},