vue高级

本文介绍了虚拟DOM和Diff算法。虚拟DOM是模拟真实DOM节点结构的Object对象模型,文中阐述了其使用流程,包括获取数据、创建vdom、初次渲染、数据更改后重新渲染等。还介绍了Diff算法,它用于比对两次vdom,生成patch对象,能根据key更新页面改变结构,体现虚拟DOM的惰性原则。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

虚拟dom && diff算法 ( 王者 )

  1. 虚拟dom是什么?
  2. 虚拟dom的使用基本流程
  3. diff算法是什么?
  4. diff算法运行结束之后,返回什么?

注意: vue是一是MVVM框架,Vue高性能的原因之一就是vdom

深化: Vue vdom vs React vdom 有何不一样?

vdom是什么?

​ 它是一个Object对象模型,用来模拟真实dom节点的结构

​ 需求: vdom如何模拟真实dom,如果将来我想在增加一个li,里的内容为 : 这里是北京大学

​ 在增加10个li,内容为: xxx

  <div class = "box">

    • 这里是1903
    • ​ var list = document.querySelector( ‘.list’ )

      ​ var li = document.createElement( ‘LI’ )

      ​ li.innerHTML = ’ 这里是北京大学 ’

      ​ list.appendChild( li )

      vdom的使用流程

      ​ \1. 获取数据

      */

      // 1.获取数据( ajax fetch )

      ​ var data = {

      ​ id: 1,

      ​ name: ‘1903’

      ​ }

      // 2. 创建vdom

      ​ var vdom = {

      ​ tag: ‘div’,

      ​ attr: {

      ​ className: ‘box’

      ​ },

      ​ content: [

      ​ {

      ​ tag: ‘ul’,

      ​ content: [

      ​ {

      ​ tag: ‘li’,

      ​ content: data.name

      ​ }

      ​ ]

      ​ }

      ​ ]

      ​ }

      ​ //3. 初次渲染 vdom( vdom渲染成 真实dom )

      ​ // var div = document.createElement(‘DIV’)

      ​ // div.className = ‘box’

      ​ // var ul = document.createElement(‘UL’)

      ​ // var li = document.createElement(‘LI’)

      ​ // vue中使用的是一个叫做jsx语法 + render函数

      var vdom = {

      ​ tag: ‘div’,

      ​ attr: {

      ​ className: ‘box’

      ​ },

      ​ content: [

      ​ {

      ​ tag: ‘ul’,

      ​ content: [

      ​ {

      ​ tag: ‘li’,

      ​ content: data.name

      ​ }

      ​ ]

      ​ }

      ​ ]

      ​ }

      // 4. 将vdom渲染成真实dom

      ​ // render函数

      // 5. 数据更改了, data.name = ‘骏哥’

      data.name = ‘骏哥’

      ​ vdom = {

      ​ tag: ‘div’,

      ​ attr: {

      ​ className: ‘box’

      ​ },

      ​ content: [

      ​ {

      ​ tag: ‘ul’,

      ​ content: [

      ​ {

      ​ tag: ‘li’,

      ​ content: data.name

      ​ }

      ​ ]

      ​ }

      ​ ]

      ​ }

      ​ // render 函数进行渲染

      ​ // 但是我们的网页结构一般都是很复杂的,这时我们使用vdom去模拟dom结构,发现vdom这个对象模型

      ​ // 太大了,也长了,所以我们想,如果能在js中也能够书写 dom标签结构那就好了,所以结合了javascript + xml 搞出了一个新的语法糖 jsx ,用jsx来模拟vdom

      ​ /*

           <div class = "box">
      

      • {{ data.name }}
      • ​ */

        使用diff算法比对两次vdom,生成patch对象

        ​ /*

        ​ diff算法是比较两个文件的差异,并将两个文件不同之处,将这个不同之处生成一个补丁对象(patch)

        ​ diff算法来源后端

        ​ 前端将其应用于虚拟dom的diff算法

        ​ vue中将 虚拟dom的diff算法放在了 patch.js文件中

        ​ 使用js来进行两个对象的比较( vdom 对象模型)

        ​ diff算法是同级比较

        ​ 给每一个层级打一个标记,这个标记是一个数字( 这个数字就是 key )

        ​ */

        ​ // 7. 根据key将patch对象渲染到页面中改变的结构上,而其他没有改变的地方是不做任何修改的( 虚拟dom的惰性原则 )

      评论
      添加红包

      请填写红包祝福语或标题

      红包个数最小为10个

      红包金额最低5元

      当前余额3.43前往充值 >
      需支付:10.00
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明:

      1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

      余额充值