vue2的响应式原理

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文详细解释了Vue2.x中响应式原理，包括使用`Object.defineProperty()`的数据劫持和数组的包裹机制。同时讨论了新增、删除属性及直接修改数组导致界面不更新的问题以及解决方法。

一、vue2.x的响应式

实现原理：
- 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
- 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹，也就是包装，比如vue2的push方法不仅仅把元素添加到数组上，还把数组的回显到页面上）。
存在问题：
- 新增属性、删除属性, 界面不会更新。
- 直接通过下标修改数组, 界面不会自动更新。

<template>
  <div id="app">
    <h1>我是vue2的效果</h1>
    <h3 v-show="person.name">姓名：{{person.name}}</h3>
    <h3>年龄：{{person.age}}</h3>
    <h3 v-show="person.sex">性别：{{person.sex}}</h3>
    <h3>爱好：{{person.hobby}}</h3>
    <button @click="addSex()">添加一个属性</button>
    <br/>
    <br>
    <button @click="deleteName()">删除一个属性</button>
    <br>
    <br>
    <button @click="updateHobby()">修改爱好数组第一个属性</button>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name:'App',
  data() {
    return {
        person: {
        name: '张三',
        age: 13,
        hobby: ['游戏','喝酒','烫头']
      }
    }
  },
  methods: {
    addSex() {
      //虽然添加了性别但是没显示
      // console.log(this.person.sex)
      // this.person.sex = '男'
      // console.log(this.person.sex)
      //vue2的响应式
      this.$set(this.person, 'sex', '男')
      // Vue.set(this.person, 'sex', '男')
    },
    deleteName() {
      // console.log(this.person.name)
      // delete this.person.name
      // console.log(this.person.name)
      //vue2的响应式
      this.$delete(this.person, 'name')
    },
    updateHobby() {
      //第二个参数是索引位置
      //vue2的响应式
      // this.$set(this.person.hobby, 0, '学习')
      this.person.hobby.splice(0,1,'学习')
    }
  }
}
  </script>
<style>
</style>