轻松学习 Vue3

vue app 应用创建方式

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'
const app = createApp(App)

vue3 可以同时创建多个 app，并且每个 app 都可以绑定不同的 router，store,每个应用都拥有自己的用于配置和全局资源的作用域，这对于复杂的应用提供了更多样化的解决方案

const app2 = createApp(App2)
const app3 = createApp(App3)

app.mount() 接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串，该方法应该始终在整个应用配置和资源注册完成后被调用，调用之后应用实例才会渲染出来，注意应用根组件的内容将会被渲染在容器元素里面，容器元素自己将不会被视为应用的一部分。所以容器元素本身是不会被修改

<div id="app"></div>

app.mount('#app')

vue-router 的创建方法

import { createRouter, createWebHistory }  from  'vue-router'
// 路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
// 创建路由
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})
export default router

挂载路由

import router from './router'
// 注册路由
app.use(router)

组合式 Composition Api

• ref()

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态，

Ref 可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，如 Map

Ref 会使它的值具有深层响应性,，即改变嵌套对象或数组时，变化也会被检测到

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})
obj.value.arr[0] = 'bar' // 改变值会更新视图

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回，为什么要返回对象是因为在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的，而对象属性中 通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作，这就能实现 Vue 的响应式系统，当数据变化时，可以通知 View 视图更新

count.value++
console.log(count.value)   //  1

• reactive()

非原始值将通过 reactive()去做代理，与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性，访问时可以直接进行访问，不需要通过.value

const state = reactive({ count: 0 })
console.log(state.count) // 0

reactive() 返回的是一个原始对象的 Proxy，对同一个原始对象调用 reactive() 会总是返回同样的代理对象，而对一个已存在的代理对象调用 reactive() 会返回其本身

const raw = {}
const proxy = reactive(raw)
console.log(raw === proxy)  // false
// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true
// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true

这个规则对嵌套对象也适用。依靠深层响应性，响应式对象内的嵌套对象依然是代理

const proxy = reactive({})
const raw = {}
proxy.nested = raw
console.log(proxy.nested === raw)   //  false

• 额外的 ref 解包细节

作为 reactive 对象的属性: 一个 ref 会在作为响应式对象的属性被访问或修改时自动解包，如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref

const count = ref(0)
const state = reactive({
  count
})
console.log(state.count)  // 0
state.count = 1
console.log(count.value)  // 1

const otherCount = ref(2)
state.count = otherCount
console.log(state.count) // 2
//  原始 ref 现在已经和 state.count 失去联系
console.log(count.value) // 1

在模板渲染上下文中，只有顶级的 ref 属性才会被解包，

const count = ref(0)
const object = { id: ref(1) }

因此，在计算表达式时 object.id 没有被解包，仍然是一个 ref 对象

{{ count + 1 }}   // 1
{{ object.id + 1 }} // [object Object]1

但是，ref 是文本插值的最终计算值 (即 {{ }} 标签)，那么它将被解包，等价于 {{ object.id.value }}

{{ object.id }}  // 1

计算属性 computed

computed 既可以接受一个方法，也可以接受一个对象

import { ref, computed } from 'vue'
const count = ref(0)
const doubleCount = computed(()=>{
      return count * 2
})
// 可以写成 get，set 的方式
const copyCount = computed({
   get(){
       return this.count
   },
  set(val){ 
     count.value = val
  }
})

组件传参 props

在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 来声明

<script setup>
const props = defineProps(['foo'])
</script>

同时在选项式组件，也可以通过 props 选项来声明

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

事件参数 emit

组件可以显式地通过 defineEmits() 宏来声明它要触发的事件，<template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，但 defineEmits() 会返回一个相同作用的函数供我们使用

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

组件 v-model

在 3.4 版本之前

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input v-model="modelValue" />
</template>

在 3.4 版本之后，使用 defineModel() 宏定义

<script setup>
const model = defineModel()
function update() {
  model.value++
}
</script>
<template>
  <input v-model="model" />
</template>

• v-model 的参数

组件上的 v-model 也可以接受一个参数

// 父组件传参
<MyComponent v-model:title="title" v-model:subTitle="subTitle" />
  // 子组件可以接受参数
<script setup>
const title = defineModel('title')
// 可以定义多个 v-model
const subTitle = defineModel('subTitle')
</script>
<template>
  <input type="text" v-model="title" />
  <input type="text" v-model="subTitle" />
</template>

透传 Attributes

“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id，

当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上，同样的规则也适用于 v-on 事件监听器

// 父组件
<MyButton class="large" @click="onClick" />
// 组件
<button class="large" @click="onClick"></button>  

• 深层组件继承

一个组件会在根节点上渲染另一个组件，此时组件接收的透传 attribute 会直接继续传给 <BaseButton>

<BaseButton />

• 禁用 Attributes 继承

vue 3.3 之前

<script>
export default {
   inheritAttrs: false
}
</script>

vue 3.3 之后

<script setup>
defineOptions({
   inheritAttrs: false
})
</script>

最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上

