位置: IT常识 - 正文

Vue 3.x基础(vue3.0用法)

发布时间：2024-01-26

Vue 3.x基础模版 <template> // html </template> <script setup> // setup API // ... </script> <style> // css </style> setup API 变量（响应式） // 基本数据类型 let refVa ... Vue 3.x基础模版<template> // html</template><script setup> // setup API // ...</script><style> // css</style>setup API

推荐整理分享Vue 3.x基础(vue3.0用法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3官方教程,vue3.0教程,vue3.0入门教程,vue 3 教程,vue3 入门,vue3.0教程,vue3 入门,vue3.0教程,内容如对您有帮助，希望把文章链接给更多的朋友！

变量（响应式）

// 基本数据类型let refValue = ref(1)console.log(refValue.value) // 1// 复杂数据类型let reactiveValue = reactive({ a: 1, b: 2 })console.log(reactiveValue) // { a: 1, b: 2 }// 解构toRefs，一般用于reacative创建的变量const { a, b } = toRefs(reactiveValue)console.log(a, b) // 1, 2

函数

// 创建const changeValue = (v) => { refValue.value = v console.log(v) // 1}// 调用changeValue(1)生命周期选项式 APISetup API调用时机beforeCreateNot needed*#createdNot needed*#beforeMountonBeforeMount（常用）在挂载开始之前被调用：相关的 render 函数首次被调用。mountedonMounte（常用）组件挂载时调用beforeUpdateonBeforeUpdate数据更新之前调用，此时DOM还未更新updatedonUpdatedDOM 重新渲染和打补丁，此时DOM已更新，不要在该钩子函数里更新数据。beforeUnmountonBeforeUnmount在卸载组件实例之前调用。此时Vue实例仍是正常的。unmountedonUnmounted卸载组件实例后调用，组件实例的所有指令、事件侦听器都被移、子组件实例都会被卸载。activatedonActivated被 keep-alive 缓存的组件激活时调用。deactivatedonDeactivated被 keep-alive 缓存的组件停用时调用。errorCapturedonErrorCaptured当捕获一个来自子孙组件的错误时被调用，此钩子可以返回 false 以阻止该错误继续向上传播。renderTrackedonRenderTracked#renderTriggeredonRenderTriggered#

注意：因为 setup 是++围绕 beforeCreate 和 created++ 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

Vuex替代品，全局数据管理器

import { defineStore } from 'pinia'import { ref, computed, reactive } from 'vue';// useStore 可以是 useUser、useCart 之类的任何东西// 第一个参数是应用程序中 store 的唯一 idexport const usePiniaStore = defineStore('user', () => { // vue3 setup编程模式，让结构更加扁平化 const _this = window.$this // state const userId = ref('111122') const userData = ref(null) // action const getUser = async () => { const res = await _this.$api.getId() userData.value = res.data } // getter const userName = computed(() => userData.value.id + ' ---- ') // 导出 return { userData, userName, getUser, userId }})<script setup> import { usePiniaStore } from '../pinia/user.js' // 使用pinia user module const useStore = usePiniaStore() // 解构state const { userData, userName, userId } = storeToRefs(useStore) // 直接调用pinia函数 useStore.getUser() // 直接赋值 userId.value = 'aaa' console.log(`userStore:`, userId.value, userData.value)</script>