从0开始手把手带你入门Vue3-全网最全(1.1w字)

前言

本文并非标题党，而是实实在在的硬核文章，如果有想要学习Vue3的网友，可以大致的浏览一下本文，总体来说本篇博客涵盖了Vue3中绝大部分内容，包含常用的CompositionAPI(组合式API)、其它CompositionAPI以及一些新的特性：Fragment、Teleport、Suspense、provide和inject。

项目搭建

既然是学习Vue3，那么首先应该需要的是如何初始化项目，在这里提供了两种方式供大家参考

• 方式一：vue-cli脚手架初始化Vue3项目

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

//	查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
//	安装或者升级你的@vue/cli
npm install -g @vue/cli
//	 创建
vue create vue_test
// 启动
cd vue_test
npm run serve

• 方式二：vite初始化Vue3项目

vite官网：https://vitejs.cn/

//	 创建工程
npm init vite-app <project-name>
//	进入工程目录
cd <project-name>
//	 安装依赖
npm install
//	运行
npm run dev

项目目录结构分析

这里的项目目录结构分析主要是main.js文件

• Vue2里面的main.js

new Vue({
  el: '#app',
  components: {},
  template: ''
});

• Vue3里面的main.js

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

在Vue2里面，通过new Vue({})构造函数创建应用实例对象，而Vue3引入的不再是Vue的构造函数，引入的是一个名为createApp的工厂函数创建应用实例对象。

Vue3-devtool获取

devtool:https://chrome.zzzmh.cn/info?token=ljjemllljcmogpfapbkkighbhhppjdbg

Composition API

setup

• 理解：Vue3.0中一个新的配置项，值为一个函数

• setup是所有Composition API(组合式API)的入口

• 组件中所用到的数据、方法等等，均要配置在setup里面

• setup函数的两种返回值

  • 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用
  • 若返回一个渲染函数，则可以自定义渲染内容

• setup的执行时机

  • 在beforeCreate之前执行一次，此时this为undefined

• setup的参数

  props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性

  context：上下文对象

  • attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs
  • slots：收到的插槽内容，相当于this.$slots
  • emit：分发自定义事件的函数，相当于this.$emit

注意事项：

• 尽量不要与Vue2x的配置使用

  • Vue2x的配置(data、methods、computed)均可以访问到setup中的属性、方法
  • setup中不能访问Vue2x的配置(data、methods、computed)
  • 如果data里面的属性和setup里面的属性有重名，则setup优先

• setup不能是一个async函数，因为返回值不再是return的对象，而是Promise,模板看不到return对象中的属性，但是后期也可以返回一个Promise实例，需要Suspense和异步组件的配合

示例一：setup函数的两种返回值

<template>
    <h2>练习setup相关内容</h2>
    <!--<h2>setup返回一个对象，并使用对象中的属性和方法</h2>-->
    <!--<p>姓名：{{student.name}}</p>-->
    <!--<p>年龄：{{student.age}}</p>-->
    <!--<button @click="hello">点击查看控制台信息</button>-->
    <hr>
    <h2>setup返回一个函数</h2>
</template>

<script>
    import {h} from 'vue'
    export default {
        name: "setupComponent",
        setup(){
            // 属性
             let student={
                name:'张三',
                age:18,
             }
            // 方法
        function hello() {
               console.log(`大家好，我叫${student.name},今年${student.age}`)
             }
             return{	// 返回一个对象
                 student,
                 hello,
             }
            // return()=>h('h1','你好')	// 返回一个函数
        }
    }
</script>

<style scoped>

</style>

这里需要注意的是setup里面定义的属性和方法均要return出去，否则无法使用

示例二：setup里面的参数和方法和配置项混合使用

<template>
    <h2>setup和配置项混用</h2>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>性别：{{sex}}</h2>
    <button @click="sayHello">sayHello（Vue3里面的方法）</button>
    <button @click="sayWelcome">sayWelcome（Vue2里面的方法）</button>
</template>

<script>
    export default {
        name: "setup01_component",
        data(){
          return{
            sex:'男',
            sum:0,
          }
        },
        methods:{
            sayWelcome(){
                console.log(`sayWelcome`)
            },
        },
        setup(){
            let sum=100;
            let name='张三';
            let age=18;
            function sayHello() {
                console.log(`我叫${name}，今年${age}`)
            }
            return{
                name,
                age,
                sayHello,
                test02,
                sum
            }
        }
    }
</script>

<style scoped>

</style>

这段代码是先实现了setup里面的属性和方法，以及Vue2中配置项里面的属性和方法。接下来添加对应的混合方法

<template>
    <h2>setup和配置项混用</h2>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>性别：{{sex}}</h2>
    <button @click="sayHello">sayHello（Vue3里面的方法）</button>
    <button @click="sayWelcome">sayWelcome（Vue2里面的方法）</button>
    <br>
    <br>
    <button @click="test01">测试Vue2里面调用Vue3里面的属性和方法</button>
    <br>
    <br>
    <button @click="test02">测试Vue3setup里面调用Vue2里面的属性和方法</button>
    <br>
    <h2>sum的值是：{{sum}}</h2>
</template>

<script>
    export default {
        name: "setup01_component",
        data(){
          return{
            sex:'男',
            sum:0,
          }
        },
        methods:{
            sayWelcome(){
                console.log(`sayWelcome`)
            },
            test01(){
                console.log(this.sex);  // Vue2里面的属性(data里面的属性)
                // setup里面的属性
                console.log(this.name);
                console.log(this.age);
                // setup里面的方法
                this.sayHello();
            }
        },
        setup(){
            let sum=100;
            let name='张三';
            let age=18;
            function sayHello() {
                console.log(`我叫${name}，今年${age}`)
            }
            function test02() {
                // setup里面的属性
                console.log(name);
                console.log(age);

                // data里面的属性
                console.log(this.sex);
                console.log(this.sayWelcome);
            }
            return{
                name,
                age,
                sayHello,
                test02,
                sum
            }
        }
    }
