Vue3复习和总结(base)条件与列表渲染与Key的作用

Vue3复习和总结(base)条件与列表渲染与Key的作用

代码全部放在->github仓库：https://github.com/zyugat/vue-review-all

前言：分为base、Component、router、Vuex、组合式API。5各部分。

base和Component中的例子不使用脚手架运行，需自行浏览器运行。位置->noCli

条件与列表渲染

v-if、v-else-if、v-else

• 用于切换频率较低的场景、不展示的DOM元素直接被移除。

v-show

• 切换频率较高的场景、不展示的DOM元素使用样式隐藏掉。

<div id="app">
  <h2 v-if="vif">v-if测试</h2>
  <h2 v-if="velseif">v-else-if测试</h2>
  <h2 v-else>v-else测试-------</h2>
  <button @click="vif = !vif">v-if切换</button>
  <button @click="velseif = !velseif">v-else-if切换</button>
  <h2 v-show="vshow">v-show</h2>
  <br/>
  <button @click="vshow = !vshow">v-show切换</button>
  <hr/>
</div>
<script>
  const App = {
    data() {
      return {
        vif: true,
        velseif: true,
        vshow: true
      }
    },
  }
  const app = Vue.createApp(App)
  app.component('', {})
  app.mount('#app')
</script>

v-for

• 当遍历数组时—>值、索引
• 当遍历对象时->值、键——————值、键、索引
• 当遍历字符串时—>值、索引

<div id="app">
  <ul>
    <h3>数组遍历，value</h3>
    <li v-for="value in arr">{{ value }}</li>
    <br />
    <h3>数组遍历，键值</h3>
    <li v-for="(value, index) in arr">{{ value }}---{{ index }}</li>
    <br />
    <h3>对象遍历，值键</h3>
    <li v-for="(value, key) in object">{{ value }}---{{ key }}</li>
    <br />
    <h3>对象遍历，值键索引</h3>
    <li v-for="(value, key, index) in object">
      {{ value }}---{{ key }}---{{ index }}
    </li>
    <br />
    <h3>字符串遍历，值索引</h3>
    <li v-for="(char, index) in string">{{ char }}---{{ index }}</li>
  </ul>
</div>
<script>
  const App = {
    data() {
      return {
        arr: ['one','two','first'],
        object: {
          '一':'one',
          '二':'two',
          '三':'first',
        },
        string: 'Hello'
      }
    },
  }
  const app = Vue.createApp(App)
  app.component('', {})
  app.mount('#app')
</script>

v-for 与 v-if一同使用：因if优先级比for高，故无法访问for中变量。

• 使用替换数组的方式（filter、concat、slice）的好处！
  • 它们不会变更原始数组，而总是返回一个新数组。
  • 那么Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

显示过滤/排序后的结果：通过使用计算属性自动过滤数组。如果是二维数组，那么可以使用嵌套for循环。

<div id="app">
  <h2>返回能被2整除</h2>
  <ul>
    <li v-for="n in evenNumbers" :key="n">{{ n }}</li>
  </ul>
</div>
<script>
  const App = {
    data() {
      return {
        vif: true,
        velseif: true,
        vshow: true,
        arr: ['one', 'two', 'first'],
        object: {
          '一': 'one',
          '二': 'two',
          '三': 'first',
        },
        string: 'Hello',
        numbers: [1, 2, 3, 4, 5, 6],
      }
    },
    computed: {
      evenNumbers() {
        return this.numbers.filter(number => number % 2 === 0)
      },
    },
  }
  const app = Vue.createApp(App)
  app.component('', {})
  app.mount('#app')
</script>

Key的作用

1. key的作用

a。找到相同的key，若内容没变则复用，若内容变了则生成新真实DOM。

b。若找不到相同的key，则生成新真实DOM

• 1. 虚拟DOM中key的作用：
  • 1）简单的说：key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
  • 2）详细的说：当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
    • a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
      • (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
      • (2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
    • b. 旧虚拟DOM中未找到与新虚拟DOM相同的key：根据数据创建新的真实DOM，随后渲染到到页面

2. index作为Key的问题

若对数据进行：逆序添加、逆序删除等破坏顺序操作会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

含输入类DOM会产生错误DOM更新 ==> 界面有问题。

• 2. 用index作为key可能会引发的问题：
  • 1）若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
  • 2）如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
  • 3）注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
• 3. 开发中如何选择key：
     1. 1）最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
     2. 2）如果确定只是简单的展示数据，用index也是可以的。
  • 实例中，li节点发生改变，但input框复用了，因此导致信息错乱。