前端学习之vue3

险胜真菌
98 阅读4分钟

vue3学习总结

前言

此文章只做个人学习总结，有不足的地方欢迎各位大佬补充

项目搭建

vue3项目创建
但是在创建的之前要先保证电脑上有node环境并且并且版本要在18.3或者更高版本vue3官网地址

一般创建方式有两种cli和vite，官方推荐使用vite创建，我们这里使用vite创建项目

npm create vite@latest

输入命令后会让我们输入项目名称 模板 脚本语言
名称不输入会使用默认项目名称 vue3对ts支持更好我们默认使用ts也可以使用js

image.png

在vscode中打开项目结构如下

image.png

第一次打开vue3的项目会默认提示安装vue3的vscode插件选择安装即可（可以提供代码提示）
这里要注意的是如果你是选择js的话就不要安装提供的插件并使用vue2的插件(会冲突代码报红)

image.png

vue3基础

生命周期钩子

在vue3官方文档中总共有12个钩子常用的有三个(onMounted,onUpdated,onUnmounted)
具体的可以看官网

钩子名称描述使用方式
onMounted()在组件挂载完成后执行
在服务器端渲染期间不会被调用		onMounted(()=>{})
onUpdated()在组件因为响应式状态变更而更新其 DOM 树之后调用
在服务器端渲染期间不会被调用		onUpdated(()=>{})
onUnmounted()在组件实例被卸载之后调用
在服务器端渲染期间不会被调用		onUnmounted(()=>{})
onBeforeUpdate()在组件即将因为响应式状态变更而更新其 DOM 树之前调用
在服务器端渲染期间不会被调用		onBeforeUpdate(()=>{})
onBeforeUnmount()在组件实例被卸载之前调用
在服务器端渲染期间不会被调用		onBeforeUnmount(()=>{})
onErrorCaptured()在捕获了后代组件传递的错误时调用onErrorCaptured(()=>{)
onRenderTracked()调试钩子,当组件渲染过程中追踪到响应式依赖时调用
仅在开发模式下可用，且在服务器端渲染期间不会被调用		onRenderTracked(()=>{})
onRenderTriggered()调试钩子，当响应式依赖的变更触发了组件渲染时调用
仅在开发模式下可用，且在服务器端渲染期间不会被调用		onRenderTriggered(()=>{})
onActivated()若组件实例是 KeepAlive 缓存树的一部分，当组件被插入到 DOM 中时调用
在服务器端渲染期间不会被调用		onActivated(()=>{})
onDeactivated()若组件实例是 KeepAlive 缓存树的一部分，当组件从 DOM 中被移除时调用
在服务器端渲染期间不会被调用		onDeactivated(()=>{})
onServerPrefetch()异步函数，在组件实例在服务器上被渲染之前调用onServerPrefetch(async()=>{await.....})

选项式api

option API

沿用vue2的方式进行代码编写

<template>
    <div>
        {{ num }}
        <button @click="countNum"></button>
    </div>
</template>
<script>
export default{
    data(){
        return{
            num:1
        }
    },
    methods:{
        countNum(){
            this.num ++
        }
    }
}
</script>

组合式api

composition API

变量，方法都声明在setup函数中，通过命名式引入想要的生命钩子函数等，并且要变量能响应式要引入ref和reactive

<template>
    <div>
        {{ num }}
        <button @click="countNum"></button>
    </div>
</template>
<script>
import { ref,reactive } from "vue";
export default{
    setup(){
        const num  = ref(1)
        function countNum(){
            num.value ++ 
        }

        return {num,countNum}
    }
}
</script>
setup语法糖

setup函数还可以通过语法糖的方式使用

<template>
    <div>
        {{ num }}
        <button @click="countNum"></button>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

    const num  = ref(1)

    function countNum(){
        num.value ++ 
    }

</script>
ref和reactive

ref获取数据时要用num.value = 值
reactive直接通过点的方式

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

    const num  = ref()

    const user = reactive({
        name:'zhanshang',
        age:18
    })
</script>
wacth监听函数
<script setup lang="ts">
import { ref,reactive,watch } from "vue";

    const num  = ref()

    const user = reactive({
        name:'zhanshang',
        age:18
    })

  watch(()=>num.value,(newValue,oldValue)=>{
    //监听变量num，当num发生变化时候调用，返回新值newValue 和 变动之前的值oldValue
  })
</script>
props&emit 子父组件交互

父组件

<template>
  <div class="appClass">
    <optionApi :msg="msg" @update="update"></optionApi>
  </div>
</template>
<script setup lang="ts">
import optionApi from './pages/optionApi.vue';
import {ref} from 'vue'

const msg = ref('parent Value')

function update(value:String){
  console.log(value)
}
</script>

子组件

<template>
    <div>
        {{ msg }}
    </div>
</template>
<script setup lang="ts">
import { defineProps,defineEmits} from "vue";
const emits = defineEmits(['update'])

//接收父组件数据
defineProps({
    msg:String
})

//传递数据给父组件
function sendUpdate(){
    emits('update','Child Value')
}
</script>

学习总结

vue3对比起vue2新增了很多新的东西如:composition API，ref，setup，对ts的兼容和支持 文章中还有许多未提到的知识，暂时只写了个人学到的和常用的一些api等，有不足的欢迎各位大佬指点

avatar
文章
阅读
粉丝