Vue重新渲染页面解析

一、Vue重新渲染页面方法

Vue重新渲染页面是非常常见的需求，对于一些组件的显示及数据刷新，VueJS本身提供了一些方法和技巧。我们可以在以下场景中使用Vue重新渲染页面。

• 在响应式数据变更后，我们需要强制Vue重新渲染组件或页面
• 在特定情况下，例如使用setTimeout等异步代码后，我们需要触发Vue的重新渲染
• 在组件树中，如果我们需要更新父组件，或者强制子组件重新渲染，我们也可以使用Vue重新渲染页面

二、Vue拿到数据渲染不到页面

在使用VueJS时，我们有时候会遇到这样的情况：我们已经成功获取到了我们指定的数据，但是这些数据却并没有在页面上渲染。如果Vue拿到数据渲染不到页面，可能是以下原因：

1. 对数据监听不当

data () {
  this.list = []
}
...
this.list = [...newArr]; // 不能看到变化
this.$set(this.list, [...newArr]); // 可以看到变化

2. 对于动态添加属性没有处理

  

// 或者
new Vue({ data() { return { obj: { } } }})
vm.$set(vm.obj, 'newAttr', value)

三、Vue页面不重新渲染

在Vue中有时候我们会需要动态改变数据并更新页面，但是如果发现改变数据并不会触发组件的更新，我们可以检查一下以下几个原因：

• 是否修改了响应式数据。Vue只会响应经过Vue开发的数据项。
• 使用了Vue.set(Object, Key, Value)或者Array.splice以确保Vue知道数据更新了。
• 是否重复渲染组件。
• 是否设置了正确的key值。key值必须是唯一的且不能改变。

四、Vue强制重新渲染页面

有时候我们需要在数据变更后手动强制Vue重新渲染整个组件或页面。Vue中提供了一些工具，使得我们可以基于数据来强制渲染整个组件或组件实例。以下是一些Vue强制重新渲染页面的方式：

• 使用 $forceUpdate() 方法。这个方法会强制Vue实例重新渲染组件，无论哪些数据依赖项禁止更新。
• 使用 watch 监听器在数据变化后强制更新。
• 使用 Vue.js 的 nextTick() 方法，在 DOM 更新完成后强制刷新。

具体实现可参考以下代码：

watch: {
  '$store.state.userInfo': function(newVal, oldVal) {
    this.$forceUpdate()
  }
}

五、Vue重新渲染组件

和Vue重新渲染页面一样，Vue重新渲染组件也是非常常见的场景。在Vue中，我们可以基于以下方法来重新渲染组件：

• 使用key值来强制Vue重新渲染组件
• v-if和v-show的使用可以使得您动态调整以及重新渲染组件。

其中，使用key值重新渲染组件的实现代码如下：

  
<script>
  export default {
    data() {
      return {
        currentIndex: 1,
      };
    },
    methods: {
      changeValue() {
        this.currentIndex += 1;
      },
    },
  };
</script>

六、Vue强制重新渲染

有时候我们想强制Vue强制更新数据，但是数据似乎并没有被更新。当我们使用Vue重复数据，并希望强制更新时，Vue并不会在DOM上重新渲染。在这种情况下Vue提供了一个解决方法，即使用Vue.nextTick()方法。具体实现代码如下：

onButtonClick() {
  this.messages.push('Button Clicked')
  this.$nextTick(() => {
    this.$refs.scroll.scrollToBottom()
  })
}

七、Vue怎么渲染页面

Vue如何渲染页面其实基本上就是使用了响应式的数据绑定，在数据发生变化时，使用虚拟DOM Diff算法来比较前后两次变化，最后只更新有差异的部分。具体的过程如下：

1. Vue将模板解析成渲染函数
2. compile()函数将元素节点、文本节点，以及表达式等对应成JavaScript代码
3. render()函数根据数据运行渲染函数，生成VNode节点数对应的数据结构。
4. diff算法比较新旧两个VNode节点，判断哪些地方需要更新
5. 对于需要更新的节点，依次更新DOM

八、Vue数据渲染页面卡死

在使用Vue渲染页面时，有时候数据量过大就会卡死浏览器。为了解决这个问题，可以使用Vue的性能优化工具，例如懒加载、分页加载、按需更新等等。

下面是一个使用懒加载优化图片列表的实现代码：

  
<script>
  export default {
    data() {
      return {
        visibleCount: 10, //初始化显示10个图片
        imgs: [] // 存放所有图片数据
      };
    },
    methods: {
      increaseVisibleCount() {
        this.visibleCount += 10;
      }
    },
    mounted() {
      // 图片初始化数据
      for (let i = 1; i <= 100; i++) {
        this.imgs.push({
          id: i,
          src: `https://picsum.photos/1000/${i + 1000}`,
        });
      }
    },
  }
</script>

在上述代码中，我们通过定义visibleCount的值来动态渲染图片。而当我们点击"Load More"按钮时，会增加"visibleCount"值，进而重新渲染页面，从而达到优化的目的。