大一菜鸟vue学习之路（二）基本语法 中

小鱼默默学习
94 阅读3分钟

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

条件渲染

  • 需要根据当前条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断。
  1. v-if
  2. v-else
  3. v-else-if
  • 结果为true才会渲染出来
  • 这三个指令与if、else、else if类似
<ul v-if="names.length > 0">
    <li v-for="item in names">{{item}}</li>
</ul>
<h2 v-else>当前names没有数据，请求获取数据后展示</h2>

  1. template（vue3）

    1. 包裹多个元素，把渲染条件添加在上面，该元素不会被渲染到页面

  2. -show

    1. v-show也是根据一个条件决定是否显示元素或者组件

    2. v-show与v-if的区别

      • 不能用template，DOM是实际存在的
      • 本质是display
      • 不可以与else if一起用

v-for

  • 从服务器拿到一组数据，并需要对其进行渲染

  • v-for类似于JavaScript的for循环，可以用于遍历一组数据

  • v-for基本格式是“item in 数组”

    • 数组通常是来自data或者prop，也可以是其他方式
    • item是我们给每项元素的一个别名

  • 拿到索引值---格式“{item, index} in 数组”

v-for支持的类型

  • v-for也支持遍历对象，并且支持一二三个参数

    • 一个参数：“value in object”
    • 二个参数：“（value，key）in object”
    • 三个参数：“（value，key，index）in object”

  • 遍历字符串--遍历每一个字符

  • 基本上可迭代对象都可以遍历
  • 遍历数字--从1数到那个数字

VNode 虚拟DOM

  • Virtual Node ，虚拟节点
  • 无论是组件还是元素，他最终在Vue中表示出来的都是一个个VNode
  • VNode的本质是一个JavaScript对象
  • template --> VNode --> 真实DOM
虚拟DOM
  • 如果我们不只是一个简单的虚拟DOM，而是一大堆的元素，那么它们应该会形成一个VNode Tree
  • VNode --> 树结构 --> 虚拟DOM

v-for中的key属性

  • 在使用v-for进行列表渲染时，我们通常会给元素或组件绑定一个key属性
<li v-for = "item in letters" :key ="item">
   {{item}}
</li>
  • key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes
  • 使用key，他会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素

Diff算法

  • 有ket的diff算法

  1. 第一步，从头开始进行遍历、比较

    1. 若key一致就继续进行比较
    2. 若因为key不一致，所以就会break跳出循环

  2. 第二步，从尾开始进行遍历、比较

  3. 第三步，如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点

  4. 第四步，如果新的节点遍历完毕，但是依旧有旧的节点，那么就移除旧节点

  5. 第五步，特色情况，中间还有很多未知的或者乱序的节点

数组更新检测

  • Vue将侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新

  1. 直接将数组修改为一个新的数组

  2. 通过一些数组方法，来修改数组中的元素

    1. push（）
    2. pop（）
    3. shift（）
    4. unshift（）
    5. splice（）
    6. sort（）
    7. reverse（）

不修改原数组的方法是不能倾听的

avatar
文章
阅读
粉丝