虚拟DOM节点
虚拟DOM
虚拟DOM也就是我们常说的虚拟节点,他是通过JS的Object对象模拟DOM中的节点,然后在通过特定的render方法将其渲染成真实的DOM节点。
为什么要使用虚拟节点?
频繁的DOM操作会导致大量页面元素的重绘和回流,处于性能优化的考虑我们应该减少重绘和回流的操作。而对虚拟节点的DOM操作,并不会触发重绘和回流,把处理后的虚拟节点映射到真是DOM上,只需要进行一次重绘和回流,提高了性能。
重绘:不会影响其他元素的布局,这种操作叫做页面的重绘。列如:background="red"这种代码。
回流:会影响其他元素的布局,这种操作叫做页面的回流。列如:重新设置一个元素的宽,高的这种代码。
注:(回流必将引起重绘,而重绘不一定会引起回流。)
DIFF算法
DIFF算法是DOM更新的一种算法,指页面被更新时,程序用那种策略去做更新DOM。
渲染函数 createElement()
createElement()到底会返回什么呢?其实不是一个实际的DOM元素,它更准确名字是createNode和Description,因为他所包含的信息会告诉Vue页面上需要渲染什么样的节点,及其子节点,我们把这样的节点描述为''虚拟节点'',简写为VNode。
CreateElement()参数1为标签名,参数2是一个对象,参数3是子节点。
{ // 和`v-bind:class`一样的 API // 接收一个字符串、对象或字符串和对象组成的数组 'class': { foo: true, bar: false }, // 和`v-bind:style`一样的 API // 接收一个字符串、对象或对象组成的数组 style: { color: 'red', fontSize: '14px' }, // 普通的 HTML 特性 attrs: { id: 'foo' }, // 组件 props props: { myProp: 'bar' }, // DOM 属性 domProps: { innerHTML: 'baz' }, // 事件监听器基于 `on` // 所以不再支持如 `v-on:keyup.enter` 修饰器 // 需要手动匹配 keyCode。 on: { click: this.clickHandler }, // 仅用于组件,用于监听原生事件,而不是组件内部使用 // `vm.$emit` 触发的事件。 nativeOn: { click: this.nativeClickHandler }, // 自定义指令。注意,你无法对 `binding` 中的 `oldValue` // 赋值,因为 Vue 已经自动为你进行了同步。 directives: [ { name: 'my-custom-directive', value: '2', expression: '1 + 1', arg: 'foo', modifiers: { bar: true } } ], // 作用域插槽格式 // { name: props => VNode | Array<VNode> } scopedSlots: { default: props => createElement('span', props.text) }, // 如果组件是其他组件的子组件,需为插槽指定名称 slot: 'name-of-slot', // 其他特殊顶层属性 key: 'myKey', ref: 'myRef', // 如果你在渲染函数中向多个元素都应用了相同的 ref 名, // 那么 `$refs.myRef` 会变成一个数组。 refInFor: true }
列如:
Vue.component('my-component', { render: function (h, context) { return h("h1", { "style":"color:red", domProps:{ innerHTML : "你好", title : "hello" } }, ["abc"]) } })
优质内容筛选与推荐>>