Vue笔记

记录了一些在学习Vue过程中的基础知识点

动态绑定

<script setup>
    const data1 = ref(0)
    const data2 = reactive({
        count : 0,
    })
    // ref可以对对象和基本类型使用，reactive只能对对象使用
    console.log(data1.value)
    //ref取值需要使用.value
</script>

计算函数

<script setup>
    const list = ref([1, 2, 3, 4, 5, 6, 7, 8])
    const c = computed(() => {
    	// 作用：做计算
    	return list.value.filter(item => item > 2)
    })
    //当数据产生变动会重新计算
</script>

监听函数

<script setup>
    //第一个参数为监听的变量，第二个参数为变化前后的值，第三个参数为附加选项
    watch(list, (newVal, oldVal) => {
        pass
	}, [
        immediate: true,           //是否立即执行一次
        deep: true,				   //开启深度监听(默认不监听对象内容变化)
    ])
    //deep有性能损耗，尽量不开启.
    //只监听对象中的一个值时，将监听对象通过函数的形式传入
    const data = ref({name : "name", age : 10})
    watch(
        () => data.value.age, 
        () =>{console.log('age变化了')
  	})
</script>

延时函数

<script setup>
    // 过3s后执行该函数
    setTimeout(() => {

      }, 3000);
</script>

父子通信

父传子

<!-- 父组件 -->
<script setup>
import { ref } from 'vue';
import son from './son.vue';
const data = ref(199)
setTimeout(() => {
  data.value = 100
}, 3000);

</script>

<template>
  <div>这里是父组件</div>
<!-- 传递动态数据时前面需要增加冒号 -->
  <son :data = "data" message = "这是父组件传递的信息"/>

</template>

<!-- 子组件 -->
<script setup> 
const test = 'test'
const message = defineProps({
    message : String,
    data : String
})
console.log(message.message)

//使父组件能够访问和修改子组件变量和方法
defineExpose({
    test
})
</script>

<template>
    <div>这里是子组件:{{ message.message }}, {{ data }}</div>
</template>

子传父

<!-- 子组件通过defineEmits定义需要传给父组件的key，通过调用该对象并传入要传送的key和value -->
<!-- 父组件通过@key接受参数并将其赋值给指定函数的形参 -->
<!-- 父组件 -->
<script setup>
import son from './son.vue';
const message = (msg) => {
    console.log(msg)
}
</script>

<template>
  <div>这里是父组件</div>
  <son @get-message="message"/>

</template>

<!-- 子组件 -->
<script setup> 
const emit = defineEmits(['get-message'])
const sent = () => {
    emit("get-message", "this is message")
}
</script>

<template>
    <div @click="sent">点击触发父传子</div>
</template>

模板引用

<script setup>
import { onMounted } from 'vue';
const r = ref(null)
onMounted(() => {
  console.log(r)
})
</script>

<template>
  <div ref="r">我是dem1</div>
</template>

跨层组件通信

<!-- 父组件 -->
<script setup>
import { provide, ref } from 'vue';
import son from './son.vue';
const data2 = ref(10)
//传递基本数值
provide('data', 'this is data')
//传递动态数值
provide('data2', data2)

// 传递方法
const setCount = () => {
  data2.value ++
}
provide('data3', setCount)
</script>

<template>
  <div>父组件</div>
  <son/>
</template>

<!-- 子组件 -->
<script setup>
import { inject } from 'vue';

const data = inject('data')
const data2 = inject('data2')
setTimeout(() => {
    data2.value ++
}, 3000)

const setCount = inject('data3')
</script>

<template>
    <div>顶层组件为:{{ data }} + {{ data2 }}</div>
    <div @click="setCount">点击修改</div>
</template>

路由

import { createRouter, createWebHashHistory } from "vue-router";

//创建路由实例
const router = createRouter({
    /**
     * 设置路由模式
     * history模式：createWebHistory()
     * hash模式：createWebHashHistory()
     */
    history: createWebHashHistory(import.meta.env.BASE_URL), //在vite.config.ts配置base_url信息
    routes: []
})

export default router

//vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  base: 'base_url',                     //这里配置base_url
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

仓库

import { defineStore } from "pinia";
import type { User } from '@/types/user'
import { ref } from "vue";

export const useUserStore = defineStore('cp-user', () => {
    const user = ref<User>()

    const setUser = (u: User) => {
        user.value = u
    }
    const delUser = (u: User) => {
        user.value = undefined
    }

    return { user, setUser, delUser }

})

持久化

1. 安装插件：pnpm i pinia-plugin-persistedstate

2. 在main.ts中注册

   import presist from 'pinia-plugin-persistedstate'
   const app = createApp(App)
   app.use(createPinia().use(presist))
   app.mount('#app')

3. 开启持久化

   import { defineStore } from "pinia";
   import type { User } from '@/types/user'
   import { ref } from "vue";
   
   export const useUserStore = defineStore('cp-user', () => {
       const user = ref<User>()
   
       const setUser = (u: User) => {
           user.value = u
       }
       const delUser = (u: User) => {
           user.value = undefined
       }
   
       return { user, setUser, delUser }
   
   },{
       persist: true             //开启本地持久化
   })

   axios配置

   import { useUserStore } from "@/stores/main"
   import axios from "axios"
   import { showToast } from "vant"
   
   const instance = axios.create({
       baseURL: 'https://www.baidu.com',                 //配置基准地址
       timeout: 10000                                    //设置超时时间
   })
   
   instance.interceptors.request.use(
       (config) => {
           const store = useUserStore()
           if (store.user?.token && config.headers){
               config.headers.Authorization = `Bearer ${store.user.token}`
           }
           return config
       },
       (err) => Promise.reject(err)
   )
   
   instance.interceptors.response.use(
       (res) => {
           if (res.data.code != 10000){
               showToast(res.data.message || '业务失败')
               return Promise.reject(res.data)
           }
           return res.data
       },
       (err) => {
           return Promise.reject(err)
       }
   )
   
   
   const login = () => {
     axios.request({
       url: 'login',
       method: 'post',
       data: {
         username: 'username',
         password: '121121'
       }
     })
     .then(() => {
       console.log("成功")
     }).catch((err) => {
       console.log('失败', err)
     })
   }

组件自动注册

1. 安装unplugin-vue-components

   pnpm add unplugin-vue-components -d

2. 配置vite.config.js

   import { fileURLToPath, URL } from 'node:url'
   
   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import vueDevTools from 'vite-plugin-vue-devtools'
   
   // 配置组件自动注册的插件
   // 配置vant UI 组件库的解析器
   import Components from 'unplugin-vue-components/vite'
   import { VantResolver } from 'unplugin-vue-components/resolvers'
   
   
   
   // https://vite.dev/config/
   export default defineConfig({
     plugins: [
       vue(),
       vueDevTools(),
       Components({
         dts: false,                                         //关闭组件类型声明
         resolvers: [VantResolver({ importStyle: false })]   //配置不注册样式，因为在main导入了
       })
     ],
     resolve: {
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url))
       },
     },
   })