Vue 3.x基础

  • Vue 3.x基础已关闭评论
  • 185 次浏览
  • A+
所属分类:Web前端
摘要

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


Vue 3.x基础

模版

<template>     // html </template>  <script setup>     // setup API     // ... </script>  <style>     // css </style> 

setup API

变量(响应式)

// 基本数据类型 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) 

生命周期

选项式 API Setup API 调用时机
beforeCreate Not needed* #
created Not needed* #
beforeMount onBeforeMount(常用) 在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted onMounte(常用) 组件挂载时调用
beforeUpdate onBeforeUpdate 数据更新之前调用,此时DOM还未更新
updated onUpdated DOM 重新渲染和打补丁,此时DOM已更新,不要在该钩子函数里更新数据。
beforeUnmount onBeforeUnmount 在卸载组件实例之前调用。此时Vue实例仍是正常的。
unmounted onUnmounted 卸载组件实例后调用,组件实例的所有指令、事件侦听器都被移、子组件实例都会被卸载。
activated onActivated 被 keep-alive 缓存的组件激活时调用。
deactivated onDeactivated 被 keep-alive 缓存的组件停用时调用。
errorCaptured onErrorCaptured 当捕获一个来自子孙组件的错误时被调用,此钩子可以返回 false 以阻止该错误继续向上传播。
renderTracked onRenderTracked #
renderTriggered onRenderTriggered #

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

<script setup> onMounted(() => {     console.log('Component is mounted!') }) // ... </script> 

计算属性、侦听器

<script setup> // 定义一个计算属性,计算年龄是否为18 const ageIs18 = computed(() => {   return age.value === 18 })  // 定义一个watch侦听器,监控count变化 watch(count, (nV, oV) => {   console.log(nV, oV) }) </script> 

路由

<!-- router.js -->  import { createRouter, createWebHashHistory } from 'vue-router'  const routes = [   {     path: '/',     redirect: '/home'     // component: () => import('../pages/home.vue') // 组件懒加载   }   ... ]  // 创建路由实例 const router = createRouter({   history: createWebHashHistory(), // 使用 hash 模式   routes, // `routes: routes` 的缩写 })  export default router 
<!-- main.js -->  import { createApp } from 'vue' import router from './router' ...  const app = createApp(App) app.use(router) // 挂载路由到Vue 
<!-- pages/home.vue -->  <script setup>     import { useRouter } from 'vue-router'          // useRouter()用于获取路由对象     const router = useRouter()     router.push({ path: '/next' })      // useRoute()用于获取当前路由对象     const route = useRoute()     const query = route.query </script> 

pinia

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

<!-- pinia/user.js -->  import { defineStore } from 'pinia' import { ref, computed, reactive } from 'vue';  // useStore 可以是 useUser、useCart 之类的任何东西 // 第一个参数是应用程序中 store 的唯一 id export 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 } }) 
<!-- pages/user.vue -->  <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>