3-2-21-Vue.js 源码阅读-虚拟 DOM

最新推荐文章于 2020-11-24 20:41:31 发布

没有什么时间是比现在合适的

最新推荐文章于 2020-11-24 20:41:31 发布

阅读量94

点赞数

分类专栏： # Part 3 · Vue.js 框架源码与进阶

本文链接：https://blog.csdn.net/fangxuan1509/article/details/109283599

版权

Part 3 · Vue.js 框架源码与进阶专栏收录该内容

49 篇文章 2 订阅

订阅专栏

Vue 中的虚拟 DOM

什么是虚拟 DOM？
- 虚拟 DOM 是使用 JavaScript 对象描述真实 DOM
- Vue.js 中的虚拟 DOM 借鉴 Snabbdom, 并添加了 Vue.js 的特性。例如：指令和组件机制。
为什么要使用虚拟 DOM ？
- 避免直接操作 DOM，提高开发效率（因为不需要操作 DOM 不需要关心操作 DOM 的浏览器兼容问题）
- 作为中间层可以跨平台（除了在 web 端使用外，还支持服务端渲染）
- 虚拟 DOM 不一定可以提高性能
  - 首次渲染的时候会增加开销
  - 复杂视图情况下提升渲染性能

h 函数

vm.$createElement(tag, data, children, normalizeChildren)
- tag
  - 标签名称或者组件对象
- data
  - 描述 tag, 可以设置 DOM 的属性或者标签的属性
- children
  - tag 中的文本内容或者子节点
VNode
- h 函数的返回结果
- 核心属性
  - tag
  - data
  - children
  - text
  - elm
  - key

示例

<body>
  <div id="app"></div>
  <script src="../../dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      render (h) {
        // h(tag, data, children)
        // return h('h1', this.msg)
        // return h('h1', { domProps: { innerHTML: this.msg } })
        // return h('h1', { attr: { id: 'title' } }, this.msg)
        const vnode = h(
          'h1',
          {
            attrs: { id: 'title' }
          },
          this.msg
        )
        console.log(vnode)
        return vnode
      },
      data: {
        msg: 'Hello Vue'
      }
    });
  </script>
</body>

没有什么时间是比现在合适的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3-2-21-Vue.js 源码阅读-虚拟 DOM

Vue 中的虚拟 DOM什么是虚拟 DOM？虚拟 DOM 是使用 JavaScript 对象描述真实 DOMVue.js 中的虚拟 DOM 借鉴 Snabbdom, 并添加了 Vue.js 的特性。例如：指令和组件机制。为什么要使用虚拟 DOM ？避免直接操作 DOM，提高开发效率（因为不需要操作 DOM 不需要关心操作 DOM 的浏览器兼容问题）作为中间层可以跨平台（除了在 web 端使用外，还支持服务端渲染）虚拟 DOM 不一定可以提高性能首次渲染的时候会增加开销复杂视
复制链接

扫一扫