有几点需要注意：

• 和 props 有所不同，透传 attributes 在 JavaScript 中保留了它们原始的大小写，所以像 foo-bar 这样的一个 attribute 需要通过 $attrs['foo-bar'] 来访问。
• 像 @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick

<span>Fallthrough attribute: {{ $attrs }}</span>

• 多根节点的 Attributes 继承

多个根节点的组件没有自动 attribute 透传行为。如果 $attrs 没有被显式绑定，将会抛出一个运行时警告

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>

• 在 JavaScript 中访问透传 Attributes

<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>

export default {
  setup(props, ctx) {
    // 透传 attribute 被暴露为 ctx.attrs
    console.log(ctx.attrs)
  }
}

Provide (提供)

provide() 函数接收两个参数，第一个为注入名，第二个参数是值，如果值是一个 ref 响应式值，则后代组件可以由此和提供者建立响应式的联系

<script setup>
import { provide } from 'vue'
provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

// provide() 是在 setup() 同步调用的
import { provide } from 'vue'
export default {
  setup() {
    provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
  }
}

应用层面提供依赖，该应用内的所有组件中都可以注入

import { createApp } from 'vue'
const app = createApp({})
app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

Inject (注入)

要注入上层组件提供的数据，需使用 inject() 函数

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

<script>
  import { inject } from 'vue'
  export default {
      setup(){
           const message = inject('message')
           return {  message  }
      }
   }
</script>

设置默认值，inject() 函数第二个参数可以设置默认值，我们还可以使用工厂函数来创建默认值，第三个参数表示默认值应该被当作一个工厂函数

<script setup>
import { inject } from 'vue'
const message = inject('message', '这是默认值')
const value = inject('key', () => new ExpensiveClass(), true)
</script>

如果你想确保提供的数据不能被注入方的组件更改，你可以使用 readonly() 来包装提供的值。

<script setup>
import { ref, provide, readonly } from 'vue'
const count = ref(0)
provide('read-only-count', readonly(count))
</script>

异步组件

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>{
    return  import('./components/MyComponent.vue')
})

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})

Pinia 状态管理

pinia 定义了 createPinia 进行注册

import { createPinia } from 'pinia'
// 注册 pinia 
app.use(createPinia())

• store 定义，defineStore 第二个参数可以使用一个对象，将state，getters，actions 定义在对象中

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // 为了完整类型推理，推荐使用箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断出它们的类型
      count: 0
    }
  },
  getters: {},
  actions: {
     increment(){
        this.state.count++
     }
  }
})

使用时则可以通过，mapState, mapActions, mapStores，进行访问，mapStores 则可以拿到一个 counterStore 的对象，里面有 定义的变量及方法

<template>
   <div>
        <button @click="setAppHeight">修改count</button>
   </div>
</template>
import { useCounterStore } from '@/stores/counter.js'
import { mapState, mapActions, mapStores } from 'pinia'

export default {
  computed: {
    ...mapStores(useCounterStore),
    ...mapState(useCounterStore, ['count'])
  },
  methods: {
    ...mapActions(useStore, ['setAppHeight'])
  },
}
</script>

• setup store 定义

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return { count, doubleCount, increment }
})

<template>
  <main>
    <p>{{ counter.count }}</p>
    <p>{{ counter.doubleCount }}</p>
    <p>
      <button @click="counter.increment">+</button>
    </p>
  </main>
</template>
<script setup>
import { ref } from 'vue'
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

setup store 使用 composition Api 进行变量的定义，可以将需要的变量与方法都放在一个响应式对象中，return 出去，使用时就可以直接使用 响应式对象进行状态显示与操作

• state 的定义

在选项式 API 中，在 Pinia 中，state 被定义为一个返回初始状态的函数，这个时候则可以通过调用 $reset 进行对 state 的重置

const  useCounterStore = defineStore('counter', {
    state: ()=>{ 
      return {
         // 所有这些属性都将自动推断出它们的类型
         count: 0,
         name: 'Eduardo',
         isAdmin: true,
         items: [],
         hasChanged: true,
      } 
    }
})

const counter = useCounterStore()
// 通过 store 直接访问
counter.count

在组合式API中，ref() 就是 state 属性

 const useCounterStore = defineStore('counter', ()=>{
    const count = ref(0)
    return { count }
 })
 // 使用
 <script setup>
import { ref } from 'vue'
const counter = useCounterStore()
const { count } = counter
</script>

 

• getters 的定义

选项式 API 中 getters 就是使用函数定义，返回一个依赖于 state 的值

const counter = defineStore('counter',{
  state: ()=>({ count: 0 })
  getters: {
     doubleCount: state=>state.count * 2
  }
})

组合式API中 computed 就是 getters

import { computed } from 'vue' 
const useCounterStore = defineStore('counter', ()=>{
    const count = ref(0)
    const doubleCount = computed(()=>{
        return count * 2
    })
    return { count }
 })
 // 使用
 <script setup>
import { ref } from 'vue'
const counter = useCounterStore()
const { count } = counter
</script>