Vue3.x基础解析【推荐学完Vue2.x的来了解一下】

1.认识Vue3

官网：Vue3

Vue3支持Vue2的很多特性，并且能够 更好的支持TypeScript。Vue3在性能上也大大提升，打包大小减少，渲染更快，内存也相对减少。

2.创建Vue3项目

博客地址：Vue3基础解析

1.1 vue-cli创建

npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue create my-project

1.2 vite创建

vite官网

npm init vite <project-name>
cd <project-name>
npm install
npm run dev

3.初探Vue3

3.1 采用TS后入口文件为main.ts

//引入createApp函数,创建对应的应用，产生实例对象
import {
    createApp } from 'vue'

import App from './App.vue'
//创建App应用并且挂载
createApp(App).mount('#app')

3.2 Vue3中html模版可以没有根元素

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

如果是Vue2则需要在一个根标签<div></div>

3.3 script

<script lang="ts">
//defineComponent函数的目的是定义一个组件，所传的配置对象就相当于Vue2的配置对象
import {
    defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
   
  name: 'App',
  components: {
   
    HelloWorld
  }
});
</script>

4.常用Composition API

4.1 setup

• setup在生命周期函数 beforeCreate 之前就执行，而且只执行一次，此时组件对象还没有被创建，因此是无法使用this的，this为undefined
• setup尽量不要与data和methods混合使用
• setup参数setup(props, { attrs, emit, slots })
• prop参数是一个对象，里面有父级组件向子级组件传递的数据，并且是在子级组件中使用props接收到的所有属性，子组件不用props接收则里面就没有传递的这个数据
• attrs则是传递了没有接收的数据
• emit：用来分发自定义事件的函数, 相当于 this.$emit
• slots：包含所有传入的插槽内容的对象, 相当于 this.$slots

4.2 setup与ref

与Vue2对比,Vue3将。属性值与方法都放在setup中，所有的组合 API 函数都在此使用, 只在初始化时执行一次，而且setup函数如果返回对象，对象中的属性或者方法都可以在模版中使用。

在方法中修改属性的值需要用到num.value，但是在模版中显示该值不需要.value

<template>
  {
   {
    num }}
  <button @click="Method1">button</button>
</template>

<script lang="ts">
import {
    defineComponent, ref } from "vue";

export default defineComponent({
   
  name: "App",
  setup() {
   
    //如果只是const num = 0;num不是响应式的数据，修改这个数据页面不会发生更改
    const num = ref(0);
    function Method1() {
   
      console