vue3相比vue2更加轻量，区别之一就是使用setup代替了data,methods，还有响应式数据类型ref,reactive的使用。
新建一个index.vue
<template> html元素 </template>
<script setup lang="ts"> ts逻辑 </script>
<style scoped lang="scss"> 样式 </style>
vue3声明使用变量不再需要this指向，例如
import { ref, } from 'vue';
const flag = ref<boolean>(false);
flag.value = true;
import { reactive, } from 'vue';
interface userInfoType {
[key:string]: any;
}
const userData:userInfoType = reactive({
userName: '',
password: '',
});
/**
* 修改
* @param {string} type 属性名
* @param {string} value 属性值
* @returns {void}
*/
const changeValue = (type:string,value:string): void => {
userData[type] = value;
};
// 对某个属性值修改
userData.password = 'xxx';
两者区别在于
推荐reactive定义复杂的数据类型的数据，如对象类型；
ref推荐定义基本数据类型。在使用ref定义的数据时，需要加.value。
setup内箭头函数的写法
const loginFn = ():void => {
console.log('hello');
};
vue2和vue3的生命周期对比
Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivate
//生命周期函数写法
import { onMounted, } from 'vue';
onMounted(() => {
console.log('hello');
});
