vue视图不更新解决方法，3.0与2.0的区别

vue数组属性发生改变时，视图不更新如何解决

data中数据，都是响应式。也就是说，如果操作data中的数据，视图会实时更新；

​ 但在实际开发中，若data中数据类型较为复杂，方法methods中改变对象的属性，视图也就是页面并不会改变

​ 原因是vue监听不到数据类型特别复杂的属性。

​ 原因：因为 vue 的检查机制在进行视图更新时无法监测 数组中的某个对象的属性值的变化。

1，使用this.$set(this.obj,key,val) 来解决

对象操作：

​ 三个参数：this.$set(“改变的对象”，“改变的对象属性”，“值”)

数组操作：

​ 三个参数：this.$set(“数组”，“下标”，“值”)

<template>
  <div class="hello">
    <button @click="setMessage">添加属性</button>
    {{ student.name }}
    <input type="text" v-model="student.age">
  </div>
</template>

<script>
export default {
 data() {
   return {
     student: {
       name: '张三',
     }
   }
 },
 methods: {
   setMessage() {
     this.$set(this.student, 'age', 15)
     console.log(this.student)
   }
 }
}
</script>

2，利用 Object.assign({}，this.obj)创建新对象

<script>
export default {
  data() {
    return {
      student: {
        name: '张三',
      }
    }
  },
  methods: {
    setMessage() {
      this.student.age = 15
      this.student = Object.assign({}, this.student)
      console.log(this.student)
    }
  }
}
</script>

3，使用vue.set()

​ 可以使用Vue.set()方法将响应式属性添加到嵌套的对象上

// Vue.set(object, key, value)
// object 要更改的数据源(可以是对象或者数组)
// key  要更改的具体数据
// value ：重新赋的值

export default() {
  data() {
    food: {
      name: 'apple' 
    }
  }
}

Vue.set(food, 'count', 1);

vue3.0与vue2.0的区别

1，性能提升

​ 更小巧，更快速；支持摇树优化；支持 Fragments 和跨组件渲染；支持自定义渲染器。

2，API 变动

​ 除渲染函数 API 和 scoped-slot 语法之外，其余均保持不变或者将通过另外构建一个兼容包

​ 除了 scoped slot 语法有一些微调之外变动最大的部分将是渲染函数(render) 中的虚拟 DOM 的格式

3，重写虚拟 DOM (Virtual DOM Rewrite)

​ 随着虚拟 DOM 重写，减少 运行时（runtime）开销。重写将包括更有效的代码来创建虚拟节点

4，更精准的变更通知

​ 在2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行

​ 3.x 版本中，只有依赖那个属性的 watcher 才会重新运行

5，默认进行懒观察（lazy observation）

​ 2.x 版本，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，

​ 这可能会在页面载入时造成明显的性能压力。

​ 3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效

6，3.0 新加入了 TypeScript 以及 PWA 的支持