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');
});