vue3知识点：响应式数据的判断

合集 - Vue3(7)

1.vue3知识点：Teleport组件2024-10-302.《vue3第六章》其他，包含：全局API的转移、其他改变2024-10-303.《vue3第四章》Composition API 的优势，包含Options API 存在的问题、Composition API 的优势2024-10-304.《vue3第五章》新的组件，包含：Fragment、Teleport、Suspense2024-10-30

5.vue3知识点：响应式数据的判断2024-10-31

6.vue3第一章基础：创建Vue3.0工程，包括使用vue-cli 创建、使用 vite 创建2024-10-317.vue3知识点：reactive对比ref2024-10-31

收起

@

目录

• 三、其它 Composition API(不常用，了解即可)
  • 6.响应式数据的判断
    • 测试案例
    • 完整代码
• 本人其他相关文章链接

三、其它 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知识点：响应式数据的判断