Vue3超详细教学

一、介绍

Vue3 是一种流行的 JavaScript 框架，用于构建交互式的 Web 应用程序。它是 Vue.js 的最新版本，带来了许多新特性和改进，包括更好的性能、更小的包体积和更好的开发体验。

本文将详细介绍 Vue3 的使用，包括安装和创建 Vue3 项目、组件的创建和通信、响应式数据和计算属性、模板语法和指令、条件渲染和列表渲染、表单处理、路由和导航、状态管理以及 Vue3 的生态系统。

二、安装和创建Vue3项目

首先，我们需要安装 Vue CLI，它是一个用于快速搭建 Vue 项目的脚手架工具。通过以下命令安装 Vue CLI：

npm install -g @vue/cli

安装完成后，我们可以使用 Vue CLI 创建一个新的 Vue3 项目：

vue create my-project

Vue CLI 会为我们提供一些预设选项，我们可以根据需要进行选择。创建完成后，我们启动开发服务器：

npm run serve

现在，我们已经成功安装并创建了一个 Vue3 项目。

三、组件通信

一、props(父传子)

props主要用于父组件向子组件通信。在父组件中通过用 :msg="msg" 绑定需要传给子组件的属性值，然后再在子组件中用 props 接收该属性值。

方法一：

// 父组件 传值
<child :msg1="msg1" :msg2="msg2"></child>
<script>
import child from "./child.vue";
import { ref, reactive } from "vue";
export default {
    setup() {
        // 基础类型传值
        const msg1 = ref("父组件传给子组件的msg1");
        // 复杂类型（数组或对象）传值
        const msg2 = reactive(["父组件传给子组件的msg2"]);
        return {
            msg1,
            msg2
        }
    }
}
</script>
// 子组件 接收
<script>
export default {
  // props接受父组件传过来的值
  props: ["msg1", "msg2"],
  setup(props) {
    console.log(props);
    // { msg1:"父组件传给子组件的msg1", msg2:"父组件传给子组件的msg2" }
  },
}
</script>

方法二：使用 setup 语法糖

// 父组件 传值
<child :msg="msg">
</child>
<script setup>
    import child from "./child.vue";
    import { ref, reactive } from "vue";
    const msg = ref("父组件传给子组件的值");
    // const msg = reactive(["父组件传给子组件的值"]);
    // const msg = reactive({"父组件传给子组件的值"});
</script>
 
// 子组件 接收
<script setup>
    // 这里不需要在从vue中引入defineProps，直接用
    const props = defineProps({
        // 第一种写法
        msg: String;
        // 第二种写法
        msg:{
            type:String,
            default:""
        }
    })
    console.log(props);
</script>

二、emit(子传父)

emit 也就是通过自定义事件传值，主要用于子组件向父组件通信。

在子组件的点击事件中，通过触发父组件中的自定义事件，把想传给父组件的信息以参数的形式带过去，父组件便可以拿到子组件传过来的参数值。

子组件传参

<button @click="handleClick">点击</button>
<script>
export default {
    name: "son",
    setup(props,context) {
        const handleClick = () => {
            context.emit('myClick', '我是子组件的值')
        }
        return { handleClick }
    }
}
</script>

使用setup时，它接受两个参数：

• props: 组件传入的属性

• context

setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。

在vue3中得setup()中得第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

父组件接收

<div class="father">
     <h1>这是父组件</h1>
     <Son @myClick="handleClick"></Son>
</div>
<script>
import Son from './son.vue'
export default {
    name: "father",
    components: {
        Son
    },
    setup() {
        const handleClick = (val) => {
            console.log(val)
        }
        return{handleClick}
    }
}
</script>

三、expose / ref

expose与ref 主要用于父组件获取子组件的属性或方法。在子组件中，向外暴露出属性或方法，父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。

第一种方法：expose

子组件

setup(props, context) {
        context.expose({
            childName: "子组件的名称属性",
            childMethod() {
                console.log("子组件的方法");
            }
        })
  }

父组件接收属性和方法

