前言:相信大家对于vue2的使用已经挺熟练,就算遇见难题,相信大家逛于各大论坛博客也能找到解决办法,最近小编在学习vue3,记录一下学习历程,顺便提前给大家踩踩坑!
vue3数据声明,vue3采用了组合式的开发模式,在声明变量时,我们需要引入 ref 、reactive
ref:针对于基础类型数据的声明,比如string,number ,boolean,也可以声明引用类型数据,array,object,但其本质内部依然采用了raective声明
reactive:针对于引用类型数据的声明,array,object
vue3的响应式原理,是由es6 新特性proxy,通过对源数据进行代理,采用Reflect映射的方式以此来达到数据的响应式,如果在声明数据的时候,不使用ref 或者 reactive 则数据不会响应!
<template>
<!-- vue3的组件结构可以不用根标签<div></div> -->
<h1>个人信息</h1>
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>性别:{{ info.sex }}</h2>
<h2>身高:{{ info.height }}</h2>
<h2>爱好运动:{{ info.like }}</h2>
<h2>其他爱好:{{ hobby }}</h2>
<h2>------------------------------------------------</h2>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<h2>性别:{{ person.info.sex }}</h2>
<h2>身高:{{ person.info.height }}</h2>
<h2>爱好运动:{{ person.info.like }}</h2>
<h2>其他爱好:{{ person.hobby }}</h2>
</template>
<script>
import {ref, reactive } from "vue"; // reactive 只针对于对象的响应式变化,reactive会将该对象实例化为一个 proxy对象
export default {
name: "App",
setup() {
let name = ref("小明");
let age = ref(18);
let info = reactive({
sex: "男",
height: 1.8,
like: "游泳",
});
let hobby =reactive(["抽烟", "喝酒", "烫头"]) ;
// 可简写成为下方数据 长得和vue2中的data很像
let person = reactive({
name: "小明",
age: 18,
info: {
sex: "男",
height: 1.8,
like: "游泳",
},
hobby: ["抽烟", "喝酒", "烫头"],
});
//请记得一定需要抛出数据
return {
name,
age,
info,
hobby,
person,
};
},
};
</script>
下一篇:vue3数据变量的修改https://blog.csdn.net/qq_42543244/article/details/122146552