vue3.0学习 使用ref函数定义响应式数据变量

步骤:

1、从vue里面引入ref函数

2、定义的变量需要放入ref中

3、获取num值需要num.value

代码

<template>
	<view>
		
	<view>{{num1}}</view>
	<view>{{num2}}</view>
	<view>{{test}}</view>
	<view>{{arr[2]}}</view>
	<view>{{obj.name}}</view>
		  
	</view>
</template>

<script setup>
	import{ref} from "vue"
	
	let num1=6;	
	// setInterval(()=>{
	// 	num1++;
	// 	console.log(num1);
	// },1000)//间隔器函数
	//无法在模板页面进行响应
	
	let num2=ref(10);
	setInterval(()=>{
		num2.value++;
		console.log(num2.value);
	},1000)
	
	console.log(num2.value);
	console.log(num1);
	
	let test=ref("贺芳泽");
	
	let arr=ref([1,2,3,4]);
	
	let obj=ref({name:"王五",age:18});
	obj.value.name="李四"//改变对象的值，记得加value
	

</script>

<style>

</style>