vue2到vue3 setup函数中的主要功能对应_steup 中const 对应vue2写到哪-优快云博客

本文链接：https://blog.youkuaiyun.com/yifangshikong/article/details/124355335

本文介绍了Vue3中声明响应式变量的区别，通过对比非响应式变量，展示了如何使用`ref`创建响应式变量，并在3秒后改变其值。同时，列举了Vue2到Vue3的其他常用操作映射，包括组件的`ref`、事件发射、路由跳转、函数声明、获取对象原始值、钩子函数的使用以及组件`props`的声明方式。这些转换对于理解Vue3的迁移和使用至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. vue 3中声明常用类型的变量

1.1 这种是普通的非响应式变量

<template>
    iStr: {{iStr}}                 <br/><br/>
    iNum: {{iNum}}                 <br/><br/>
    iArray length: {{iArray.length}}    <br/><br/>
    iObj.a: {{iObj.a}}    <br/><br/>
</template>
<script setup>
   let iStr='iStr';
   let iNum=10;
   let iObj={a:10};
   let iArray=[];

   console.log("3秒后开始改变值");
   setTimeout(() => {
       iStr="";
       iNum=100;
       console.log("当前iNum的值",iNum);
       console.log("当前iStr的值",iStr);
   }, 3*1000);
</script>

这种方法声名的变量不是响应式的，如图

1.2 响应式声名变量

<template>
    iStr: {{iStr}}                 <br/><br/>
    iNum: {{iNum}}                 <br/><br/>
    iArray length: {{iArray.length}}    <br/><br/>
    iObj.a: {{iObj.a}}    <br/><br/>
</template>
<script setup>
import {ref} from 'vue';
   const iStr=ref('iStr');
   const iNum=ref(10);
   const iObj=ref({a:10});
   const iArray=ref([]);

   console.log("3秒后开始改变值");
   setTimeout(() => {
       iStr.value="====";
       iNum.value=100;
       iObj.value.a=999;
       iArray.value.push(123);
       iArray.value.push(321);
       console.log("当前iNum的值",iNum);
       console.log("当前iStr的值",iStr);
   }, 3*1000);
</script>

效果图如下

2. 其他常用操作映射关系

序号	vue2操作	<script setup></script> 中操作
1	this.$refs.componentA	const componentA = ref()	组件的ref='ComponentA' 直接声名同名的变量即可
2	this.$emit('事件名')	import {defineEmits}from 'vue' const emits = defineEmits(["事件1", "事件2"]); emits("事件1"); emits("事件2");	发射事件
3	this.$router.push({path:'/login'})	import { useRouter } from 'vue-router' let router = useRouter(); router.push({path:'/login'});	获取router切换页面
4	定义函数 methods:{ function A{ } }	setup中直接定义方法1 ：const a = function(){ } 方法2 ：const a = () =>{ } 方法3： function a(){ }	声名函数
5	直接在函数中用this获取对象即可	import {toRaw} from 'vue' const form = ref({}); let info = toRaw(form);	使用对象的原始值
6	export default{ name:'componentA', onMounted(){ }, onUpdate(){ } }	onMounted(() =>{ //函数体 }) onUpdate(() =>{ //函数体 })	钩子函数
7	props:["propA"，”propB","propC"]	import {defineProps} from 'vue'; const props = defineProps({ child: { propA:String, // 参数类型 default: 1, //默认值 required: true, //是否必传 validator: value => { return value >= 0 } }, propB: String, propC: String, })	声名组件的prop