在这里插入图片描述
@[toc]

三、其它 Composition API(不常用,了解即可)

6.响应式数据的判断

在这里插入图片描述

测试案例

完整代码

项目目录

在这里插入图片描述

main.js
//引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm,但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')
App.vue
<template>
    <h3>我是App组件</h3>
</template>

<script>
    import {ref, reactive,toRefs,readonly,isRef,isReactive,isReadonly,isProxy } from 'vue'
    export default {
        name:'App',
        setup(){
            let car = reactive({name:'奔驰',price:'40W'})
            let sum = ref(0)
            let car2 = readonly(car)

            console.log(isRef(sum))
            console.log(isReactive(car))
            console.log(isReadonly(car2))
            console.log(isProxy(car))
            console.log(isProxy(sum))

            
            return {...toRefs(car)}
        }
    }
</script>

<style>
    .app{
        background-color: gray;
        padding: 10px;
    }
</style>
结果展示:

在这里插入图片描述

本人其他相关文章链接

1.《vue3第三章》其它 Composition API(不常用,了解即可),包括shallowReactive 与 shallowRef、readonly 与 shallowReadonly等等
2.vue3知识点:shallowReactive 与 shallowRef
3.vue3知识点:readonly 与 shallowReadonly
4.vue3知识点:toRaw 与 markRaw
5.vue3知识点:customRef
6.vue3知识点:provide 与 inject
7.vue3知识点:响应式数据的判断


刘大猫
1 声望1 粉丝

如果有天突然发现路的尽头还是路的话,希望你还没错过太多沿路的风景和眼前珍惜的人。