Vue3 基础2

纯荔枝ikun
85 阅读7分钟

Vue基础 - 模板语法

这里通读源码下来不会特别的担心

条件的渲染

在某些条件下,我们需要根据当前的条件决定某些元素或者是组件是否渲染,

这个时候我们就需要进行条件的判断了

Vue提供了下面的指令来进行条件的判断

v-if

v-else

v-else-if

v-show

image.png

我们在这里进行一个演练

我们应该跟上这样的一个数据

当v-if 为true的时候才会被渲染出来,不为true的时候是不会被渲染出来

的,这个是单个条件的渲染

当上面两个条件不满足的时候

执行下面两个选项

这里可以变成一个小小的案例

v-model 进行数据的绑定

input 的双向绑定内容

image.png

如果条件是false的时候,其判断的内容完全不会被渲染或者是被渲染掉

当条件为true的时候,才会真正渲染条件块中的内容

掌握条件渲染三个指令的时候

因为v-if是一个指令,所以必须将其添加到一个元素上面:

但是如果我们希望切换的是多个元素呢

这个时候,我们可以选择使用v-if

template元素

使用template会直接将template内容渲染进div中

template在Vue中有一个好处,就是这个东西不会在这个里面存在的

如果这里是一个div的话,这个程序的外面就会包裹一个div

在开发中就不会存在了

template元素可以当做不可见的包裹元素,并且在v-if上使用,但是最终不

会被渲染出来

有点类似于小程序的block

这个就是template的时候,条件渲染template的使用

v-show 的条件渲染

v-show 当条件为 true 的时候渲染出来

v-show 当条件为 false 的时候不会渲染出来

它们两个为false的时候是不一样的

v-show 当条件为false 上面是display,不显示但是会进行解析,这里的元

素压根就不会存在

v-show 是不支持template

v-show不可以和v-else 一起使用

image.png

v-show 元素无论是否需要显示到浏览器上,它的DOM实际都是通过CSS的

display样式来进行切换的

v-if 当条件为 false,其对应的元素压根不会被渲染到DOM中

如果我们的元素需要在显示和隐藏之间频繁的切换,那么使用v-show

如果不会频繁的发生切换,那么使用v-if

列表的渲染

这个时候我们可以使用v-for来使用

v-for 的基本格式是 item in 数组

数组通常是来自 data 或者是 props,也可以是其他方式

item是我们给每项元素起的一个别名,每个别名可以自定义

案例:v-for

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="li">

  </div>
  <!--使用的模板 -->
  <template id="app">
    <div v-for="(item,index) in list">
       <div>编号:{{item.code}}</div>
       <div>姓名:{{item.name}}</div>
    </div>
  </template>
  <!-- 通過CDN的方式導入 -->
  <script src="https://unpkg.com/vue@3">

  </script>

  <script>
    Vue.createApp({
      template:'#app',
      data()
      {
        return {
          list:[{
            code:0,
            name:'星球大战'
          },{
            code:1,
            name:'皇家雨林'
          },{
            code:2,
            name:'林伟咳咳'
          },{
            code:3,
            name:'狐妖小红娘'
          }]
       }
      },
      methods:{

      }
    }).mount('#li')
  </script>
</body>
</html>

案例结果图:

image.png

这里我们写到模板引擎里面的

我们对于数据进行一个遍历,遍历的别名是可以随便起的

格式就是: item in 数组

通过我们这样的一种语法,将结果用mustache语法表现出来

这里可以是一个字符串,也可以是一个对象

v-for 就是对于数据进行一个遍历的数据

如果我们在遍历的时候想要拿到索引值,就可以加上(item,index)

这里我们不仅可以遍历数组,对象,还可以是一个数字

v-for 里面是一个参数的话是项,两个参数的话就是

项,索引

这里的别名相当于是一个形式参数,没有别的意义,赋

值是按照这样的一个顺序

image.png

替换数组的方法

上面的方法会直接修改原来的数组,但是某些方法不会替换掉原来的数组,而是会生成新的数组 比如: filter(),concat() 和 slice()

