Vue3.0中还为我们提供了一个对象式响应的reactive函数 。
Reactive函数创建一个响应式对象。
一:Reactive函数
其实,在我看来,reactive函数 就是VUE3.0为我们提供的替代VUE2.0中data的一个函数,因此,在这里,我不建议将方法也写到reactive函数中。
reactive函数 中只写数据即可。
1:引入
import {
ref,
reactive,
} from "vue";
2:实例
我这里使用上一部分中我们测试使用的代码来做示例,刚好对比一下ref与reactive在写法上边的区别。
Helloworld.vue
<template>
<h1>{{ msg }}</h1>
<!-- <button @click="count++">count is: {{ count }}</button> -->
<!-- 模板语法需要使用data.属性来调用 -->
<button @click="count++">count is: {{ data.count }}</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
<button @click="clickMe()">点我弹窗</button>
</template>
<script lang='ts'>
import {
ref,
reactive
} from "vue";
export default {
name: 'HelloWorld',
props: {
msg: String
},
// 使用setup 代替 data
// 因为我这里使用的是typescript,因此需要给参数指定类型
setup(props:any,context:any){
// ref 定义响应式数据
// let count = ref(0);
// reactive 创建响应式对象
let data = reactive({
// 定义响应式数据
count:0,
});
const clickMe = () => {
// 使用ref关键字绑定的变量,赋值 的时候必须使用.value
// count.value++;
// 调用reactive 定义对象的参数的时候需要使用对象.来调用
data.count++;
alert('hi');
}
return {
data,
clickMe
}
},
}
</script>
3:主要有这几个区别:
1:在js中调用需要使用data.属性来赋值使用。
2:在VUE模板语法中,也需要使用data.属性来赋值使用。
二:toRefs函数
模板语法中需要使用data.属性来调用属性显示,相对来说就比较麻烦。
其实我们可以使用ES6中的扩展运算符来对其进行解构处理,但是,这样吧解构之后,便不再具有响应式的属性,这个不行。
VUE3.0为我们提供了toRefs函数可以解决这个问题。
1:引入
import {
ref,
reactive,
toRefs
} from "vue";
2:示例
Helloworld.vue
<template>
<h1>{{ msg }}</h1>
<button @click="count++">count is: {{ count }}</button>
<!-- 模板语法需要使用data.属性来调用(单独使用reactive函数) -->
<!-- <button @click="count++">count is: {{ data.count }}</button> -->
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
<button @click="clickMe()">点我弹窗</button>
</template>
<script lang='ts'>
import {
ref,
reactive,
toRefs
} from "vue";
export default {
name: 'HelloWorld',
props: {
msg: String
},
// 使用setup 代替 data
// 因为我这里使用的是typescript,因此需要给参数指定类型
setup(props:any,context:any){
// ref 定义响应式数据
// let count = ref(0);
// reactive 创建响应式对象
let data = reactive({
// 定义响应式数据
count:0,
});
const clickMe = () => {
// 使用ref关键字绑定的变量,赋值 的时候必须使用.value
// count.value++;
// 调用reactive 定义对象的参数的时候需要使用对象.来调用
data.count++;
alert('hi');
}
// 使用toRefs函数对data对象进行包装,确保使用扩展运算符进行解构之后,仍具有响应式
let param = toRefs(data);
return {
// data,
...param,
clickMe
}
},
}
</script>
完整的代码已经给出,具体的使用,你可能还需要自己试一下。
————————————————
版权声明:本文为CSDN博主「camellias_」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_39708228/article/details/114278167