vue之浅析extend与手动挂载$mount

本文作者为奇舞团前端工程开发师 

vue 组件的实现方式有很多种，本文所说的是其中较少使用的一种，即由 vue 内置的 API extend 与 $mount 配合使用实现的。

一、为什么使用

1、典型使用场景的例子

渲染组件前渲染组件后

可以看到组件是在 body 标签添加进去的。关闭弹窗，组件会从 body 移除。

2、普通组件的局限性

2.1、普通组件的引用方式

ButtonCounter.vue

view.vue

2.2、普通组件的特点

由于 vue 框架多用于单页面应用，因此通常整个应用只有一个根节点，即 #app，如下：

main.js

import Vue from "vue"
import App from "./App.vue"
 
new Vue({
  render: h => h(App)
}).$mount("#app")

因此，项目内的所有内容全部在 #app 根节点下渲染。
其次，通常引入的组件会进行局部注册，模板引用组件标签，这导致组件只能在预设的位置进行渲染。

2.3、普通组件的问题

如下场景普通组件无法很好的解决：
1、组件模版是从服务端异步获取到的，并需要动态渲染。
2、实现类似原生的调用。例如，调用 window.alert() 就可以弹出弹窗。

二、如何实现

1、vue2 的实现

CreateButtomCounter.js

import Vue from "vue"
import ButtonCounter from "./ButtonCounter.vue"
 
export const CreateButtomCounter = () => {
  const ButtonCounterCom = Vue.extend(ButtonCounter)
  const instance = new ButtonCounterCom().$mount()  
  const dom = document.querySelector("#root")
  dom.appendChild(instance.$el)
}

view.vue

2、浅析

2.1、new Vue

特点：
（1）可以通过自身components引用vue.extend构造，通过自身data向构造传参
（2）可以通过自身component引用组件模版，通过自身data向组件传参
使用范围：
（1）仅限于自身

new Vue({
  el: "#app1",
  data: {
    msg: "vue实例参数"
  },
  components: {
    dt1: {
      template: "#dt1"
    },
    vueapple: Profile //【引入构造】
  }
});

2.2、Vue.extend()

简言之，通过参数传递一个配置对象（这个配置对象就是我们模板中export default的那个对象，例如data,methods,props等等）都可以传递，接下来该函数会根据我们的配置对象生成一个继承自Vue的子组件构造函数。

特点：
只能通过自身初始化结构
使用范围：
（1）挂载在某元素下
（2）被vue实例的components引用
（3）Vue.component组件引用

const ButtonCounterCom = Vue.extend(ButtonCounter)

这里创建了一个构造器，可以解决普通模板的问题。

2.3、$mount()

$mount 方法支持传入 2 个参数，第一个是 el，它表示挂载的元素，可以是字符串，也可以是 DOM 对象，如果是字符串在浏览器环境下会调用 query 方法转换成 DOM 对象的。第二个参数是和服务端渲染相关，在浏览器环境下不需要传第二个参数。

const instance = new ButtonCounterCom().$mount()

这里，$mount() 不带参数，会把组件在内存中渲染完毕。因为没有挂载到节点上，因此显示不了组件。此时的 instance 已经是一个标准的 Vue 组件实例，因此它的 $el 属性也可以被访问。

dom.appendChild(instance.$el)

instance.$el 拿到的就是组件对应的dom元素,可以直接操作dom。

3、vue3 需注意

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。