Vue对象的单层劫持图文详细讲解

针对“Vue对象的单层劫持”这个问题，我会进行详细讲解。

什么是 Vue 对象的单层劫持

在 Vue.js 框架中，当我们使用 Vue 来管理数据时，其实是通过建立 data 对象来实现的。Vue 采用了双向数据绑定的机制，当该对象中的值发生变化时，页面中的数据也随之发生变化。

而在 Vue.js 框架中，Vue 对象是单层劫持的，这意味着 Vue 在创建 data 对象时，只对该对象进行了浅层次的劫持，即只对对象的第一层属性进行了双向绑定，而对于该层属性所对应的引用类型（如数组、对象等）里面的属性，Vue 并没有给它们添加劫持方法，因此，当我们修改了引用类型中的某个属性时，原始数据并没有相应的改变，也就不会触发 Vue 的响应式机制，导致页面不会有所更新。

示例说明

下面我将结合代码，对 “Vue 对象的单层劫持” 进行详细说明。

示例1

<div id="test">
  <p>{{user.name}}</p>
  <button @click="changeName">change name</button>
</div>

<script>
  let user = {
    name: 'Tom',
    msg: 'hello Vue!'
  };
  let vm = new Vue({
    el: '#test',
    data: {
      user
    },
    methods: {
      changeName(){
        this.user.name = 'Jerry'; // 修改名称
      }
    }
  });
</script>

在上面的代码中，我们在data选项中定义了一个用户信息对象 user，里面包含用户名称与消息，并将其添加到Vue实例中进行管理。在页面中通过界定符 {{ }} 引用用户名称。

点击按钮 change name，触发方法 changeName，并在其中修改了用户名称。结果发现修改未生效，页面未刷新。

这个问题是因为在 Vue 对象下只对 user 对象进行了浅层次的劫持，当我们修改 user 对象的某个属性（如名称），Vue 并没有给这个属性添加劫持方法，因此，页面不会刷新。

示例 2

<div id="test">
  <p v-for="item in user">
    {{item}}
    <button @click="changeMsg">change msg</button>
  </p>
</div>

<script>
  let user = ['Tom', 'Jerry', 'Lucy'];
  let vm = new Vue({
    el: '#test',
    data: {
      user
    },
    methods: {
      changeMsg(){
        this.user[2] = 'Kate'; // 修改第三个元素
      }
    }
  });
</script>

在上面的代码中，我们在 data 选项中定义了一个数组 user，并在页面中通过 v-for 渲染数组中的每个元素。同时，为了测试效果，我们在渲染的每个元素后添加了一个按钮 change msg，用于修改数组中的第三个元素。

结果发现点击按钮后，修改不生效，仍然显示的是原本的 Lucy，页面没有更新。

同样这是因为在 Vue 对象下只对 user 对象进行了浅层次的劫持，当我们修改 user[i] 这样的元素时，Vue 并没有给这个属性添加劫持方法，因此，页面不会刷新。

总结

Vue 对象单层劫持机制会导致在使用引用类型（如数组或嵌套对象）时，当改变其内部属性时，不会触发 Vue 框架的响应式机制，也就无法及时更新页面的数据，因此在使用时需要注意。

如果需要监听深层次数据的变化，可以使用第三方库 vue-deepwatch 或者手动递归监听每一个节点的变化。