vue视图更新问题记录

1、对象新属性无法更新视图，删除属性无法更新视图，怎么办？

• 原因：Object.defineProperty 没有对对象的新属性进行属性劫持
• 对象新属性无法更新视图：使用 Vue.$set(obj, key, value)，组件中 this.$set(obj, key, value)
• 删除属性无法更新视图：使用 Vue.$delete(obj, key)，组件中 this.$delete(obj, key)

2、直接 arr[index] = xxx 无法更新视图怎么办？

• 原因：Vue 没有对数组进行 Object.defineProperty 的属性劫持，所以直接 arr[index] = xxx 是无法更新视图的
• 使用数组的 splice 方法，arr.splice(index, 1, item)
• 使用 Vue.$set(arr, index, value)

3、相同的路由组件如何重新渲染？

多个路由解析为同一个 Vue 组件。问题是，Vue出于性能原因，默认情况下共享组件将不会重新渲染，如果你尝试在使用相同组件的路由之间进行切换，则不会发生任何变化。

const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];

如果依然想重新渲染，怎么办呢？可以使用 key

<template>
  <router-view :key="$route.path"></router-view>
</template>