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

注意点与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">changebutton>
			
			
		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>

你可能感兴趣的:(vue.js,前端,html5)