Vue3 数据响应式
在vue3中一般返回的数据是不响应的,如果需要响应式需要在定义时声明方法1:reactive():定义:reactive()是一个函数,可以用来定义复杂数据类型完成响应式案例:<div>{{userInfo.name}}</div>//4,结果打印Cat<button @click="userNameUpdate"><button><scrip
在vue3中一般返回的数据是不响应的,如果需要响应式需要在定义时声明
方法1:reactive():
定义:reactive()是一个函数,可以用来定义复杂数据类型完成响应式
案例:
<div>{{userInfo.name}}</div>
//4,结果打印Cat
<button @click="userNameUpdate"><button>
<script lang='setup'>
//1,引用reactive
import {reactive} from 'vue'
//2,定义响应式对象
const userInfo = reactive({
name:''
})
//3,点击改变响应式对象中name的值
const userNameUpdate = ()=>{
userInfo.name = "Cat"
}
</script>
方法2:toRef():
定义:当我们在渲染数据时,不希望用到前缀时,可以使用组合toRef()
toRef()是函数,转换响应式对象中的某个属性为单独响应式数据,他们之间依然相互绑定
案例:
<div>{{name}}</div>
//先打印Vue2
<button @click='nameUpdata'>修改</button>
//点击后打印Vue3
<script lang='setup'>
//1,引用reactive,toRef
import {reactive,toRef} from 'vue'
//2,定义响应式对象
const userInfo = reactive({
name:'Vue2'
})
//3,定义单独响应式变量
const name = toRef(userInfo,'name')
//4,点击修改name值
const nameUpdata = ()=>{
name.value = 'Vue3'
}
</script>
方法3:toRefs():
定义:可以定义转换响应式对象中所有属性为响应式数据,通常用于结构reactive定义的对象,转换响应式对象中所有属性(也可以是一部分)为单独响应式数据,对象成为普通对象,且数据关联
案例:
<div>姓名:{{name}}</div>
<div>年龄:{{age}}</div>
<button @click = 'upData'>修改信息</button>
<script lang='setup'>
//1,引用reactive、toRefs
import {reactive,toRefs} from 'vue'
//2,定义响应式对象
const userInfo = reactive({
name:'张三',
age:'23'
})
//3,定义转换单独响应式数据
const {name,age} =toRefs(userInfo)
//4,修改数据事件
const upData = () =>{
name.value = '李四'
age.value = '24'
}
</script>
方法4:ref():
定义:ref()是一个函数,用来定义简单类型数据响应式
注意:
1)在修改值和获取值时需要用.value
2)在渲染数据时可以省略.value
案例:
<div>{{name}}</div>
<button @click="upData">修改</button>
<script lang='setup'>
//1,引用ref
import {ref} from 'vue'
//2,定义响应式变量
const name = ref('vue2')
//3,修改数据事件
const upData = ()=>{
name.value = 'vue3'
conslot.log(name.value)
}
</script>
ref也可以用于对象或数组
更多推荐
所有评论(0)