掘金小册：Vue 的构造器——extend 与手动挂载$mount
参考资料:掘金小册 《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——如何通过命令式调用组件 待完善...
更多文章：
2024年12月18日 18:30
口袋妖怪碧粉蝶（《口袋妖怪X/Y》路人蝶有多种形态 根据时区分）
2023年12月10日 22:10
弗雷戴在nba为啥不行？弗雷戴特复出后，上海队能打进季后赛吗
2024年7月11日 01:27
2024年7月11日 11:42
2025年1月26日 01:51
2019欧冠淘汰赛尤文vs马竞（尤文VS马竞，C罗跑向禁区内准备抢点时，5名马竞球员为什么跟着他不放）
2024年12月6日 10:21
2024年7月6日 20:10
2024年7月16日 15:10
韦世豪葡萄牙女朋友（中国女排又一女神，17岁男友是篮球运动员，两人在一起很幸福，她是谁呢）
2025年4月5日 13:30
2025年5月5日 08:02
9798赛季ac米兰阵容（07~08赛季AC米兰排的什么阵型你们说08~09赛季排什么阵型）
2024年1月5日 10:10
2024年7月16日 22:56
2025年2月25日 20:41
佛罗伦萨小镇有哪些品牌（上海佛罗伦萨小镇值得逛的品牌有哪些）
2024年7月18日 11:59
角球之家app（足球比赛中进攻方射门击中对方门柱或者横梁为什么是球门球不是角球 我认为应该是角球，大家说呢）
2025年4月18日 09:04
cba总决赛即将开打事件（广东天才临阵受伤！杜锋总决赛前再次遇到难题，辽篮却兵强马壮）
2025年3月23日 15:27
2025年4月19日 13:02
齐格勒消防车（车载灭火器哪个牌子好 车载灭火器十大品牌介绍）
2025年4月17日 04:00
中华高手在异界（主角重生异界的修真小说，出生在大家族的，主角要厉害的）
2024年12月25日 00:02
2024年7月22日 10:41
