Vue - 组件和Vue.extend

Posted 2023-03-09

参考技术A

在初学 Vue 的时候,都是利用 cdn 的方式在一个页面中导入 vue.js 的库文件.

接着,肯定就学到了组件开发.

当然,也是在单页面中.

API文档告诉我们

在后来,学到了使用 vue-cli 搭配 .vue 模板的方式开发组件.

好了,三种组件创建的方式说完了,且在各自的环境里都能够正常的运作.

在 Vue 开发中,所有的组件本质上都是由一个继承自 Vue 的构造函数创建的.

比如在注册局部组件时.

从视觉上,我们看到 TodoListComp 只是一个普通的 Object 对象.

直接赋值给了其他组件的 components 属性里.

然后,这个组件就成为了一个局部组件,并可以在注册了当前组件的内部去使用了.

那它在内部做了什么,导致这个普通的对象最后可以被当成是一个正常的组件来使用呢?

比如,普通对象上都没有 $el 之类的属性.丢给 components 之后,就啥都有了.

使用Vue.extend(options)会根据传入的options创建一个VueComponent的组件构造函数并返回.

既然使用 Vue.extend 会返回一个组件的构造函数.

那么我们就可以使用 new 这个返回的构造函数

并手动的 mount 并替换某个 dom 节点(就和 new App() 一样)

前面,我么已经知道了,所有的 vue 组件,不管是全局的还是局部的.

都是利用 Vue.extend 方法构建并返回出一个继承自 Vue 的组件构造函数.

这个函数接受一个满足了 Vue 组件属性项的普通的 Object 对象.

在.vue模板文件开发中,也不例外.

我们可以看看,在书写 .vue 模板文件时,我们到底在写什么?

我们写的是一个 .vue 文件.

并按照 <template></template> <script></script> ( 这里不关注 <style></style> 节点 ) 的格式编写 .vue 文件.

把它整合起来来看.

等价于

好了,继续回到 .vue 模板开发文件中.

在另外一个组件中,使用此组件时,我们会 import xxx from xxx.vue 并搭配 components: xxxx

.vue 会被 webpack 中配置的 vue-loader 处理.这是我们已知的.

结合上述的判断, vue-loader 仅仅只是把 .vue 文件编译成了一个 vue.extend(options) 创建组件所需要的 options 普通对象而已.

既然 vue-loader 仅仅,只是把 .vue 模板文件编译成了一个 options 普通对象.

那么我们可以手动的使用 Vue.extends(options) 来获得这个组件对象的构造函数.

拿到此组件的构造函数,我们就可以在 组件 mounted 的时候,通过 new 的方式,挂在到 html 上了. (而无需去注册到 components,成为一个局部组件.直接把它当成一个自己熟悉的不能在熟悉的构造函数调用即可.)

既然我们已经知道:

我们完全可以直接使用 .js 文件的方式来创建 vue 组件,进而省略 .vue & vue-loader 这个执行的步骤.

此 .js 文件到处一个 vue 组件的构造函数.

在另外一个组件里

通过这样的原理,我们完全可以在HTML页面的任意地方,任意位置,任意的挂在我们自己的组件.并不一定必须使用.vue声明式组件的语法.

[ 码云地址 ]