<Son ref="childRef"></Son>
<button @click="handlerClick">按钮</button>
<script>
import Son from './son.vue';
import { ref } from "vue";
export default {
    name: "father",
    components: {
        Son
    },
    setup() {
        const childRef = ref(null);
        const handlerClick = () => {
            // 获取子组件对外暴露的属性
            const childName = childRef.value.childName;
            console.log(childName);
            // 调用子组件对外暴露的方法
            childRef.value.childMethod();
            console.log(childRef);
        }
        return { childRef, handlerClick }
    }
}
</script>

第二种方法：defineExpose

子组件

<script setup>
defineExpose({
    childName: "子组件的名称属性",
    childMethod() {
        console.log("子组件的方法");
    }
})
</script>

四、provide / inject

provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。

provide：在父组件中可以通过 provide 提供需要向后代组件传送的信息。

inject：从父组件到该组件无论嵌套多少层都可以直接用 inject 拿到父组件传送的信息。

父组件或者可以说成祖组件

<h2>我是祖组件--{{name}}---{{price}}</h2>
<Child />
import Child from "@/components/inject/child.vue"
import { reactive,toRefs,provide } from "vue";
components:{
    Child
  },
  setup() {
    let car  = reactive({name:'特斯拉',price:'10w'});
    provide('car',car)
    return{...toRefs(car)}
  }

子组件或者是后代组件

<script>
import { inject } from 'vue';
export default {
    setup() {
       let cars =  inject('car')
       console.log(cars,'****');
       return{cars}
    }
}
</script>

四  生命周期

Vue3 的生命周期钩子函数与 Vue2有所不同。下面是一些常用的生命周期钩子函数：

setup: 在创建前后调用

onBeforeMount：在挂载之前调用。
onMounted：在挂载之后调用。
onBeforeUpdate：在更新之前调用。
onUpdated：在更新之后调用。
onBeforeUnmount：在卸载之前调用。
onUnmounted：在卸载之后调用。

五  条件渲染

<template>
  <div id="wrap">
    <div id="title"><h1>探索OPPO</h1></div>
    <div id="box">
      <div id="main" v-for="(item, i) in arr" :key="i">
        <img :src="item.img" alt="" />
        <span>{{ item.name }}</span>
        <p>
          {{ item.content }}
          <i>{{ item.jian }}</i>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const arr = ref([
      {
        img: "https://image.oppo.com/content/dam/oppo/common/mkt/v2-2/oppo-msi-mvp-2024/2024msioppomvp_cn_864x576.jpg.thumb.webp",
        name: "2024MSI OPPO MVP 投票",
        content: "Dare To All IN",
        jian: "→",
      },
      {
        img: "https://image.oppo.com/content/dam/oppo/common/mkt/v2-2/imagine-if-2024/events-banner-864_576-cn.jpg?",
        name: "2024MSI OPPO MVP 投票",
        content: "Dare To All IN",
        jian: "→",
      },
      {
        img: "https://www.oppo.com/content/dam/oppo/common/mkt/v2-2/oppo-industrial-design-award-2023/events-banner/industrial-design-award-2023-864_576.jpg",
        name: "2024MSI OPPO MVP 投票",
        content: "Dare To All IN",
        jian: "→",
      },
      {
        img: "https://image.oppo.com/content/dam/oppo/common/mkt/v2-2/homepage-new-version/cn/explore-oppo/uefa-2023.jpg.thumb.webp",
        name: "2024MSI OPPO MVP 投票",
        content: "Dare To All IN",
        jian: "→",
      },
    ]);
    return {
      arr,
    };
  },
};
</script>

<style>
#main img {
  width: 320px;
  height: 212px;
  margin-bottom: 20px;
}
#main:hover img {
  transform: scale(1.1);
  transition: 0.3s;
}
#wrap {
  width: 1500px;
  height: 500px;
  background-color: aquamarine;
}
#title {
  height: 140px;
}
#box {
  display: flex;
  justify-content: space-around;
}
#main span {
  font-size: 20px;
  font-weight: 600;
}
#main p {
  font-size: 17px;
}

#main p i {
  display: inline-block;
  font-size: px;
  margin-left: 80px;
}
#main:hover i {
  transform: translateX(20px);
  transition: 0.3s;
}
</style>