vue3 - vue3模拟实现底层响应式数据定义 ref reactive - 《vue》

<body>
    <script src='https://unpkg.com/vue@next'></script>
    <div id='myApp'>
        <button @click="count1++">{{count1}}</button>
        <button @click="count2.value++">{{count2.value}}</button>
        <button @click="obj1.age++">{{obj1.age}}</button>
        <button @click="obj2.age++">{{obj2.age}}</button>
    </div>
    <script>
        var vm = {
            setup() {
                // 1, vue3封装好的响应数据定义写法
                const count1 = Vue.ref(0)
                // 2, 模拟实现底层响应式数据定义
                const count2 = new Proxy({value: 0}, {
                    get(target, prop){
                        return target[prop]
                    },
                    set(target, prop, value){
                        target[prop] = value
                        console.log(value)
                        // 在set中数据更新后,调用虚拟DOM更新视图
                        document.querySelectorAll("button")[1].innerText = value
                    }
                })
                console.log(count1, count2)
                // 3, vue3封装好的响应式对象
                const obj1 = Vue.reactive({age: 10})
                // 4, 模拟实现底层响应式对象定义
                const obj2 = new Proxy({age:20},{
                    get(target, prop){
                        return target[prop]
                    },
                    set(target, prop, value){
                        target[prop] = value
                        // 在set中数据更新后,调用虚拟DOM更新视图
                        document.querySelectorAll("button")[3].innerText = value
                    }
                })
                console.log(obj1, obj2)
                return{
                    count1, 
                    count2,
                    obj1,
                    obj2
                }
            }
        }
        Vue.createApp(vm).mount('#myApp')
    </script>
</body>