虚拟DOM 与 diif算法

最新推荐文章于 2022-07-29 21:30:58 发布

╭♡╮

最新推荐文章于 2022-07-29 21:30:58 发布

阅读量383

点赞数

本文链接：https://blog.csdn.net/qq_44814992/article/details/94355944

版权

虚拟dom

Q: vdom是什么？
A: 它是一个Object对象模型，用来模拟真实dom节点的结构；

虚拟DOM的使用基本流程；

vdom的使用流程：
- 获取数据；
- 创建vdom；
- 通过render函数解析jsx，将其转换成 vdom 结构；
- 将 vdom 渲染成真是dom
- 数据更改；
- 使用 diff 算法对比两次 vdom ，生成 patch 对象；

什么是diff算法？

diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同处生成一个补丁对象（patch）；

diff算法来源后端；
前端将其应用于虚拟dom的diff算法；
vue中将虚拟dom的diff算法放在了 patch.js文件中；
使用js来进行两个对象的比较（ vdom 对象模型）；

diff算法是同级比较；
给每一个层级打一个标记，这个标记是一个数字（这个数字就是key ）；

什么是jsx？

A：jsx = javascript + xml；

为什么列表循环要加key？

A： id 为app的dom结构其实是一个模板，其实就是jsx；

vue的两大特性

指令 —— 用来操作dom；
组件 —— 组件是html，css，js 等的一个聚合体；

Q：为什么要组件？
A：

将一个具备完整功能的项目的一部分进行多处使用；
加快项目的进度；
可以进行项目的复用；

要想实现组件化，那么我们使用的这一部分就必须是完整的，我们把这个完整的整体就称之为组件；
插件： 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能识别的标签；
组件使用前必须进行注册；

全局注册：

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

局部注册——在组件中用一个components的配置项目来表示只能在注册的范围内使用，其他地方是不能使用的：

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

命名：
一个单词的大写：注意不要和原生的h5标签重名，比如 header footer Header Footer；
小写带 ’ - '，比如 header-title；
大驼峰： HelloWorld 使用： hello-world；

组件的嵌套

父组件里面放子组件 ==> 类似于dom结构的父子级结构；
将子组件以标签的形式放在父组件的模板中使用；
切记，不要放在父组件的内容中；
组件不仅可以用双标签表示，也可以使用单标签表示；

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

<script>
// 第一种；
 Vue.component('Father',{
    template: '<div> Father <Son></Son></div>'
 })
 Vue.component('Son',{
    template: '<div> son </div>'
 })
 new Vue({
    el: '#app',
 });
 
// 第二种；
 new Vue({
    el: '#app',
    components: {
      'Father': {
        template: '<div> father组件 <Son /></div>',
        components: {
          'Son': {
            template: '<div> son组件 </div>'
          }
        }
      }
    }
 })
  </script>

is规则；

ul>li ol>li
table>tr>td
select>option

如上直属父子级如果直接组件以标签化形式使用，那么就会出现bug；
解决：使用is规则: 通过is属性来绑定一个组件；

// 案例： 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>

template使用；

实例范围内使用；
- template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的；
实例范围外使用；
- 实例范围外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>

╭♡╮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
虚拟DOM 与 diif算法

虚拟domQ: vdom是什么？A: 它是一个Object对象模型，用来模拟真实dom节点的结构；虚拟DOM的使用基本流程；vdom的使用流程：- 获取数据；- 创建vdom；- 通过render函数解析jsx，将其转换成 vdom 结构；- 将 vdom 渲染成真是dom- 数据更改；- 使用 diff 算法对比两次 vdom ，生成 patch 对象；什么是diff算...
复制链接

扫一扫