ref 函数可以将对象里面的属性值变成响应式的数据,修改响应式数据,是不会影响到源数据,但是视图层上的数据会被更新
代码案例如下
<template>
<h>{{name1}}</h>
<button @click="click">点击</button>
</template>
<script>
import {reactive,toRefs,ref,toRef} from "vue"
import test1 from "./Test1.vue"
export default {
name: "Test2",
setup(){
let name="yu";
const name1=ref(name)
const click=()=>{
name1.value="zhang"
console.log(name)
console.log(name1)
}
return{
name1,
click
}
}
}
</script>
toRef 函数会与源数据交互,修改响应式数据会造成源数据的修改,但是他的修改不会造成视图层数据的更新。
<template>
<div style="text-align: center;padding-left: 50px">
<h>{{name1}}</h>
<br>
<br>
<button @click="click">点击</button>
</div>
</template>
<script>
import {reactive,toRefs,ref,toRef} from "vue"
import test1 from "./Test1.vue"
export default {
name: "Test2",
setup(){
const name={
name1:"hh"
}
const name1=toRef(name,"name1")
const click=()=>{
name1.value="zhang"
console.log(name.name1)
console.log(name1.value)
}
return{
name1,
click
}
}
}
</script>
toRefs 函数与原始数据相交互,修改响应式数据会影响到源数据,但是不会更新视图层。
toRefs 函数还可以与其他响应式数据相交互,更加方便处理视图层数据。
<template>
<div style="text-align: center;padding-left: 50px">
<h>{{name1.name2}}</h>
<br>
<br>
<button @click="click">点击</button>
</div>
</template>
<script>
import {reactive,toRefs,ref,toRef} from "vue"
import test1 from "./Test1.vue"
export default {
name: "Test2",
setup(){
const name={
name1:"hh",
name2:"jj"
}
const name1=toRefs(name)
const click=()=>{
name1.name2.value="kk"
console.log(name.name2)
console.log(name1.name2.value)
}
return{
name1,
click
}
}
}
</script>
toRefs配合reactive可以实现修改响应数据会更新视图层
<template>
<div style="text-align: center;padding-left: 50px">
<h>{{name2}}</h>
<br>
<br>
<button @click="click">点击</button>
</div>
</template>
<script>
import {reactive,toRefs,ref,toRef} from "vue"
import test1 from "./Test1.vue"
export default {
name: "Test2",
setup(){
const name=reactive({
name2:"hh"
})
const click=()=>{
name.name2="k"
}
return{
...toRefs(name),
click
}
}
}
</script>