uni-app学习笔记五-vue3响应式基础

一.使用ref定义响应式变量

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态，ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回

示例代码：

	
<template>	<view>{{ num1 }}</view><view>{{ num2 }}</view><view>{{ str }}</view><view>{{ arr[2] }}</view><view>{{obj.name}}</view>
</template><script setup>import {ref} from "vue"let num1 = 6let num2 = ref(10)//使用定时器改变num2的值// setInterval(()=>{// 	num2.value++;// 	console.log(num2.value)// },1000)//定义字符串let str = "Hello,Uni-app"//定义数组let arr = ref([1,2,3])//定义对象let obj = ref({"name":"Tim","age":18})//修改对象某个属性的值obj.value.name = "Jim"</script>

效果：

二.v-bind指令

可简写为一个冒号：

示例代码：

<template><view><image :src="picUrl"></image></view>
</template><script setup>import {ref} from "vue"let arr = ref(["/static/pic1.png","/static/pic2.png","/static/pic3.webp","/static/pic4.jpg"])const picUrl = ref("/static/pic1.png")let i = 0setInterval(()=>{i++picUrl.value=arr.value[i%4]},1000)
</script><style lang="scss"></style>