响应式类方法

<div id="app">
    <component-b />
</div>
const componentB = {
    template: '<div>{{ name }}</div>',
    setup(props) {

        // 为基本数据类型添加响应式状态
        const name = Vue.ref('John')

        let obj = {count: 0};
        // 为复杂数据类型添加响应式状态
        const state = Vue.ref(obj)

        console.log(name.value); // 打印 John
        console.log(state.value.count); // 打印 0

        let newobj = Vue.ref(obj.count) // 注意是简单数据类型

        // 修改响应式数据不会影响原数据
        newobj.value = 1

        console.log(obj.count) // 打印 0

        return {
            name
        }
    }
}

Vue.createApp({
    components: {
        'component-b': componentB
    }
}).mount("#app")

<div id="app">
    <component-b />
</div>
const componentB = {
    template: '<div>{{ state.count }}</div>',
    setup(props) {

        // 为复杂数据类型添加响应式状态
        const state = Vue.reactive({count: 0})

        console.log(state.count); // 打印 0

        return {
            state
        }
    }
}

Vue.createApp({
    components: {
        'component-b': componentB
    }
}).mount("#app")

<div id="app">
    <component-b user="John" />
</div>
const componentB = {
    template:'<div>{{statecount.count}}</div>',
    setup(props) {
        const state = Vue.reactive({ // 响应数据
            foo: 1,
            bar: 2
        })
        const fooRef = Vue.toRef(state, 'foo')
        fooRef.value++
        console.log(state.foo) // 打印2 会影响原始数据
        state.foo++
        console.log(fooRef.value) // 打印3 会影响fooRef数据
        const statecount = {// 普通数据
            count: 0,
        }
        const stateRef = Vue.toRef(statecount,'count')
        setTimeout(() => {
            stateRef.value = 1 // 界面不会更新
            console.log(statecount.count) // 打印1 会影响原始数据
        },1000)
        return {
            statecount,
        }
    }
}
Vue.createApp({
    components: {
        'component-b': componentB
    }
}).mount("#app")

<div id="app">
    <component-b  />
</div>
const componentB = {
    template:'<div>{{max}},{{count}}</div>',
    setup(props) {
        let obj = {
            count: 0,
            max: 100
        }
        const statecount = Vue.reactive(obj)
        const {count,max} = Vue.toRefs(statecount) // 方便解构
        setTimeout(()=>{
            statecount.max++
            console.log(obj.max) // 打印101 会影响原始数据，同时界面更新
        },1000)
        return {
            count,
            max
        }
    }
}
Vue.createApp({
    components: {
        'component-b': componentB
    }
}).mount("#app")

<div id="app">
    <component-b />
</div>
const componentB = {
    template:'<div>{{shallow1.person.name}} {{shallow2.person.name}} {{shallow2.greet}}</div>',
    setup(props) {
        const shallow1 = Vue.shallowReactive({
            greet: 'Hello, world',
            person: {
                name: 'John'
            }
        })

        const shallow2 = Vue.shallowRef({
            greet: 'Hello, world',
            person: {
                name: 'John'
            }
        })

        setTimeout(() => {
            // 这不会触发更新，因为 shallowReactive 是浅层的，只关注第一层数据
            shallow1.person.name = 'Ted'
        },2000)

        setTimeout(() => {
            // 这不会触发更新
            shallow2.value.person.name = 'Ted'
            // 这也不会触发更新
            shallow2.value.greet = 'Hi'
            // 只有当调用 triggerRef 会强制上面的更新
            Vue.triggerRef(shallow2)
        }, 1000)

        return {shallow1, shallow2}
    }
}
Vue.createApp({
    components: {
        'component-b': componentB
    }
}).mount("#app")

<div id="app">
    <component-b />
</div>

const componentB = {
    template:'<div></div>',
    setup(props) {
        const obj = Vue.readonly({foo: {bar: 1}})

        console.log(Vue.isReadonly(obj)) // true

        obj.foo.bar = 2 // 失败警告：Set operation on key "bar" failed: target is readonly.

        const sobj = Vue.shallowReadonly({foo: {bar: 1}})

        sobj.foo.bar = 2 // 第二层可以修改

        return {}
    }
}
Vue.createApp({
    components: {
        'component-b': componentB
    }
}).mount("#app")

<div id="app">
    <component-b />
</div>
    const componentB = {
        template:'<div>{{reactivecobj.bar}}</div>',
        setup(props) {
            const obj = { foo : 1}
            const reactivecobj = Vue.reactive(obj)
            const rawobj = Vue.toRaw(reactivecobj)
            console.log(obj === rawobj) // true
            setTimeout(()=>{
                rawobj.bar = 2 // 不会触发响应式更新
            },1000)
            const foo = {a:1} // foo无法通过reactive成为响应式对象
            console.log(Vue.isReactive(Vue.reactive(Vue.markRaw(foo)))) // false
            return {
                reactivecobj
            }
        }
    }
    Vue.createApp({
        components: {
            'component-b': componentB
        }
    }).mount("#app")