27.Vue3：列表渲染

<template>
  <div class="hello">
    <ul>
      <!-- 条件渲染方法:v-for类似循环,把数据存入到一个对象中 -->
      <li v-for="item in newsList">{{item}}</li>
      <!-- 既然是对象,就可以使用其中的内容 -->
      <li v-for="item in newsList">{{item.title}}</li>
      <!-- 
        维护状态: 当Vue更新列表时,默认使用"就地更新"的策略
            就地更新: 只更新 元素唯一标识的id发生改变或新增的元素,其余的并不更新
                            元素唯一标识: 给v-for一个提示, 在for之后,给一个:key代表他的唯一标识
                                若没有唯一标识,可以在循环时候使用索引(item,index) in items,index是他的索引(很少用)
            JS: 老方法的JS只要发生改变,从头渲染到尾,消耗性能
       -->
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      newsList:[
        {
          id:1000,
          title:'标题0'
        },
        {
          id:1001,
          title:'标题1'
        },
        {
          id:1002,
          title:'标题2'
        },
        {
          id:1003,
          title:'标题3'
        }
      ]
    }
  }
}
</script>

维护状态

维护状态: 当Vue更新列表时,默认使用"就地更新"的策略

            就地更新: 只更新 元素唯一标识的id发生改变或新增的元素,其余的并不更新

                            元素唯一标识: 给v-for一个提示, 在for之后,给一个:key代表他的唯一标识

                                若没有唯一标识,可以在循环时候使用索引(item,index) in items,index是他的索引(很少用)

            JS: 老方法的JS只要发生改变,从头渲染到尾,消耗性能