SOURCE

const { reactive, createApp, watchEffect, computed, ref, h } = Vue

// 响应式数据
// 类似之前的 data 
const state = reactive({
    count: 0
})
// 返回一个 { value: 100 }
const num = ref(100)
const perpol = ref({ name: 'Tom' })
console.log(perpol.value.name)

// 类似于 watch
// 当依赖的数据发生变化时，执行该方法
// 会自动运行一次
// watchEffect(() => {
//     console.log('watchEffct')
//     document.querySelector('#print').innerHTML = `count is ${state.count}`
// })

// // 监听多个
const stop = watchEffect(() => {
    console.log(`count is ${state.count}`)
})

// 创建、挂载
createApp({
    // setup Composition API的入口点
    // 在beforeCreate挂接之前被调用
    setup: (props, context) => {
        console.log(props)
        console.log(context)

        let double = computed({
            get() { return state.count * 2 },
            set(value) { console.log(value);state.count = value }
        })

        return {
            state,
            num,
            // computed
            // double: computed(() => state.count * 2),
            // or
            // get set 形式
            double,
            // method
            handleAdd: () => {
                state.count++
                // 设置值时  必须改变 value 属性
                num.value++
                // double.value++ 
                
                if (state.count === 3) stop()
            }
        }

        // return () => h('div', [state.count, num.value])
    }
}).mount('#app')

<div id="app">
    <span>{{ state.count }}</span>
    <br />
    <!-- <p id="print"></p> -->
    <span>{{ `double ${double}` }}</span>
    <br />
    <!-- 使用时 自动读取 value 属性 -->
    <!-- <span>{{ num }}</span> -->
    <br />
    <button @click='handleAdd'>Add</button>
</div>