qq_37635012的博客

在vue3.0之前可使用，例如(复写样式前加/deep/)，vue3.0及后使用就会报错。

在项目component文件夹下新建index.ts,composition模式。

如果要添加外部属性, 添加来自其他库的类的实例, 添加其他非响应式的数据, 我们应该使用 markRaw 包装一下再传递给 pinia.

大多数时间, getter 都仅仅依赖于 state, 但是有时候也会依赖其他 getter. 所以呢, 如果 getter 定义为非箭头函数就可以通过 this 拿到整个 store 实例, 但是由于 TS 又必须为函数返回值定义类型. 但是这并不影响将 getters 定义为箭头或者, 也不影响不使用 this 的 getters。getters 可以通过返回一个函数 A 来接收参数, 这个 A 的返回值也就是 getter 的值.直接在 getter 内部使用即可。直接通过 store 实例对象。

state 就是我们要定义的数据, 如果定义 store 时传入的第二个参数是对象, 那么 state 需要是一个函数, 这个函数的返回值才是状态的初始值.这样设计的原因是为了让 Pinia 在客户端和服务端都可以工作。我们可以通过 store 的 $subscribe 方法侦听 state 的改变. 使用 $subscribe 而不是 watch() 的好处是 $subscribe 总是在 state 修改之后执行一次.官方推荐使用箭头函数(()=>{ })获得更好的类型推断。

1.通过 defineStore 函数定义 store.defineStore 接收两个参数id: 唯一的标识, string 类型. Pinia 使用 id 与开发者工具建立联系.第二个参数可以是一个函数, 也可以是一个对象.defineStore 返回一个函数, 一般约定将返回值命名为 use…2.第二个参数: 对象类型如果要传入对象类型作为第二个参数, 在对象中可以配置state: 状态, 即数据. 📕注意 state 是一个函数, 函数的返回值才是真正定义的数据。

Pinia安装与快速上手(Vue3@3.2.37+Vite@1.0.0)创建 src/store/index.ts。在 main.ts 中引入和使用。

安装命令 npm install vue-router@4。在id后面添加括号,正则校验参数值为数字,输错跳404。src\router\index.ts下。id后面加个*号,传或不传都可以。

当 TS 不确定一个联合类型的变量到底是哪个类型的时候,可以定义多种类型，例如，一个变量既支持 number 类型，又支持 string 类型.对象的属性是可以有修饰符的，目前有两种修饰符，分别是 readonly 关键字对应的可选属性 和?联合类型 | 是指可以取几种类型中的任意一种，而交叉类型 & 是指把几种类型合并起来。类型是有父子关系的，子类型的值可以赋值给父类型，但是父类型的值是不能够赋值给子类型的.然后我们在每个属性前面加上了 readonly 这样所有的属性都是只读的了。

常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员，假如包含了计算成员，则会在编译阶段报错.

【代码】TS里可选参数必须要放在函数入参的最后面，不然会导致编译错误。

既然defineModel是声明了一个prop，那同样也可以定义prop的type、default。除了支持type和default，也支持required和validator，用法和定义prop时一样。defineModel也支持自定义修饰符，比如我们要实现一个将输入框的字母全部变成大写的uppercase自定义修饰符，同时也需要使用内置的trim修饰符。<template>// get我们这里不需要},});</script>

该API是在 < script setup> 里使用的。它还返回 slots 对象，该对象等同于在 setup 上下文中暴露或由 useSlots() 返回的 slots 对象。通过这个宏，可以指定组件中的插槽名称和对应的数据，这样在使用组件时，可以通过具名插槽的方式传递内容。defineSlots() （声明了slot的子组件才使用该api）虽然这个宏函数在 Vue 3 中并不是必须的，因为它主要是为了向后兼容，但它可以用来声明组件的 data、methods、computed 等选项。

备注：顶层组件给底层组件提供的是数据时，底层组件只是渲染值；如果底层组件想要改传递的该值，需要顶层组件重新提供更改改数据的方法，底层组件获取到该方法后调用就能更改顶层组件传的值了。默认情况下在< script setup >语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法允许访问。通过 ref标识 获取真实的 dom对象或者组件实例对象。传递方法：点击按钮，数字修改表示顶层组件的值已经修改。:底层组件通过inject函数获取数据。

【代码】JS实现双向数据绑定的三种方式。

Vue3里computed使用，Vue3里watch使用

Vue3生命周期及当Vue3与Vue2生命周期混用时的执行顺序

vue3父子组件通信，vue3里props使用，vue3里emit使用

vue3里toRefs

vue3项目创建、vue3项目搭建流程、vue3里ref使用、vue3里reactive使用。