vue数据更新后在视图上不响应

一、vue如何追踪变化

当你把一个普通的JS对象传给vue实例的data选项时，

vue将遍历此对象的所有属性，

并使用 Object.defineProperty 把这些属性全部转为 getter/setter 。

Object.defineProperty是ES5中一个无法识别的特性，

这也就是为什么vue不支持IE8以及更低版本的浏览器。

二、为什么使用Vue.set()

因为受现代JS的限制，vue不能检测到对象属性的添加或删除。(重要！！！)

由于vue会在初始化实例时对属性执行 getter/setter 转化过程，

所以属性必须在data对象上存在才能让vue转换它，这样它才能是响应的。

vue不允许在已经创建的实例上动态添加新的根级响应式属性，（注意！！！）

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

三、 更新数据（Array）失败

this.list[0] = '王五';
当我们修改数据之后， 【this.list[0] = '王五';】
视图上并没有发生变化，
实际上这个修改并不能生效，因为Vue不能检测到以下变动的数组:

1==> 当你利用索引直接设置一个项时，例如: this.list[index] = newValue

2==> 修改数组的length属性,例如: this.list.length = 0

所以在上例中通过this.list[0] = '王五' 是无法触发数据响应的，

<template>
  <div class="about">
    <template>
      <div>
        <ul>
          <li v-for="item in list" :key="item">
            {{ item }}
          </li>
        </ul>
        <button @click="handleChangeName">修改名称</button>
      </div>
    </template>
  </div>
</template>
<script>
//别忘记引入vue 
import Vue from 'vue'
export default {
  data() {
    return {
      list: ['张三', '李四']
    }
  },
  methods: {
    // 修改用户名称
    handleChangeName() {
	// 这样更改会失败
       // this.list[0] = '王五'
	   
      // 这样更改ok的
      Vue.set(this.list,0,'王五')
    }
  }
}
</script>