vue 改变数据后，数据变化页面不刷新

Posted 2023-05-04

参考技术A 最近在开发中遇到了这样一些情况，通过点击事件改变了对象里面得数据，但是页面却不刷新，后来发现，是在给对象添加属性时出现的问题。

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

当页面初始化时候，vue会遍历data对象所有的属性，并使用object.defineProperty把这些属性全部转化为getter/setter，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

官方定义：

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。

解决方法：可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

也可以使用 this.$forceUpdate() 方法，可以局部更新

迫使Vue实例重新渲染。它仅仅影响实例本身和插入插槽的子组件，而不是所有字组件

vue-router复用组件时不刷新数据

对于使用vue-router配置不同的路由，但使用相同的组件时，跳转后页面无反应，数据不会刷新。

解决办法：监听路由变化

watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    $route(to, from) {
      //要处理的操作
    }
  }