SOURCE

const app = new Vue({
    data() {
        return {
            name: 'Hello Vue!',
            list: [1, 2, 3],
            obj: { a: 'a' },
            show: false
        }
    },
    watch: {
        'obj'() {
            console.log('a')
        },
        list() {
        }
    },
    methods: {
        changeList() {
            let vm = this
            //   this.$set(this.list, 3, {a: 2})
            //   this.list[0] = 0
            //   this.list.push(5)
            // this.list[3].a =  4
            // console.log(this)
            console.log(this.list)
            console.log(this.obj)
            console.log(this.obj.a)
            // this.$watch(this.obj, 'a', () => {
            //     console.log('a')
            // })
        }
    }
}).$mount('#app')

// console.log(typeof [])

// const arr = []

// const observer = {
//     dep: {}
// }

// def(arr, '__ob__', observer)

// function def(obj, key, val, enumerable) {
//     Object.defineProperty(arr, '__ob__', {
//         value: val,
//         enumerable: !!enumerable,
//         writable: true,
//         configurable: true
//     })
// }

<div id="app">
    <div>{{ name }}</div>
    <ul>
        <li>{{ list }}</li>
    </ul>
    <div>
        <div>{{ obj.a }}</div>
    </div>
    <div v-if="show">show</div>
    <button @click="changeList">切换</button>
</div>