vue3之computed函数使用(setup函数的使用)

最新推荐文章于 2024-08-11 20:18:09 发布

默默努力的小老弟

最新推荐文章于 2024-08-11 20:18:09 发布

阅读量2.2k

点赞数

文章标签： vue.js 前端 html5

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121682194

版权

注意点与vue2不同的点在于 computed函数有get和set选项(可以zd)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" >
			计算之前的值:{{numObj.count}}
			计算之后的值:{{cNum}}

			<button type="button" @click="add">change</button>
			
			
		</div>
		
	</body>
	<script src="js/vue3.js"></script>
	<script>  
		const app=Vue.createApp({
			setup(props,context){
				const{ref,computed,reactive}=Vue;
				let numObj=reactive({count:10});
				let cNum=computed({
					get:()=>{//浏览器得到值时触发,不能拿到值
						console.log(numObj.count)

						return numObj.count*10;
					},
					  set:(res)=>{//设置值时触发
					         console.log(res)
					         numObj.count=res / 10;
					       }
				});
				let add=()=>{
					//计算属性也具有响应式(源头的数据变化,其他设置的也变化)
					numObj.count+=10;
				}
				return{
					numObj,
					cNum,
					add//可以返回函数
				}
				
				
			}
			
		});
	
	   app.mount("#app");
	
	</script>
</html>