qq_48937489的博客

（这里以user.d.ts为例）；代码展示：export type User = {// 头像// 脱敏手机号 - 带星号的手机号// 用户名id: string;// 用户id。

【代码】前端开发小技巧【Vue篇】 - 样式穿透 + 绑定变量。

【代码】Vue3全家桶 - VueRouter - 【6】导航守卫。

一、声明式 与 编程式导航1.1 导航到不同的位置声明式编程式描述<router-link to="..."></router-link>【选项式API】：this.$router.push(...)【组合式API】： useRouter().push(...)会向 history栈（浏览器的路由栈） 中添加一个新的记录，所以，当用户点击浏览器回退按钮时，会回到之前的 URL❗提示：编程式的 router.push(...) 的语法：其参

/ NOTE 获取的跳转的路由对象。

嵌套路由【children】如果在路由视图中展示的组件包含自己的路由占位符（路由出口），则此处会用到嵌套路由；如图所示：点击关于链接，则会展示About组件，在其组件中又包含了路由链接和路由占位符；路由嵌套规则：某一个路由规则中采用 children 来声明嵌套路由的规则；嵌套路由规则中的 path 不能以 / 开头，访问需要使用过 /fatherPath/sonPath 的形式；示例展示：路由模块 - router/index.js：import { createRouter,

【代码】Vue3全家桶 - VueRouter - 【2】重定向路由。

VueRouterVue-Router官网；vue-router 是 vue.js 官方给出的路由解决方案，能够轻松的管理 SPA 项目中组件的切换；安装：yarn add vue-router@4；快速使用1.1 创建路由模块在项目中的 src 文件夹中创建一个 router 文件夹，在其中创建 index.js 模块；采用 createRouter() 创建路由，并暴露出去；在 main.js 文件中初始化路由模块 app.use(router)示例代码：router/ind

Piniapinia 是 Vue 的专属状态管理库，它允许你跨组件或跨页面共享状态；一、 安装与使用 pinia安装语法：yarn add pinianpm install pinia创建一个 pinia （根存储）并将其传递给应用程序：目标文件：main.js：import { createApp } from 'vue'import App from './App.vue'// 导入 createPinia 函数import { createPinia } from 'p

refref。

钩子函数调用时机可以访问不能访问组件视图渲染之前数据源、函数、计算属性、侦听器、props等等组件中的DOM元素onMounted组件视图渲染之后数据源、函数、计算属性、侦听器、propsDOM元素等等数据发生变化，视图重新渲染之前数据源、函数、计算属性、侦听器、props、视图重新渲染之前的DOM元素等等视图重新渲染之后的DOM元素onUpdated数据源发生变化，视图重新渲染之后数据源、函数、计算属性、侦听器、props、视图重新渲染之后的DOM元素等等视图重新渲染之前的DOM元素。

组件一、 注册组件1.1 ❌ 全局注册目标文件：main.js；语法：import { createApp } from 'vue'import App from './App.vue'const app = createApp(App)// 全局注册app.component('组件名字', 需要注册组件)app.mount('#app')缺陷：全局注册，但并没有被使用的组件无法生产打包时被自动移除（也叫tree-shaking）。如果，你全局注册了一个组件，即使它并没有

一、计算属性1.1 计算属性与方法的区别：两种方式在结果上确实是完全相同的，不同之处在于 计算属性值会基于其响应式依赖被缓存；一个计算属性仅会在其响应式依赖更新时才重新计算，这意味着只要所依赖的数据源不改变，无论多少次访问计算属性都会立即返回先前的计算结果，而不用重复执行getter函数；方法调用总是会在重新渲染发生时再次执行函数；1.2 组合式API计算属性 - 语法：简易写法：（getter）：只是使用计算属性的值不对其进行修改；import { computed } fr

：需要侦听的数据源，可以是 （包括计算属性）、一个响应式对象、一个getter函数(获取对象属性的函数)、或多个数据源组成的数组；🔺 注意：第一个参数如果是 声明的，不需要添加 ，会自动读取；和选项式API的区别：选项式API此处是个字符串；组合式API此处是个变量 / 数组 / 函数（要侦听的数据源）；：回调函数；侦听单个数据源：第一个参数 为 新值；第二个参数 为 旧值；侦听多个数据源组成的数组：第一个参数数组 是 新值；第二个参数数组

/ NOTE 在使用 setup 语法糖的 单文件 里面导入组件的时候，无需注册，直接使用即可。// NOTE 接受父组件传递的数据 - 接收数据有两种形式（数组 + 对象）// （数组最前面）添加。// TODO 导入组件。

reactive().valuerefreactive// 引入 ref 函数，来声明响应式对象importfrom'vue'// 使用 ref 函数来声明原始类型的数据源，具备响应式letref'Abc'// 更改账号，控制台查看最新值function// 通过 ref 函数声明的响应式数据，需要使用 .value 来获取数据的值+='='log// 使用 ref 函数来声明对象类型的数据源：具备响应式letrefsalary7000name'Jack'// 更改员工薪资，控制台查看最新值。

MVVM指的是ModelView和ViewModelModel：页面渲染 用到的数据源；View：页面 所渲染 的DOM结构；ViewModel：表示Vue实例；当数据源发生变化时，会被 VM 监听到，VM会根据最新的数据源自动更新页面的结构；当表单元素的值发生变化时，也会被VM监听到，VM会把变化后最新的值自动同步到Model数据源中。

我目前还是在用 JavaScripr开发项目，后面会学习 TypeScript ，也会专门写一篇《从 0~1 创建Vue3 + TS 项目》