vue如何实现监听数据变化

function updateView() {
    console.log('触发视图更新')
}

let arr = Object.create(Array.prototype)      //创建一个继承了数组原型的对象
let funArray = ['push', 'pop', 'shift', 'unshift', 'splice']
for (let methodName of funArray) {            //重写数组方法
    arr[methodName] = function () {
        updateView()                        //触发视图更新
        Array.prototype[methodName].call(this, ...arguments)         //调用原数组方法
    }
}

function observer(target) {
    if (typeof target !== 'object' || target === null) {              //只监听对象类型数据
        return target
    }
    if (Array.isArray(target)) {                                      //监听数组类型数据
        Object.setPrototypeOf(target, arr)
        return
    }
    for (let key in target) {
        defineReactive(target, key, target[key])                       //监听普通对象属性
    }
}

function defineReactive(target, key, value) {
    observer(value)                     //如果value为对象进行深度监听
    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newValue) {
            if (newValue !== value) {
                observer(value)         // 如果新赋值为对象进行深度监听
                value = newValue
                updateView()            //设置触发视图更新
            }
        }
    })
}

let data = {
    name: "hhkj",
    age: 20,
    sex: {
        a: 1
    },
    list: [1, 2, 3]
}
data.name = '123'
observer(data)
data.list.push(1)
data.list.pop()