简单实现vue2响应式

<script>

      let data = { // 定义一个对象

        name: '张三',

        age: 18,

        info: {

          birth: '江西'

        },

        color: ['red', 'blue', 'orange']

      }

      let oldArray = Array.prototype // 拿到数组的原型对象

      let newArray = Object.create(oldArray); // 创建一个新的对象，让其原型上的一些方法为数组原型上的方法，简而言之，依据数组原型声明一个对象

      ['push', 'shift', 'unshift', 'pop', 'splice'].forEach(element => {

        newArray[element] = function() {

          console.log('更新数组视图')

          oldArray[element].call(this, ...arguments)

        }

      });

     

      observer(data) // 监听对象，让其处于响应式

      function observer(data) { // 定义监听的方法

        if(typeof !data === 'object' || data === null) { // 判断是否是对象类型的数据

          return data

        }

        if(Array.isArray(data)) { // 判断是否是数组，是数组就改变原型

          data.__proto__ = newArray

        }

        for (let key in data) {

          defineReactive(data, key, data[key])

        }

      }

      function defineReactive(data, key, value) {

        if(typeof value === 'object'){ // 判断对象的内部数据是不是对象，是就进行递归处理。

          observer(value)

        }

        Object.defineProperty(data, key, { // 通过Object.defineProperty进行数据劫持

          get () { // get进行监听读取返回原数据

            return value

          },

          set (newValue) { // set进行修改监听，赋值新数据

            if(value !== newValue){

              value = newValue

              observer(value) // 这里判断赋的新的值是不是对象类型，进行监听

              console.log('更新视图')

            }

          }

        })

      }

      data.color.unshift()

      console.log(data)

    </script>
vue给对象进行增加或者删除某元素可以通过vue.set或vue.$set(通过vue实例),vue.delete方法。