VUE3的学习和使用(一)
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'); });