这里就是数组修改的开发里面

这里的key是用到Vue的虚拟DOM算法上面

v-for中的key是什么作用

在源码中的key都是有什么作用的

在使用v-for进行列表渲染的时候,我们通常会给元素或者组件绑定一个key属性

在开发中,我们通常都会绑定一个key属性

在新旧Nodes对比,如果不使用key的话,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型的元素的算法 而使用key的时候,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素

什么是新旧的nodes,什么是VNode 没有key的时候,如何尝试修改和复用 有key的时候,如果基于key重新排列的

认识VNode

VNode 和 HTML 元素之间的转化 VNode的全程是Virtual Node 也就是虚拟节点 浏览器会最终渲染出来我们的HTML元素 body元素 h2 > DOM的节点(真实的节点) div

image.png

在Vue中,这里的元素是通过VNode的形式表现的

VNode的本质是一个JavaScript的对象

Vue会对这里的东西做了一层的解析,转换成VNode,然后通过某些东西转换成javascript对象

image.png

这里会进行描述

一个是p元素,一个是span元素

template - > VNode -> 真实DOM

Vue的话会把这里的东西转成一个个的VNode

再将VNode转换成真实的DOM

这个VNode可以做多平台的渲染

可以做跨平台的好处

image.png

虚拟DOM

由一大堆的元素构成

组件本身是不会进行渲染的

有可能不是一一对应的,这里的key跟虚拟DOM有什么关系

VNode和虚拟DOM之间的关系

在这里会有模板的编译过程

浏览器是无法直接解析真实DOM,而是先解析虚拟DOM

-> 真实的DOM

有多个vnode组成一个虚拟DOM树

插入F元素

使用splice

第一个值是起始点

第二个值是删除个数

第三个值是插入的数值

如果是直接插入的话,效率是不高的

原来在真实的DOM这里是真实的C,现在把你改成f

image.png

这里就涉及到一个diff算法

将新的VNodes 和 旧的VNodes对比的过程就是diff算法

这个算法就是diff算法了,需要查看整个东西就可以了

image.png

在这里的key加上一个唯一值就行了

patchUnkeyedChildrten 这里进行调用的

当进行diff算法的时候,会在这里显示

image.png

image.png

如果这里有key 的话执行patchKeyChildren

如果这里没有key 的话执行patchUnkeyChildren

image.png

(无key的时候的算法)

前面这里做了一个遍历,后面这里做了一个判断,如果

旧的VNode 大于 新的VNode,就会将旧VNode多出来的

进行删除,如果新的比较多就会把新的挂载上去

把刚才的这里保存一个视频

新旧虚拟DOM的对比

(有key的时候的算法)

增加内容的时候都是往后面加的

在这里的时候如果绑定一个key的话,两个节点判断的 是类型,key是否相同,如果相同的话就是同一个东西

使用 while 循环是因为Vue也不知程序什么结束

如果两个不相同的话就结束了

在头部节点进行判断类型 和 key值是否是相同的

在尾部节点进行判断类型 和 key值是否是相同的

如果n1为空的话,就是一个挂载的操作,将新的节点

挂载进去

如果是旧节点多的话,会将节点卸载掉

image.png

如果我们也不知道顺序的话,这里做的事情是尽可能的

在旧的节点里面找到h,根据key去找这样的一个节点

比较key 和 类型是否是相同的,进行patch的操作,如

果这里没有的话,就会有一个新增的操作,尽量做移动

之间的几个patch,或者说这里有多余的就会给它删除

把虚拟的DOM进行一个比较,如果不使用key,Vue会使用

一种最大限度减少动态元素并且尽可能的尝试/修改相

同的元素的算法

有key的时候 和 无key的时候 的情况

手写红黑树的删除操作

patch 这里的意思是打补丁的意思

mount 挂载 unmount 卸载

这里要看源码

对于基础差的时候也是非常的重要

avatar
文章
阅读
粉丝