Vue 常见 API 及问题

组件通信

---

父子组件通信通过 props 和 $emit 相信小伙伴们都清楚，那么毫无关联的两个组件如果需要实现通信，又有哪些方法呢？相信小伙伴们可能第一时间想到了 vuex，但是如果只是简单的业务逻辑，vuex 的引入和维护就没有那么必要~~~我百度了一下，大部分有说通过 使用 Vue事件总线（EventBus） 来进行处理无关联组件之间的通信，当然也有说 vue 自身就有自定义事件 event.$on、event.$emit、event.$off 来进行相关逻辑处理，其实两者殊途同归，用法差异不大，来看栗子：

• 初始化 event

// event.js
import Vue from 'vue'
export default new Vue()

• 组件 A，通过 event.$emit 发送事件

• 组件 B，通过 event.$on 接收事件

上述代码中，特意将组件 B 中的 mounted 函数内的方法进行了封装，而不是直接写，是为了保证在页面销毁时对该方法进行及时移除，我们也可以使用 event.$off('aMsg', this.addMsgFromA) 来移除应用内所有对此某个事件的监听。或者直接调用 event.$off() 来移除所有事件频道，不需要添加任何参数 。

生命周期

---

Vue 的声明周期基本可以分为三个阶段：

• 挂载阶段
  beforeCreate、created、beforeMount、mounted
• 更新阶段
  beforeUpdate、updated
• 销毁阶段
  beforeDestroy、destroyed

created 和 mounted 的区别？

• created 页面还没有开始渲染，但是页面的实例已经初始化完成(此时可以获取到 data 和 methods 中的数据，无法获取 DOM 节点)；mounted 页面完成渲染，此时组件在网页上绘制完成。此时可获取到 DOM 节点。

父子组件生命周期调用顺序

---

写一个简略版的 todoList ，查看父子组件的生命周期调用顺序。

• 父组件

• 子组件 List

• 子组件 Input

挂载阶段的执行渲染结果为：index created => list created => list mounted => index mounted，基本可以说明：父子组件渲染的挂载阶段是由外向内在向外进行执行的。而更新阶段渲染结果为：index beforeUpdate => list beforeUpdate => list updated => index updated，基本逻辑流程和挂载阶段差不多。

$nextTick

---

• Vue 是异步渲染

• data 改变之后，DOM 不会立刻渲染

• $nextTick 会在 DOM 渲染之后被触发，以获取最新 DOM 节点

其实很好理解，因为 Vue 中所有 DOM 的渲染都是异步的，所以我们在 DOM 渲染之后直接获取 DOM 元素可能会有偏差，使用 $nextTick 可以保证所有异步渲染完成之后再来执行，如下栗子：

slot

---

• 基本使用 (父组件往子组件中插入一段内容)

// 父组件




// 子组件

• 作用域插槽 (子组件 data 中的数据传递给父组件)。子组件通过 :slotData 绑定要传递的 data 中的数据，父组件通过 template 包裹定义 v-slot 接收，然后直接插值调用。如下栗子：

// 父组件

  
    
  


// 子组件

  
    {{ website.subTitle }}
  

• 具名插槽 (父组件通过 v-slot 与子组件 slot 中的 name 值进行绑定)

// 父组件

  
  
这里的内容会被插入到子组件的 main 中
  

// 子组件

  

    
  
  

    
  
  

    
  

mixin

---

• 多个组件有相同的逻辑，抽离出来

• mixin 并不是完美的解决方案，会有一些问题

• 变量来源不明确，不利于阅读

• 多 mixin 可能会造成命名冲突

• mixin 和组件可能会出现多对多的关系，复杂度较高

• Vue 3 提出的 Composition API 旨在解决这些问题

当然缺点固然很多，但是日常开发中使用 mixin 还是非常符合 真香定律 的。基础用法：

//mixin.js
export default {
  data() {
    return {
      city: '上海'
    }
  },
  methods: {
    showName() {
      console.log(this.name)
    }
  },
  mounted() {
    console.log('mixin.js mounted', this.name) // 先于 vue 模板中的 mounted 执行
  }
}

city 和 showName 我们都没有在模板中直接定义，而是定义在 mixin.js 中，但是我们却可以直接使用，这是因为 mixins 会将 mixin.js 中的内容和我们 vue 模板中的内容进行融合，从而导致多个地方都可以直接使用 mixin.js 中的内容。

动态组件

---

• :is = "component-name" 用法

• 需要根据数据，动态渲染的场景。即组件类型不确定。

光说可能有点混，但是开发中还真的遇到过~~~举个栗子：

有没有感觉多此一举，但是 vue 将其作为 API 独立出来还是有一定意义的，开发中很多位置还是会用到的，像组件切换，Tab 等确实会用到，具体实用场景小伙伴可自行斟酌哦~~~

异步组件

---

• import() 函数

• 按需加载，异步加载大组件

感觉这个用法和 vue-router 差不多，具体看栗子一目了然：