vue.extend、 new vue()、component、render

前言
vue菜鸟一枚，对vue.extend、 new vue()、component、render比较懵逼，理不清关系，用法，查看了一些博文后，这里记录一下自己一点浅显的理解。

1.vue.extend、 new vue()
vue.extend() 是new vue() 的一个子类。用法都一样，都是实例化一个对象，然后是挂载到到dom元素上。

注意：
（1）挂载到dom元素，其次vue.extend（）里面的的HTML模板 （template："<p>hello</p>"） 会覆盖被挂载的那个dom元素。 new vue() 里面的 render 的模板也会覆盖被挂载的那个dom元素。

（2）vue.extend（）中的data是一个函数且返回一个对象。

2.vue.component全局注册和局部注册components
通过component注册组件不会覆盖原有的dom元素，直接把标签放到相应元素内就可使用。

下面进行实例对比
1.component注册使用

2.new 实例().$mount() 被挂在的元素会被覆盖

3.new vue()挂载到组件， render渲染的组件会覆盖被挂在的dom元素

注意
1.vue.extend()完了需要操作new 实例().$mount() ，才能挂载。

2.图片中的两种挂载方法

延伸：vue.extend（）的传参propsData

参考：
https://blog.csdn.net/dkr380205984/article/details/80116024
https://blog.csdn.net/Dear_Mr/article/details/72627214

热门标签