</script>

<style scoped>

</style>

这里新增了test01和test02方法，分别点击，控制台可以看到，点击配置项里面test01方法时，除了自身的sex属性有值，setup里面定义的属性也有值以及方法也可以调用，点击setup里面定义的test02方法时，控制台只能输出setup里面定义的属性和方法，而配置项里面定义的属性和方法值均为undefined。

• setup里面定义的属性和方法均可以在配置项里面使用(methods、computed、watch等)，而配置项里面定义的属性和方法无法在setup里面调用
• 如果setup里面的属性和data里面的属性有重名，则setup里面的属性优先

示例三：setup的执行时机
setup会在beforeCreate之前执行一次

<template>
    <h2>setup的执行机制</h2>
</template>

<script>
    export default {
        name: "setup_component03",
        setup(){
            console.log('setup')
        },
        beforeCreate(){
            console.log('beforeCreate')
        }
    }
</script>

<style scoped>

</style>

查看控制台的话我们看到的顺序是setup>beforeCreate

setup里面context和props的使用

Vue2里面props和slot的使用

讲解setup这里面的两个参数之前，先回顾一下Vue2里面的相关知识

• props和自定义事件的使用
• attrs
• slot(插槽)

示例一：Vue2props和自定义事件的使用

准备两个组件，分别为parent.vue组件和child.vue组件

parent.vue

<template>
    <div class="parent">
      我是父组件
      <child msg="传递信息" name="张三" @sendParentMsg="getMsg"/>
    </div>
</template>
<script>
    import Child from "./Child";
    export default {
        name: "Parent",
      components: {Child},
      methods:{
        getMsg(msg){
          console.log(msg)
        }
      }
    }
</script>
<style scoped>
  .parent{
    padding: 10px;
    background-color: red;
  }
</style>

child.vue

<template>
    <div class="child">
      <h2>我是子组件</h2>
      <p>父组件传递过来的消息是:{{msg}}</p>
      <p>父组件传递过来的消息是:{{name}}</p>
      <button @click="sendMsg">向父组件的传递信息</button>
    </div>
</template>
<script>
    export default {
        name: "Child",
        props:{
          msg:{
            type:String,
            default:''
          },
          name:{
            type:String,
            default:''
          }
        },
        mounted(){
          console.log(this);
        },
        methods:{
          sendMsg(){
            this.$emit("sendParentMsg",'通知父组件更新')
          }
        }
    }
</script>
<style scoped>
  .child{
    padding: 10px;
    background-color: orange;
  }
</style>

child组件对应的代码如下：

<template>
    <div class="child">
      <h2>我是子组件</h2>
      <!--<p>父组件传递过来的消息是:{{msg}}</p>-->
      <!--<p>父组件传递过来的消息是:{{name}}</p>-->
      <p>父组件传递过来的消息是:{{$attrs.msg}}</p>
      <p>父组件传递过来的消息是:{{$attrs.name}}</p>
      <button @click="sendMsg">向父组件的传递信息</button>
    </div>
</template>

<script>
    export default {
        name: "Child",
        // props:{
        //   msg:{
        //     type:String,
        //     default:''
        //   },
        //   name:{
        //     type:String,
        //     default:''
        //   }
        // },
        mounted(){
          console.log(this);
        },
        methods:{
          sendMsg(){
            this.$emit("sendParentMsg",'通知父组件更新')
          }
        }
    }
</script>

<style scoped>
  .child{
    padding: 10px;
    background-color: orange;
  }
</style>

子组件通过props接收父组件传递的信息，通过this.$emit()自定义事件向父组件传递信息。当使用props接收数据的时候，attrs里面的数据为空，如果没有使用props接收数据的话，那么props里面就有值。

示例二：Vue2里面slot的使用

同理准备两个组件，一个Index.vue组件，另一个为MySlot.vue组件

Index.vue

<template>
    <div class="index">
      <h2>我是Index组件</h2>
      <!--写法一-->
      <my-slot>
        <!--插槽里面的内容-->
        <h2>传入的slot参数</h2>
        <h2>传入的slot参数</h2>
        <h2>传入的slot参数</h2>
        <h2>传入的slot参数</h2>
      </my-slot>
      <!--写法二-->
      <my-slot>
        <template slot="header">
          <h2>我是header组件</h2>
        </template>
        <template slot="footer">
          <h2>我是footer附件</h2>
        </template>
      </my-slot>
    </div>
</template>

<script>
    import MySlot from "./MySlot";
    export default {
        name: "Index",
      components: {MySlot}
    }
</script>

<style scoped>
  .index{
    padding: 10px;
    background: red;
  }
</style>

MySlot.vue

<template>
    <div class="slot">
      <h2>我是MySlot组件</h2>
      <slot></slot>
      <br>
      <slot name="header"></slot>
      <br>
      <slot name="footer"></slot>
    </div>
</template>

<script>
    export default {
        name: "MySlot",
        mounted(){
          console.log(this);
        }
    }
</script>

<style scoped>
  .slot{
    padding: 10px;
    background: orange;
  }
</style>

ref

• 作用：定义一个响应式数据

• 语法：const xxx=ref(initValue)

• 创建一个包含响应式数据的引用对象(reference对象);

• JS中操作数据：xxx.value=xxx;

• 模板中读取数据：不需要.value,直接：

  {{xxx}}