vue3开发过程记录

[lilunze]

初始化项目npm init vue@latest cd vue-project npm install npm run dev

[lilunze]

响应式：

<script setup>
import { reactive, ref } from "vue";
const name = ref('Tom')

// reactive 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型)，解构时会丢失响应式
const data = reactive({
    age: 18,
    sexy: 'man'
})
</script>

<template> 
    <div>{{ name }}</div>
    <div>{{ data.age }}</div>
</template>

[lilunze]

计算属性：

<script setup>
import { computed, ref } from "vue";

const firstName = ref('')
const lastName = ref('')
const getFullName = computed(() => {
  return firstName.value + ' ' + lastName.value
})

</script>

<template>
  <div>
    <input type="text" v-model="firstName" />
    <input type="text" v-model="lastName" />
    <div>{{ getFullName }}</div>
  </div>
</template>

计算属性会自动追踪响应式依赖，当fistName和lastName发生变化时，会自动更新计算结果，并且会基于当前依赖值缓存计算结果，这是计算属性与调用函数返回值的区别，函数会在每次视图刷新时都会调用

[lilunze]

侦听器Watch：

<script setup>
import { ref, watch } from "vue";
const firstName = ref('')
const lastName = ref('')
const fullName = ref('')
watch([firstName, lastName], () => {
  fullName.value = firstName.value + '' + lastName.value
})
</script>
<template>
  <div>
    <input type="text" v-model="firstName" />
    <input type="text" v-model="lastName" />
    <div>{{ fullName }}</div>
  </div>
</template>

or

watchEffect(() => {
  fullName.value = firstName.value + '' + lastName.value
})

watch只监听明确指定的响应式数据源，watchEffect会自动追踪所有依赖的响应式数据源

[lilunze]

生命周期：

import { onMounted, onUpdated } from 'vue';

onMounted(() => {
    console.log('component mounted')
})

[lilunze]

组件传值：

1. 父传子（props）

     // parent.vue
     <script setup>
       import Child from './child.vue'
     </script>
     <template>
       <Child msg="父组件传递给子组件的值" />
     </template>

      // child.vue
     <script setup>
       const props = defineProps(['msg'])
     </script>
     <template>
       <div>{{ props.msg }}</div>
     </template>

2. 子传父（event emit）

     // parent.vue
     <script setup>
        import Child from './child.vue';
        import { ref } from 'vue'
        const msg = ref('测试')
        const change = (name) => {
          msg.value = `hello ${name}`
        }
     </script>
     <template>
         <Child :msg="msg" @change="change"/>
     </template>

     // child.vue
     <script setup>
       const props = defineProps(['msg'])
       const emit = defineEmits(['change'])
       const change = () => {
         emit('change', 'Tom')
       }
     </script>
     <template>
       <button @click="change">hello</button>
       <div>{{ props.msg }}</div>
     </template>

3. 兄弟组件和子孙组件（eventBus、依赖注入） 4.1 vue3-eventbus 4.2 mitt 4.3 provide/inject

     // parent.vue
     import { ref, provide } from 'vue'
     const msg= ref('hello, Tom')
     provide('msg', msg)

     // child.vue
     <script setup>
       import { inject } from 'vue'
       const msg= inject('msg')
     </script>

[lilunze]

路由:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'home',
    component: import('../views/home.vue')
  },
  ...
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(router)

app.mount('#app')

[lilunze]

状态管理（pinia）:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

import './assets/main.css'

const app = createApp(App)

const pinia = createPinia()
app.use(pinia)

app.use(router)

app.mount('#app')

// store/index.js
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useCountStroe = defineStore('counter', () => {
    const count = ref(0);

    function _increament() {
        count.value++
    }

    function _decreament() {
        count.value--
    }

    return { count, _increament, _decreament }
})

<script setup>
import { useCountStroe } from '../store/index';
import { storeToRefs } from 'pinia';

const counterStore = useCountStroe();
const { count } = storeToRefs(counterStore);
const { _increament, _decreament } = counterStore;

</script>

<template>
  <div class="about">
    <div>{{ count }}</div>
    <button @click="_increament">增加</button>
    <button @click="_decreament">减少</button>
  </div>
</template>

pinia数据持久化插件pinia-plugin-persistedstate

[lilunze]

服务端渲染ssr

[lilunze]

ts

[lilunze]

vueUse

[lilunze]

element-plus