首页 > 其他分享 >[Vue] Reactive note

[Vue] Reactive note

时间:2024-10-07 15:00:21浏览次数:10  
标签:count function Vue const value note Reactive doubledCount props

<template>
  <div>
		count: {{ count }}
	</div>
  <div>
		doubled: {{ doubledCount }}
	</div>
	<button @click="increase">increase</button>
</template>

<script setup>
  import {computed, ref, watch, watchEffect} from "vue"
	
	const props = defineProps({
		count: Number
	})
	const emit = defineEmits(['update:count'])
	function increase() {
		emit('update:count', props.count + 1)
	}
	

	
	// 1: No
	// Reactive: Function bind to a value
	// Function: vue2: watcher, vue3: effect, render, computed
	// Value: 1. must be reactive data, 2. must be used inside the Function
	// Not value bind to a value, this is not possible in javascript
	// therefore props.count change will not trigger the doulbedCount to change
	// const doulbedCount = ref(props.count * 2)
	
	// 2: Yes
	// Function: watchEffect
	// value: props.count, doubledCount
	// props.count is used inside the watchEffect function, so it's correct
	// props.count change will trigger the watchEffect to re-run
	// doubledCount is also reactive, so it will trigger the render
	//const doubledCount = ref(0)
	//watchEffect(() => {
	//	doubledCount.value = props.count * 2
	//})
	
	// 3. No
	// value must be a reactive value, but when use pass the a primitive value to the function
	// then it's not reactive, so the function will not be triggered
	// useDouble(props.count) // props.count is a primitive value
	//function useDouble(count) {
	//	const doubledCount = ref(count * 2)
	//	watchEffect(() => {
	//		doubledCount.value = count * 2
	//	})
	//	return doubledCount
	//}
	//const doulbedCount = useDouble(props.count)
	
	// 4. Yes
	// const doubledCount = computed(() => props.count * 2)
	
	// 5. Yes
	function useDouble(props, propName) {
		const doubledCount = computed(() => props[propName] * 2)
		return doubledCount
	}
	const doulbedCount = useDouble(props, 'count')

</script>

 

标签:count,function,Vue,const,value,note,Reactive,doubledCount,props
From: https://www.cnblogs.com/Answer1215/p/18450111

相关文章

  • Vue3 watch方法----监视对象
    使用watch时,如果想监视对象的内部属性值。需要使用watch的第三个参数的配置对象,手动开启深度监视。//使用watch时如果想监视对象内部的属性值,需要使用watch的第三个参数,手动开启深度监视watch(person,(newValue,oldValue)=>{console.log('person发生了变化',newValue,o......
  • Vue.js组件开发研究
    摘要随着前端技术的快速发展,Vue.js以其轻量级、高性能和组件化开发的优势,在前端开发领域占据了重要地位。本研究深入探讨了Vue.js组件开发的理论基础、开发方法以及实际应用。通过系统梳理Vue.js框架的核心特性、组件化思想及Vue.js组件的基本概念,本研究为Vue.js组件开发提供......
  • vue3 watch方法---监视基本类型数据
    watch 监听定义的数据发生改变的时候执行什么函数watch方法有两个参数watch(sum,箭头函数)这个箭头函数里面有两个参数(newValue,oldValue)=>{},如下代码<template><!--watch;监视数据变化vue3可以监视一下四种数据类型:ref定义的数据......
  • VUE2常见问题以及解决方案汇总,vue+element ui 问题以及解决方案汇总(不断更新中)
    解决vue项目中el-table的@row-click事件与行内点击事件冲突,点击事件不生效(表格行点击事件和行内元素点击事件冲突)需要阻止事件冒泡问题描述1.点击列的编辑按钮,会触发按钮本身事件,同时会触发行点击事件2.点击列的元素,会触发本身事件,同时会触发行点击事件需求描述点击列的......
  • 基于SpringBoot+Vue+协同过滤算法的音乐推荐系统设计与实现(源码+论文+PPT+部署文档教
    具体实现截图网站首页页面主要包括系统首页、热门歌曲、音乐资讯、留言板、个人中心等内容,并根据需要进行详细操作;如图5-1所示:图5-1网站首页界面图在注册流程中,用户在Vue前端填写必要信息(如用户名、密码等)并提交。前端将这些信息通过HTTP请求发送到Java后端。后端处理......
  • springboot+vue基于的电商购物系统【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,电子商务已成为现代社会不可或缺的一部分。电子商务不仅改变了人们的购物方式,还极大地推动了全球经济的发展。近年来,电商平台如雨后春笋般涌现,市场竞争日益激烈。为了在激烈的市场竞争中脱颖而出,电商平台需要......
  • springboot+vue基于SpringBoot的经典诗文学习平台【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景在信息化高速发展的今天,传统文化的学习与传播方式正经历着深刻的变革。经典诗文作为中华文化的瑰宝,承载着千年的智慧与情感,对于提升国民文化素养、增强民族认同感具有重要意义。然而,传统的学习方式如翻阅纸质书籍、参加诗词讲座等,在时......
  • java+vue计算机毕设防疫工作人员管理系统【源码+程序+论文+开题】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着全球公共卫生事件的频发,防疫工作已成为维护社会稳定和人民健康的关键环节。防疫工作人员作为抗击疫情的前线力量,其管理和调度直接关系到疫情防控......
  • java+vue计算机毕设房屋出租管理系统【源码+程序+论文+开题】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着城市化进程的加速和人口流动性的增强,房屋租赁市场日益繁荣,成为解决居民居住需求的重要途径。然而,传统的房屋出租管理方式存在诸多不便,如信息不透......
  • VUE 安装依赖 -D -S 区别
    -S和-D是两个不同的标志,它们分别用于指定包的安装类型:-S或--save:这个标志用于将包添加到项目依赖中,并且会保存到package.json文件的dependencies部分。这些依赖是运行项目所必需的,通常在项目的生产环境中也会被使用。-D或--dev:这个标志用于将包添加到项目的开......