Vue3的setup函数以及ref和reactive方法的使用
在vue3中,有个核心的东西,setup函数,它相当于一个新的生命周期,在beforeCreate 之前执行,在里面没有thissetup默认是非响应式的,即做点击事件修改num的值,模板上的num不会跟着变。
·
在vue3中,有个核心的东西,setup函数,它相当于一个新的生命周期,在beforeCreate 之前执行,在里面没有this
setup默认是非响应式的,即做点击事件修改num的值,模板上的num不会跟着变。
这时候需要用ref方法来让它变成响应式:
<template>
<div>
<div>Vue3中的setup函数</div>
<div>{{ count }}</div>
<div>
<button @click="setCount(1)">添加</button>
</div>
</div>
</template>
<script>
//1.将ref函数从vue当中导入
import { ref } from "vue";
export default {
//2.把一个值类型 进行ref封装
setup() {
const count = ref(0);
//4.函数
const setCount = (val) => {
// 规定val的类型
if (typeof val === "number") {
console.log(count.value);
count.value += val;
} else {
console.error("val必须是一个数字");
}
};
//3.把想在外面进行渲染的数据,通过return导出
return {
count,
setCount,
};
},
};
</script>
重点:setup中不能使用this,ref就是接收某些东西的内部值并返回一个可响应的ref对象,使用return把数据导出进行渲染
其实基于上面这种,我们还有种优化方案,就是把setup中的函数提取到外面抽离到外面进行封装,setup里只需进行一次解构,这样就大大减少了setup中的代码和整洁度
代码如下:
<template>
<div>
<div>{{ count }}</div>
<div>
<button @click="submit(1)">添加</button>
</div>
</div>
</template>
<script>
/*
目标:学会在setup limian进行数据响应式操作
*/
//1.将ref函数从vue当中导入
import { ref } from "vue";
// initVal 初始值
const useCount = (initVal) => {
//2.把一个值类型 进行ref的包装
const count = ref(initVal);
// 4.函数
const submit = (val) => {
if (typeof val === "number") {
count.value += val;
} else {
console.error("val必须是一个数字");
}
};
return [count, submit];
};
export default {
setup() {
const [count, submit] = useCount(0);
// 3.把想在外面进行的渲染的数据,通过return导出
return {
count,
submit,
};
},
};
</script>
<style>
</style>
toRef的使用:
什么是toRef:
比如有这样的一种情况,一个对象里面的数据,有一部分是响应式的,有一部分是写死的
这样就可以使用toRef可以把一个对象里面的属性变成响应式的数据
代码如下:
<template>
<div>
<div>ageRef:{{ ageRef }}</div>
</div>
</template>
<script>
// 1.导入
import { reactive, toRef } from "vue";
export default {
setup() {
// 可以有这样的一种情况,一个对象里面的数据,有一部分是响应式的,有一部分是写死的
//toRef可以把一个对象里面的属性变成响应式的数据
const state = reactive({
name: "狗蛋",
age: 15,
});
const ageRef = toRef(state, "age");
console.log(ageRef);
setInterval(() => {
ageRef.value++;
}, 1000);
return {
ageRef,
state,
};
},
};
</script>
<style>
</style>
以上代码中出现了一个新鲜词汇reactive,下面就详细介绍一下用法
reactive方法 把对象里面的多个属性变成响应式数据
<template>
<div>
<div>name:{{ p.name }} age:{{ p.age }}</div>
<div>
<button @click="changeAge">累加</button>
</div>
<div>{{ count }}</div>
</div>
</template>
<script>
/*
目标:ref把值类型变成响应式对象
再利用reactive方法 把对象里面的多个属性变成响应式数据
*/
// 1
import { reactive, ref } from "vue";
export default {
setup() {
//2.调用reactive方法进行数据的响应式处理
const p = reactive({
name: "花腔",
age: 18,
});
console.log(p);
const changeAge = () => {
p.age++;
};
const count = ref(0);
return {
p,
changeAge,
count,
};
},
};
</script>
<style>
</style>
最后再介绍一种toRefs
一个state里面 可能键非常多 如果一个个的导出会比较麻烦,使用toRefs把一个响应式对象里面的每一个数据 都变成ref对象
<template>
<div>
<div>{{ a.age }}</div>
<div>{{ b }}</div>
</div>
</template>
<script>
//1.导入
import { reactive, toRefs } from "vue";
/*
把一个state里面 可能键非常多 如果一个个的导出会比较麻烦
使用toRefs把一个响应式对象里面的每一个数据 都变成ref对象
*/
export default {
setup() {
const state = reactive({
a: {
age: 13,
},
b: 10,
c: 20,
d: 30,
});
setInterval(() => {
state.b++;
}, 1000);
return {
// 如果直接使用结构会导致响应式特性失效
// ...state,
...toRefs(state),
};
},
};
</script>
<style>
</style>
如果有什么不了解的地方可留言,如果觉得小编文章做得不好不全,小编一定会进行改进,谢谢!
更多推荐
已为社区贡献1条内容
所有评论(0)