虚拟dom diff算法 Vue有两大特性（指令，组件）

最新推荐文章于 2023-02-20 17:12:06 发布

boy-sir

最新推荐文章于 2023-02-20 17:12:06 发布

阅读量230

点赞数

本文链接：https://blog.csdn.net/weixin_45213851/article/details/93512037

版权

虚拟dom && diff算法（王者）

1.虚拟dom是什么？

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

2.虚拟dom的使用基本流程

-1.获取数据（ ajax   fetch ）

 var data = {
      id: 1,
      name: '1903'
    }

-2.创建vdom 

    <div class = "box">
        <ul>
          <li> {{ data.name }} </li>
        </ul>
      </div> 

-3.通过render函数解析jsx，将其转换成  vdom结构 

  var vdom = {
      tag: 'div',
      attr: {
        className: 'box'
      },
      content: [
        {
          tag: 'ul',
          content: [
            {
              tag: 'li',
              content: data.name
            }
          ]
        }
      ]
    }




-4.将vdom渲染成真实dom 

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

      // render 函数进行渲染

      // 但是我们的网页结构一般都是很复杂的，这时我们使用vdom去模拟dom结构，发现vdom这个对象模型
      // 太大了，也长了，所以我们想，如果能在js中也能够书写 dom标签结构那就好了，所以结合了javascript + xml  搞出了一个新的语法糖   jsx ，用jsx来模拟vdom

-5.数据更改了， data.name = 'abc' 

 data.name = 'abc'

    vdom = {
      tag: 'div',
      attr: {
        className: 'box'
      },
      content: [
        {
          tag: 'ul',
          content: [
            {
              tag: 'li',
              content: data.name
            }
          ]
        }
      ]
    }

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



/*  
      
     */

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

3.diff算法是什么？

diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch） 
      diff算法来源后端
      前端将其应用于虚拟dom的diff算法

4.diff算法运行结束之后，返回什么？

生成一个补丁对象（patch）

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

深化： Vue vdom vs React vdom 有何不一样？

5.什么是jsx?

-jsx    javascript + xml

6.验证 key

列表循环一定加key
key最好是使用具有唯一标识性的 id

7.为什么列表循环要加key ? ( 黄金 )

-为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id ，最差index

Vue有两大特性

1.指令 – 用来操作dom

2.组件 – 组件是html css js 等的一个聚合体

3.为什么要使用组件？

组件化
1. 将一个具备完整功能的项目的一部分进行多处使用
2. 加快项目的进度
3. 可以进行项目的复用
要想实现组件化，那么我们使用的这一部分就必须是完整的，我们把这个完整的整体就称之为组件
插件： index.html img css js
如果能将 html css js img 等多个部分放在一起，那该有多好，vue将这个聚合体的文件称之为，单文件组件（ xx.vue ）

Vue 是构造器函数
Vue.extend() 是 vue用来扩展 vue功能（组件）的
Vue决定不进行实例化 Vue.extend(),vue借鉴了react，react中组件是以标签的形式使用的，
vue 决定组件要以标签的形式呈现
为了符合 html / html5的规则，所以组件的标签化使用必须注册，
注册说白了就是用来解析这个标签化的组件未html能识别的标签
组件使用前必须进行注册

4.基础的组件创建

全局注册
/*
Vue.component( 组件的名称，组件的配置项 )
组件必须先注册在使用（实例（组件）范围内使用）

*/
<body>
  <div id="app">
    <Father></Father>
  </div>
</body>

<script>
var Hello = Vue.extend({
    template: '<div> 这里是father组件 </div>'
  })             //VueComponent( option )

  Vue.component( 'Father', Hello )

  new Vue({
    el: '#app'
  })
</script>

局部注册
/*
命名：
一个单词的大写：注意不要和原生的h5标签重名，比如 header footer Header Footer
小写带- ，比如 header-title
大驼峰： GabrielYan 使用： gabriel-yan

    局部注册： 在组件中用一个components的配置项目来表示
              只能在注册的范围内使用，其他地方是不能使用的
   */
<body>
  <div id="app">
    <gabriel-yan></gabriel-yan>
  </div>
</body>

<script>
      var Hello = Vue.extend({
    template: '<div> 这里是1903 </div>'
  })

  new Vue({
    el: '#app',
    components: {
      // key: value  key是组件名称   value是组件配置项
      // 'gabriel-yan': Hello,
      'GabrielYan': Hello
    }
  })
</script>

简写

<body>
  <div id="app">
    <Father></Father>
    <gabriel-yan></gabriel-yan>
  </div>
</body>
<script>

  Vue.component('Father',{
    template: '<div> 这里是全局注册 </div>'
  })


  new Vue({
    el: '#app',
    components: {
      'GabrielYan': {
        template: '<div> 这里是局部注册 </div>'
      }
    }
  })


</script>

嵌套

    /* 
       组件的嵌套
           父组件里面放子组件 ----》 类似于dom结构的父子级结构
   
           将子组件以标签的形式放在父组件的模板中使用
   
   
           切记，不要放在父组件的内容中
   
   
           组件不仅可以用双标签表示，也可以使用单标签表示
     */
   
   
   <body>
     <div id="app">
       <!-- 下面这种写法是错误的 -->
       <Father></Father>
       <!-- 正确的应该是 -->
       <Father></Father>
     </div>
   </body>
   
   <script>
           
     new Vue({
       el: '#app',
       components: {
         'Father': {
           template: '<div> father组件 <Son /></div>',
           components: {
             'Son': {
               template: '<div> son组件 </div>'
             }
           }
         }
       }
     })
   
   
   </script>

5.组件的一些特殊使用规则【 is 规则】

 /* 
    is规则
      ul>li  ol>li   table>tr>td      select>option

    如上直属父子级如果直接组件以标签化形式使用，那么就会出现bug

    解决： 使用is规则: 通过is属性来绑定一个组件
     <tr is = "Hello"></tr>

    案例： table
  */

<body>
  <div id="app">
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr is = "Hello"></tr>
    </table>
  </div>
</body>

<script>
  Vue.component('Hello',{
    template: '<tr> <td> 4 </td> <td> 2 </td><td> 3 </td></tr>'
  })

  new Vue({
    el: '#app'
  })
</script>

6.组件的template

/* 
    template使用： 
        1. 实例范围内使用
          template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的
        2. 实例范围外使用
          实例范围外template标签是不会被直接解析的

    组件要想使用template使用，我们采用第二种

    但是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示

    解决： 使用webpack、gulp等工具编译，将来要用vue提供的单文件组件
   */

<body>
  <div id="app">
    <h3> 实例范围内使用 </h3>
    <template>
      <div>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </template>


    <h3> 使用 hello  组件</h3>

    <Hello></Hello>

  </div>
  <h3> 实例范围外使用 </h3>
  <template id="hello">
    <div>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </template>
</body>

<script>
      Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })
</script>