Vue view update problem record

1. The view cannot be updated for the new attribute of the object, and the view cannot be updated for the deleted attribute. What should I do?

• Reason: Object.defineProperty property hijacking is not done for the object's new property
• Object new property cannot update view: using  Vue.$set(obj, key, value), in component this.$set(obj, key, value)
• Unable to update view on remove property: using  Vue.$delete(obj, key), in component this.$delete(obj, key)

2. What should I do if the direct arr[index] = xxx cannot update the view?

• Object.defineProperty Reason: Vue does not have property hijacking  for arrays  , so arr[index] = xxx the view cannot be updated directly
• Using the array  splice method,arr.splice(index, 1, item)
• use Vue.$set(arr, index, value)

3. How to re-render the same routing component?

Multiple routes resolve to the same Vue component. The problem is, Vue by default shared components won't re-render for performance reasons, and if you try to switch between routes that use the same component, nothing will change.

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

What if you still want to re-render? can use key

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