ref 的用法:
<template>
<div>
<div @click="name='李四'">{{name}}</div>
<div @click="age=21">{{age}}</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
name:'Page2',
setup(){
let name = "张三";
let age = ref(20);
return{
name,age
}
}
}
</script>
点击显示 age 的 div,网页上的元素会同步更新 age 的值为 21,点击显示 name 的 div,网页显示的 name 值不会同步变化,因为加了 ref 的值是响应式的,不加的是普通 String,不会同步更新。
reactive 的用法:
现在你想把 name 也变成响应式的变量,可以照着 age 写一个 let name = ref(“张三”),但是你觉得每个变量都写个 ref 不好,怎样写到一起?
<template>
<div>
<div @click="state.name='李四'">{{state.name}}</div>
<div @click="state.age=21">{{state.age}}</div>
</div>
</template>
<script>
import { reactive, ref, toRefs } from 'vue';
export default {
name:'Page2',
setup(){
const state = reactive({
name:"张三",
age:20
})
return{
state
}
}
}
</script>
很好,两个 div 点击后都同步更新了页面元素显示,但是这样操作变量时都加了 state.,这似乎并不爽,你想到了 ES6 的展开操作:
setup(){
const state = reactive({
name:"张三",
age:20
})
return{
...state
}
}
这样再调用时就不需要写成 state.name了,直接写 name 就好,页面也能正常显示,但是你点击了 div 后发现又不能同步更新页面元素了,这是怎么回事?
把鼠标移上去看看,发现已经变成了普通 String,失去了响应式,这怎么办?
toRefs 的作用:
<template>
<div>
<div @click="name='李四'">{{name}}</div>
<div @click="age=21">{{age}}</div>
</div>
</template>
<script>
import { reactive, ref, toRefs } from 'vue';
export default {
name:'Page2',
setup(){
const state = reactive({
name:"张三",
age:20
})
return{
...toRefs(state)
}
}
}
其它都没变,你把 state 加了个 toRefs,再点击元素,发现页面同步更新了,说明 toRefs 把这种展开的列表里的元素又加上了响应式属性。