vue3.0项目搭建

前言
本文并非标题党，而是实实在在的硬核文章，如果有想要学习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官网：Vite中文网

//	 创建工程
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。