首页 > 其他分享 >vue3知识点:响应式数据的判断

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

时间:2024-10-31 10:45:07浏览次数:4  
标签:知识点 console log App 响应 vue3 app

@

目录

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

标签:知识点,console,log,App,响应,vue3,app
From: https://www.cnblogs.com/bigcat26/p/18517220

相关文章

  • springboot 整合 activiti 搭配 vue3 element-plus activiti-modeler bpmn-js
    springboot整合activiti搭配vue3element-plusactiviti-modelerbpmn-js配合使用ElementPlus+Vue3(idea开发,需要安装lombok插件)相关依赖版本后台:依赖版本spring-boot2.7.18knife4j-spring-boot-starter3.0.3pagehelper-spring-boot-starter1.3.0......
  • 华为OD机试 E卷|响应报文时间
    华为OD机试E卷|响应报文时间0、关于本专栏&刷题交流群本文收录于专栏【2024华为OD机试真题】,专栏共有上千道OD机试真题,包含详细解答思路、与四种代码实现(Python、Java、C++、JavaScript)。点击文末链接加入【华为OD机试交流群】,和群友一起刷题备考。刷的越多,考试中遇到原题的......
  • 软件测试知识点汇总
    第一部分:(软件)测试概念类1、软件质量软件质量是“软件满足规定或潜在用户需求特性的总和”。反映出如下3方面的问题:1)软件需求是度量软件质量的基础。不符合需求的软件就不具备质量。2)软件人员必须遵循软件过程规范,用工程化的方法来开发软件。3)满足一些没有明确规定的隐含......
  • vue3-ref 和 reactive
    文章目录vue3中ref和reactivereactive与ref不同之处ref处理复杂类型vue3中ref和reactiveref原理基本原理ref是Vue3中用于创建响应式数据的一个函数。它的基本原理是通过Object.defineProperty()(在JavaScript的规范中用于定义对象属性的方法)或者Proxy......
  • HTTP 响应头信息与前后端交互时content-type重要性
    以下是响应头的大部分属性响应头信息中文翻译描述Date日期响应生成的日期和时间。例如:Wed,18Apr202412:00:00GMTServer服务器服务器软件的名称和版本。例如:Apache/2.4.1(Unix)Content-Type内容类型响应体的媒体类型(MIME类型),如text/html;charset=UTF-8,application/......
  • Vue3中前台前端解决方案速记
    WebpackVSVite:Webpack默认构建整个应用;稳妥Vite只构建必须构建的内容;以原生ESM方式提供源码,让浏览器构建;快用Vite创建一个项目:[email protected]@latest在局域网内运行项目:package.json"scripts":{"dev":"vite--host",在Vite项目中安装tailwindcss:......
  • (系列十)Vue3中菜单和路由的结合使用,实现菜单的动态切换(附源码)
    说明  该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发)。   该系统文章,我会尽量说的非常详细,做到不管新手、老手都能看懂。   说明:OverallAuth2.0是一个简单、易懂、功能强大的权限+可视化流程管理系统。友情提醒:本篇文章是属于系......
  • vue2使用vue3语法
    CompositionAPICompositionAPI将是Vue3的核心功能,它具有许多更改和性能改进。我们也可以在Vue2中通过npm插件@vue/composition-api使用它。安装yarnadd@vue/composition-api之后,在入口文件main.js中使用它。importVuefrom'vue'importVueCompositionAPI......
  • 在K8S中,有一家公司想要修改其部署方法,并希望构建一个可扩展性和响应性更高的平台,该公
    在Kubernetes(K8s)中,一家公司想要修改其部署方法并构建一个可扩展性和响应性更高的平台,以满足客户需求,可以从以下几个方面入手:1.技术层面的实现策略采用微服务架构:将大型的单体应用拆分成多个独立的、小型的、松耦合的服务,每个服务负责一个特定的功能。这种架构有助于提高系......
  • 《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
    @目录五、新的组件1.Fragment2.Teleport案例完整代码3.Suspense案例完整代码本人其他相关文章链接五、新的组件1.Fragment在Vue2中:组件必须有一个根标签在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处:减少标签层级,减小内存占用2......