vue3响应式数据实现及⽗⼦传参
reactive是⼀个函数，它可以定义⼀个复杂数据类型，成为响应式数据。----将数据响应化
toRef()函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。----优化访问，去除前缀（某⼀个属性）
toRefs()函数，转换响应式对象中所有属性（可以是⼀部分）为单独响应式数据，对象成为普通对象，并且值是关联的。----获取多个属性进⾏访问
ref()函数，常⽤于简单数据类型定义为响应式数据--在修改值和获取值的时候，需要.value--在模板中使⽤ref申明的响应式数据，可以省略.value
ref其实也可以定义对象，但是访问时需要value属性
// ⽗组件
<template>
<div class="home">
<!-- 直接传递post对象⼦组件使⽤需要加post前缀(post.title) -->
<!-- <set-up :post="post"></set-up> -->
<set-up :title="title"></set-up>
<!-- <set-up :name="name"></set-up> -->
<p>{{ title }}&{{ name }}</p>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import SetUp from "../components/setUp.vue";
import { reactive, toRefs, toRef } from "vue";
export default {
name: "HomeView",
components: {
HelloWorld,
SetUp,
},
setup() {
const post = reactive({
title: "vue3⽗⼦传参",
name: "zq",
});
// toRef传递对象中的某⼀属性
// const name = toRef(post, "name");
// return { name };
// ⽅式⼀：直接传递对象中的属性
// const { title } = toRefs(post);
// return { title };
// ⽅式⼆
return { ...toRefs(post) };
// 传递对象⼦组件使⽤post.title
/
/ return { post };
},
};
</script>
// ⼦组件
<template>
<div>
<h3>setup()函数</h3>
<!-- <p>显⽰属性:{{ post.title }}</p> -->
<p>显⽰属性:{{ title }}</p>
<!-- <p>姓名:{{ name }}</p> -->vuejson转对象
<p>点击count+1</p>
<button @click="handleClick">{{ count }}</button>
</div>
</template>
<script>
import { toRef, ref } from "vue";
export default {
props: {
// post: Object,
title: String,
// name: String,
},
setup(props) {
// const atr = "hello";
// return { atr }; setup返回的值相当于双向数据绑定的属性
// console.log(props.title);
// ref主要定义基本类型的数据并保证响应式能⼒（也可以是对象或数组）
const count = ref(0);
const handleClick = () => {
count.value += 1;
};
return { count, handleClick };
},
};
</script>
<style lang="scss" scoped></style>
总结
1.setup中直接返回的普通数据不是响应式的
2.通过reactive包裹对象可以成为响应式数据
3.为了简化对象的访问（去掉前缀），可以使⽤toRef进⾏优化
4.为了获取对象中多个属性，可以使⽤toRefs进⼀步简化
5.如果是简单数据类型，使⽤ref定义更加合适，ref的数据具有响应能⼒

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。