Vue 的构造器——extend 与手动挂载$mount

Posted 2023-05-04

参考技术A 参考资料:掘金小册 《Vue组件精讲》 八九课

一、使用场景

1.常规的组件使用方式的特点：

2.常规组件只能在规定的地方渲染组件，在一些特殊场景就比较局限了，例如：

二、用法

创建一个Vue实例时，都会有个选项el，来指定实例的根节点，如果不写el选项，那组件就处于未挂载状态。Vue.extend的作用，就是基于Vue构造器，创建一个子类，它的参数跟 new Vue的基本一样，但data要跟组件一样，是个函数，再配合$mount，就可以让组件渲染，并且挂载到任意指定节点，比如body。

实现同样的效果，除了用extend，还可以直接创建Vue实例，并且用Render函数来渲染一个.vue组件。这样既可以用.vue来写复杂的组件，还可以根据需要传入适当的props。渲染后想操作渲染的实例也很简单。

需要注意的是，手动用 mount渲染的组件，要销毁需要用 $destroy来手动销毁实例。必要时可以用removeChild把节点从DOM中移除。

三、实战1——如何动态渲染.vue文件的组件

1.接口设计：常规的.vue文件包含3个部分，template、script、style。用extend构造组件实例时，它的选项template就对应<template>部分，其余选项对应<script>部分，样式可以先不管。所以拿到一个.vue文件，只需要把<template>、<script>、<style>分别用正则分割出来，对应传给extend就可以创建实例了。

2.实现
(1)创建display目录，并新建display.vue文件

(2) 父级传递的code被分割，并保存在data的html、js、css中。
(3) this.js是字符串，可以通过 new Function(this.js)转成对象类型
(4) 用extend构造实例并挂载到组件的节点上

(5)加载css，就是创建一个style标签，然后把css写进去，再插入到页面的head中。为了便于后面在this.code变化或组件销毁时移除动态创建的style标签，给每个style标签加一个随机id用于标识。
(6)在beforeDestroy钩子中手动销毁extend创建的实例及css

3.这样动态渲染的Display组件可以用来干什么？
比如要写一套Vue组件库的文档，传统方法是在开发环境写一个一个.vue的文件，然后编译打包、上传资源、上线，如果要修改，哪怕一个标点符号，都要重新上线。但是有了Display组件，只需要提供一个服务来在线修改文档的.vue，就能实时更新，不用打包上传、上线。
还可以用来做在线写示例、实时运行的网站。

四、实战2——如何通过命令式调用组件
待完善...

vue -- 组件构造器(extend)

extend创建的是一个组件构造器，而不是一个具体的组件实例，最终还是要通过Vue.component注册才可以使用
组件构造器相当于Vue.component()方法的第二个参数部分

const Loading = Vue.extend({
    template: ``,
    data () {
        return {
            hello: ''
        }
    }
})

// 注册局部组件
Vue.component('loading', Loading)

组件构造器实例化后，传入的data数据需要放在propsData中

new Loading({
    propsData: {
        hello: '你好'
    }
}).$mount('#div')

$mount()方法表示将组件挂载，#div表示挂载到id为div的DOM上