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>