Vue3（2）网站首页 技术杂谈

Vue3（2）

ZzXxYy_99 2026-07-07 00:01:05

简介Vue3（2）

一、新特性

1、defineOptions

（1）背景说明：有<script setup>之前，如果要定义props，emits可以轻而易举地添加一个与setup平级的属性。但是用了<script setup>后，就无法这么做setup属性已经没有了，自然无法添加与其平级的属性

（2）所以在vue3.3中新引入了defineOptions宏。顾名思义，主要是用来定义Options API的选项。可以用defineOptions定义任意的选项，props，emits，expose，slots除外

2、defineModel

在Vue3中，自定义组件上使用v-model，相对于传递一个modelValue属性，同时触发 update：modelValue事件

<Child v-model="isVisible">
//相对于
<Child :modelValue="isVisible" @update:modelValue="isVisible=$event">

我们需要先定义props，再定义emits。其中有许多重复的代码。如果需要修改此值，还需要手动调用emit函数

二、pinia

Pinia是Vue的最新状态管理工具，是Vuex的替代品

提供更加简单的API（去掉了mutation）
提供符合，组合式风格的API（和Vue3新语法统一）
去掉了modules的概念，每一个store都是一个独立的模块
配合TypeScript更加友好，提供可靠的类型推断

三、手动添加Pinia到Vue项目

在实际开发项目的时候，关于Pinia的配置，可以在项目创建时自动添加

步骤：

使用Vite创建一个空的Vue3项目 npm create vue@latest
按照官方文档安装pinia到项目中

四、Pinia基本语法

1、定义store

Store是用defineStore定义的，它的第一个参数要求是一个独一无二的名字

import(defineStore)from'pinia'
//你可以对'defineStore()'的返回值进行任意命名，但最好使用store的名字，同时以'use'
//第一个参数是你的应用中'Store'的唯一ID
export const useAlertsStore = defineStore('alerts',(
//其他配置...
))

这个名字，也被用作Id,是必须传入的，Pinia将它用来连接store和devtools。为了养成习惯性的用法，将返回的函数名命名为use...是一个符合组合式函数风格的约定。

defineStore() 的第二个参数可接受两类值：Setup函数或Option对象。

2、Option Store

与Vue的选项式API类似，我们也可以传入一个带有state、actions与getters属性的Option对象

export const useCounterStore = defineStore('counter',{
  state: ()=>({count:0}),
  getters:{
    double:(state)=>state.count*2,
},
  actions:{
    increment(){
      this.count++
    },
  },
})

3、Setup Store

也存在另一种定义store的可用语法。与Vue组合式API的setup函数相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。

export const useCountStore = defineStore('counter',()=>{
  const count = ref(0)
  function increment(){
    count.value++
}

return{count,increment}
})

在Setup Store中：