如果你不想在全球范围内将CDN资源引入index.html文件，如何将它们引入Vue单文件组件？下面我们来看看~

虚拟DOM创建

Vue通过创建一个虚拟的DOM来跟踪它想要改变的真实的DOM

什么是虚拟DOM？

返回createElement('h1 '，this.blogTitle)

CreateElement实际上返回的是createNodeDescription，而不是DOM元素，因为它包含的信息会告诉Vue页面需要呈现什么样的节点，包括其子节点的描述信息。这样的节点称为“虚拟节点”，通常缩写为“虚拟节点”。“虚拟DOM”是整个VNode树的名字(由Vue组件树构建)。

createElement函数的参数

模板中的函数可以在createElement函数中使用，它接收的参数是：

//@返回{VNode}

createElement(

//{字符串|对象|函数}

//一个HTML标记名，一个组件选项对象，或者

//解析上述任意一个异步函数。强制。

' div '，

//{对象}

//模板中属性对应的数据对象。可选。

{

API与` v-bind:class相同。

//接受字符串、对象或字符串和对象的数组

class': {

foo: true，

bar: false

},

API与` v-bind:style相同。

//接受字符串、对象或对象数组

style: {

颜色： '红色'，

fontSize: '14px '

},

//常见的HTML特性

attrs: {

id: 'foo '

},

//组件道具

props: {

myProp: 'bar '

},

//DOM属性

domProps: {

innerHTML: 'baz '

},

//事件侦听器位于“on”属性中。

//但是不再支持诸如“v-: keyup . enter”之类的修饰符。

//您需要手动检查处理程序中的键码。

: {

点击：这个.点击处理程序

},

//仅用于组件，用于监听本机事件，不用于组件的内部使用

//`vm。$emit `触发事件。

nativeOn: {

点击： this.nativeClickHandler

},

//自定义指令。请注意，不能在绑定中检查旧值

//赋值，因为Vue已经自动为你同步了。

方向： [

{

名称： '我自定义指令'，

值： '2 '，

表达式： '1 1 '，

arg: 'foo '，

modifiers: {

bar: true

}

}

],

//作用域槽的格式是

//{ name : props=Vnode | ArrayNode }

范围批次： {

default : props=CreateElement(' span '，props.text)

},

//如果组件是其他组件的子组件，请指定插槽的名称

插槽： '插槽名称'，

//其他特殊的属性

key: 'myKey '，

ref: 'myRef '，

//如果在渲染函数中对多个元素应用相同的引用名称，

//那么`$refs.myRef `将成为数组。

refInFor: true

},

//{字符串|数组}

//子虚拟节点(VNodes)，由` createElement()`，

//也可以使用字符串生成“文本虚拟节点”。可选。

[

先写几个字'，

CreateElement('h1 '，'标题')，

createElement(我的组件，{

props: {

someProp: 'foobar '

}

})

]

)

渲染函数渲染

Vue建议在大多数情况下使用模板来创建HTML。但是有些场景需要充分发挥JavaScript的编程能力，然后才能使用渲染函数，渲染函数比模板更接近编译器。

类型

(CreateElement :()=Vnode)=Vnode

渲染函数接收createElement方法作为创建VNode的个参数；如果组件是一个函数组件，渲染函数还将接收一个额外的上下文参数，为没有实例的函数组件提供上下文信息。

示例：假设我们想要生成一些带有锚点的标题

氕

a name=' hello-world ' href=' # hello-world '

你好世界！

/a

/h1

模板实现

锚定航向：高度='1 '你好，世界！/锚定航向

脚本类型=' text/x-template ' id=' anchored-heading-template '

h1 v-if='level===1 '

插槽/插槽

/h1

h2 v-else-if='level===2 '

插槽/插槽

/h2

h3 v-else-if='level===3 '

插槽/插槽

/h3

h4 v-else-if='level===4 '

插槽/插槽

/h4

h5 v-else-if='level===5 '

插槽/插槽

/h5

h6 v-else-if='level===6 '

插槽/插槽

/h6

/script

Vue.component('锚定标题',{

模板： ' #锚定标题模板，

props: {

级别： {

型号：

required: true

}

}

})

这里用模板并不是更好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了插槽/插槽，在要插入锚点元素时还要再次重复。

提出实现

锚定航向：高度='1 '你好，世界！/锚定航向

Vue.component('锚定标题',{

render:函数(createElement) {

返回createElement(

h' this.level，//标签名称

这个$slots.default //子节点数组

)

},

props: {

级别： {

型号：

required: true

}

}

})

这样代码就精简很多，需要注意的是向组件中传递不带v形槽指令的子节点时，比如锚定航向中的你好世界！这些子节点被存储在组件实例中的$ slots.default中。

某视频剪辑软件单页面引入加拿大链接

在了解了提出函数与标签名函数的基础上，想要实现某视频剪辑软件单页面引入加拿大链接就简单很多了。

首先采用标签名创建不同资源类型（以js、css为例)的虚拟节点

//js CDN

createElement('脚本',{

attrs: {

type: 'text/javascript '，

src: this.cdn

}

})

//css CDN

createElement('link '，{

attrs: {

rel: '样式表，

type: 'text/css '，

href: this.cdn

}

})

然后基于上述VNode，采用提出创建函数式组件远程射流研究…及远程钢性铸铁

组件： {

remote-js': {

render(createElement) {

返回createElement('脚本',{

attrs: {

type: 'text/javascript '，

src: this.cdn

}

})

},

props: {

cdn: {

类型：字符串，

required: true

}

}

},

remote-css': {

render(createElement) {

返回createElement('link '，{

attrs: {

rel: '样式表，

type: 'text/css '，

href: this.cdn

}

})

},

props: {

cdn: {

类型：字符串，

required: true

}

}

}

}

某视频剪辑软件单页面引入

模板

div class='my-page '

remote-js cdn=' https://cdn。bootscs。com/jquery/3。4 .1/jquery。量滴js '/remote-js

remote-CSS cdn=' https://cdn。bootscs。com/Twitter-bootstrap/4。3 .1/CSS/bootstrap。量滴CSS '/远程-CSS

/div

/模板

彩蛋(=。=)

如果你觉得提出函数写起来很费劲的话，就可以利用多路感应噪声插件，在某视频剪辑软件中使用JSX，让我们可以无限接近于模板语法。上述代码就变成下面这样了，好像是顺眼了一丢丢吧：

组件： {

remote-js': {

渲染(h) {

返回（

脚本类型=' text/JavaScript ' src={ this。cdn }/脚本

)

},

props: {

cdn: {

类型：字符串，

required: true

}

}

},

remote-css': {

渲染(h) {

返回（

链接rel='样式表type=' text/CSS ' href={ this。cdn }/

)

},

props: {

cdn: {

类型：字符串，

required: true

}

}

}

}

Ps:将h作为标签名的别名是某视频剪辑软件生态系统中的一个通用惯例，实际上也是小艾所要求的。

最终效果就是只有访问当前页（我的页面)时，CDN资源才会加载，不会像以前放在index.html或main.js中那样全局加载。