Vue列表渲染及视图不刷新问题解决

Vue中列表渲染主要使用v-for指令，v-for指令根据接收到的数组，重复渲染v-for绑定到的DOM元素及内部子元素，并且可以通过设置别名的方式，获取数组内数据渲染到节点中。

简单演示

<template>
  <div>
    <el-steps :active="active" finish-status="success" style="text-align: left">
      <el-step v-for="step in steps" :title="step.name" :key="step.index"></el-step>
    </el-steps>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    <el-button style="margin-top: 12px;" @click="restSteps">重置列表</el-button>
    <el-button style="margin-top: 12px;" @click="changeStep">修改列表不刷新</el-button>
    <el-button style="margin-top: 12px;" @click="changeStepRefresh">修改列表刷新</el-button>
  </div>
</template>

<script>
export default {
  name: '列表渲染',
  data () {
    return {
      active: 0,
      steps: [
        {
          name: '步骤一',
          index: 1
        },
        {
          name: '步骤二',
          index: 2
        },
        {
          name: '步骤三',
          index: 3
        }
      ]
    }
  },
  methods: {
    next: function () {
      if (this.active++ > 2) {
        this.active = 0
      }
    },
    restSteps: function () {
     
    },
    changeStep: function () {

    },
    changeStepRefresh: function () {

    }

  }
}
</script>

<style scoped>

</style>

列表元素修改重新渲染

一般情况下，改变数组时，能自动触发视图更新，但是一下两种情况除外：

1. 通过索引直接修改数组元素
2. 直接修改数组的长度。

俗话活得好，上帝给你关上一扇门，肯定会给你留下一扇窗。针对以上两种情况，我们都有办法对应解决：

<template>
  <div>
    <el-steps :active="active" finish-status="success" style="text-align: left">
      <el-step v-for="step in steps" :title="step.name" :key="step.index"></el-step>
    </el-steps>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    <el-button style="margin-top: 12px;" @click="restSteps">重置列表不更新</el-button>
    <el-button style="margin-top: 12px;" @click="restStepsRefresh">重置列表更新</el-button>
    <el-button style="margin-top: 12px;" @click="changeStep">修改列表不刷新</el-button>
    <el-button style="margin-top: 12px;" @click="changeStepRefresh">修改列表刷新</el-button>
  </div>
</template>

<script>
export default {
  name: '列表渲染',
  data () {
    return {
      active: 0,
      steps: [
        {
          name: '步骤一',
          index: 1
        },
        {
          name: '步骤二',
          index: 2
        },
        {
          name: '步骤三',
          index: 3
        }
      ]
    }
  },
  methods: {
    next: function () {
      if (this.active++ > 2) {
        this.active = 0
      }
    },
    restSteps: function () {
      this.steps.length = 0
    },
    restStepsRefresh: function () {
      this.steps.splice(0, 3)
    },
    changeStep: function () {
      this.steps[2] = {
        name: '步骤三山',
        index: 3
      }
    },
    changeStepRefresh: function () {
      this.$set(this.steps, 2, {
        name: '步骤三山',
        index: 3
      })
    }

  }
}
</script>

<style scoped>

</style>