<template> <h1>{ { counter1 }}</h1> <button @click="counter1++">按一下</button> <hr> <h1>{ { counter2 }}</h1> <button @click="counter2++">按一下</button> <hr> <h1>{ { a.b.counter3 }}</h1> <button @click="a.b.counter3++">按一下</button> <h1>{ { data.counter1 }}</h1> </template> <script> import { reactive,ref,toRef,toRefs } from 'vue' export default { name : "App", setup(){ let data = reactive({ counter1 : 1, counter2 : 100, a : { b : { counter3 : 1000 } } }); // 返回一个DATA就不一样了,会有响应式 // return {data}; // return { // // 这里变成了获取数值 // // 没有响应式了 // counter1 : data.counter1, // counter2 : data.counter2, // counter3 : data.a.b.counter3, // }; // return { // data, // // 这样可以实现,用ref包裹以后 // // 但是依旧不可以实现响应式 // counter1 : ref(data.counter1), // counter2 : ref(data.counter2), // counter3 : ref(data.a.b.counter3), // }; console.log(toRef(data,"counter1")); // 执行toRef底层会生成一个ObjectRefImpl对象(应用对象) // 自带GET和SET方法的代理应用对象 // 只要有引用对象,就有value属性,这里的value属性是响应式的,有get和set方法 // 我们读取就调用get,修改就调用set即可 // return { // // toRef(前面是对象,后面是对象的属性名) // data, // counter1 : toRef(data,"counter1"), // counter2 : toRef(data,"counter2"), // counter3 : toRef(data.a.b,"counter3"), // }; // toRefs可以解决这个问题,越写越长 return { data, // 使用ES6语法分解即可 ...toRefs(data) }; } } </script> <style> </style>
<template>
<h1>{ { counter1 }}</h1>
<button @click="counter1++">按一下</button>
<hr>
<h1>{ { counter2 }}</h1>
<button @click="counter2++">按一下</button>
<hr>
<h1>{ { a.b.counter3 }}</h1>
<button @click="a.b.counter3++">按一下</button>
<h1>{ { data.counter1 }}</h1>
</template>
<script>
import { reactive,ref,toRef,toRefs } from 'vue'
export default {
name : "App",
setup(){
let data = reactive({
counter1 : 1,
counter2 : 100,
a : {
b : {
counter3 : 1000
}
}
});
// 返回一个DATA就不一样了,会有响应式
// return {data};
// return {
// // 这里变成了获取数值
// // 没有响应式了
// counter1 : data.counter1,
// counter2 : data.counter2,
// counter3 : data.a.b.counter3,
// };
// return {
// data,
// // 这样可以实现,用ref包裹以后
// // 但是依旧不可以实现响应式
// counter1 : ref(data.counter1),
// counter2 : ref(data.counter2),
// counter3 : ref(data.a.b.counter3),
// };
console.log(toRef(data,"counter1"));
// 执行toRef底层会生成一个ObjectRefImpl对象(应用对象)
// 自带GET和SET方法的代理应用对象
// 只要有引用对象,就有value属性,这里的value属性是响应式的,有get和set方法
// 我们读取就调用get,修改就调用set即可
// return {
// // toRef(前面是对象,后面是对象的属性名)
// data,
// counter1 : toRef(data,"counter1"),
// counter2 : toRef(data,"counter2"),
// counter3 : toRef(data.a.b,"counter3"),
// };
// toRefs可以解决这个问题,越写越长
return {
data,
// 使用ES6语法分解即可
...toRefs(data)
};
}
}
</script>
<style>
</style>
VUE框架Vue3使用toRef和toRefs实现简化返回的对象属性操作------VUE框架
猜你喜欢
转载自blog.csdn.net/2201_75960169/article/details/135269648
今日推荐
周排行