一、Virtual Dom(虚拟DOM)
引出:
Vue.js 2.x 与 Vue扣 1.x 最大的区别就在于 2.x 使用了 Virtual Dom (虚拟 DOM )来更新 DOM节点,提升擅染性能。一般我们的组件模板都是template当中的,但是vue编译时,都会解析为Virtual Dom。react和vue都是用了虚拟dom, 那何为Virtual DOM呢????
首先,我们要知道,Virtual DOM
并不是真正意义上的DOM,而是一个轻量级的JavaScript
对象,当状态发生变化时,Virtual Dom
会进行 Diff 运算,来更新只需要被替换的 DOM,而不是全部重绘。相比于DOM,性能会好很多。
我们可以先看一下Virtual DOM的运行过程:
使用 Virtual Dom
就可以完全发挥 JavaScript 的编程能力 。在此可以先做一个了解。在多数场景中,我们使用 template就足够了,但在一些特定的场景下,使用 Virtual Dom
会更简单。
二、Render函数
render的实质就是生成template模板,通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的; 通过这三个参数,可以生成一个完整的模板
具体怎么用,看下例子,一对比便知:
1、未使用render函数
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})
2、使用render函数
i)第一种写法:直接写入
renderContent (createElement, { node, data, store }) {
return createElement(
'span',{
'class': {
'node-disabled': data.is_forbidden === '2'
},
attrs: {
id: type
},
style: {
'float': 'right',
'margin-top': '10px',
'margin-right': '10px'
},
on: {
click: (e) => {
e.stopPropagation();
}
}
}
);
// console.log(node);
})
ii)第二种方法:用变量名字
renderContent (createElement, { node, data, store }) {
let prop = {
'class': [
'filter-tree-content',
parseInt(data.is_own) === 1 ? 'green' : ''
],
domProps: {
innerHTML: data.alias
}
};
return createElement(
'span', prop
);
// console.log(node);
})
iii)第三种写法:嵌套写法
renderContent (createElement, { node, data, store }) { // div 标签下包裹一个a标签
let prop = { // 设置属性
'class': [
'v-text',
'pack'
],
domProps: {
innerHTML: '...'
},
on: {
click: ($event) => { // 添加事件
this.clickHandler(data, $event);
}
}
};
return createElement(
'div', // 创建标签
{
'class': { // 设置类名
'node-disabled': data.is_forbidden === '2'
}
},
[createElement('span', {
domProps: {
innerHTML: node.label
},
'class': {
textContent: this.isClass
},
style: {
backgroundSize: '15px 15px'
}
})]
);
}
与template对比:
区别:
没有显示的模板内容,而是通过render方法生成
使用了createElement方法
createElement方法,通过render函数的参数传递进来,有三个参数:
第一个参数(必要参数):主要用于提供DOM的html内容,类型可以是字符串、对象或函数
第二个参数(类型是对象,可选):用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类
第三个参数(类型是数组,数组元素类型是VNode,可选):主要是指该结点下还有其他结点,用于设置分发的内容,包括新增的其他组件。注意,组件树中的所有VNode必须是唯一的
三、JSX
上面的参数的类型和用法太多,按顺序传参不方便,我们可以用JSX进行优化。为了让 Render 函数更好地书写和阅读,Vue提供了插件 babel-plugin-transform-vue-jsx 来支持 JSX 语法 。何为JSX,我们可以参考:JSX的简介和用法。