《Vue3.0抢先学》系列之：响应式之Ref vs. Reactive

// Vue2.x Options API 写法
data() {
  return {
    count: 0
  }
}

// Vue3.x Composition API 写法
const count = ref(0)

const { createApp, reactive } = Vue

// 计数器组件
const Counter = {
    template: `
        <div class="counter-display">
            <span class="counter-label">恭喜你，你已经写了</span>
            <span class="counter-text">{{ state.count }}</span>
            <span class="counter-label">斤代码！</span>
        </div>
        <div class="counter-btns">
            <button class="btn" @click="increase">写一斤</button>
            <button class="btn" @click="reset">删库啦</button>
        </div>
    `,

    setup() {
        const countOps = useCount()
        return { ...countOps }
    }
}

function useCount() {
    const state = reactive({ count: 0 })
    const increase = () => { state.count++ }
    const reset = () => { state.count = 0 }
    return { state, increase, reset }
}

let x = 0
let y = 0

function updatePos(e) {
  x = e.pageX
  y = e.pageY
}

const pos = { x: 0, y: 0 }

function updatePos(e) {
  pos.x = e.pageX
  pos.y = e.pageY
}

// 风格一
const x = ref(0)
const y = ref(0)
const isDisplay = ref(false)

// 风格二
const state = reactive({
  x: 0,
  y: 0,
  isDisplay: false
})