小奏

【Router 4】 使用Vue3 安装对应的router4版本 使用Vue2安装对应的router3版本 1npm install vue-router@4 路由配置 与之前版本区别： 由 createRouter() 替换 new Router() 路由模式由 createWebHistory() 替换 mode: 'history' main.js中由 .use(router) 替换 new Vue({ router }) 以前版本写法： 1234567891011121314151617181920212223242526// router/index.jsimport Vue from 'vue';import Router from 'vue-router';import routes from './routes'Vue.use(Router);const router = new Router({ // 区别1 mode: 'history', // 区 ...

【Pinia】 pinia是什么？ 前言 Vue3已经推出很长时间了，它周边的生态也是越来越完善了。之前我们使用Vue2的时候，Vuex可以说是必备的，它作为一个状态管理工具，给我们带来了极大的方便。Vue3推出后，虽然相对于Vue2很多东西都变了，但是核心的东西还是没有变的，比如说状态管理、路由等等。再Vue3种，尤大神推荐我们使用pinia来实现状态管理，他也说pinia就是Vuex的新版本。 那么pinia究竟是何方神圣，本篇文章带大家一起学透它！ 如果你学过Vue2，那么你一定使用过Vuex。我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，简单来说就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。 既然Vuex那么重要，那么在Vue3中岂能丢弃！ 在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理，我们来看看官网如何解释pinia的。 官网解释： Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 从上面官网的解释不难看出，pinia和Vuex ...

【TS类型声明 keepAlive】 Ts 类型声明使用 & 讲解 该文章未归纳完，那么多API肯定也说不完。。不过也涵盖了主要的组合式 API 的 TS类型。 核心：大部分都是运用API函数泛型来定义类型。 父组件相关的 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100<template> <el-button @click="onsub">测试</el-button> <input type="text" @change="handleChange" /> <child ref='childRef' : ...

【script setup 总结】 因为学习的时候，视频版本并没有一些新的语法糖，笔记是没有使用这些语法糖的，但是用法都会以补充的形式加进来。 在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用构建工具来简化该操作。当使用单文件组件（SFC）时，我们可以使用 <script setup> 来大幅度地简化代码。 <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的<script>语法，它具有更多优势： 更少的样板内容，更简洁的代码。 能够使用纯 Typescript 声明 props 和自定义事件。 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。 基本语法 要启用该语法，需要在 <script> 代码块上添加 setup attribute： 123<script ...

【其它组合式API】 ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRef refs api中的重点为：ref、toRefs、shallowRef、customRef，其次是 isRef 等。 toRef 与 toRefs toRef 作用：可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。 语法 (源对象 , 源对象属性)````const name = toRef(person,‘name’)``` 应用: 源响应式对象(toRef的第一个参数) 上的某个 property 新创建一个 ref toRef示例 1234567891011121314const state = reactive({ foo: 1, bar: 2})const fooRef = toRef(state, 'foo')// 更改该 ref 会更新源属性fooRef.value++cons ...

【Teleport CSS功能】 内置组件 Teleport 什么是Teleport？——<Teleport> 是一个内置组件，它是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。 主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响 teleport 是内置组件，可以直接在模板中使用，无需注册。 可以被打包工具 tree-shake。所以它们只会在被使用的时候被引入。 需要直接主动访问(获取)它们的场景，也可以将它们显性导入。 基本用法 有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。 这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会 ...

【异步组件 组合式函数(hooks)】 异步组件 为什么要有异步组件 首先来看这样一段代码 父组件App.vue 12345678910111213141516<template> <div class="app"> <h3>我是App组件</h3> <Child></Child> </div></template><script>export default { name: 'App',};</script><script setup>import Child from './components/Child.vue';</script> 子组件Child.vue 12345678910111213141516<template> <div class="child"> <h3>我是 ...

【Attributes继承 provide与inject】 继承 Attributes Attributes 继承 Attributes 继承的基本概念 “透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。举例来说，假如我们有一个 <MyButton> 的子组件，它的模板长这样： 12<!-- <MyButton> 的模板 --><button>click me</button> 一个父组件使用了这个组件，并且传入了 class： 1<MyButton class="large" /> 最后渲染出的 DOM 结果是： 1<button class="large">click me</button> 这里，<My ...

【Props 组件事件】 Props Props 声明# Props 是一种特别的 attributes，你可以在组件上声明注册。要传递给子组件内容，我们必须在组件的 props 列表上声明它。 12345678<!-- BlogPost.vue --><script setup>defineProps(['title'])</script><template> <h4>{{ title }}</h4></template> defineProps 是一个仅 <script setup> 中可用的编译宏命令，并不需要显式地导入。声明的 props 会自动暴露给模板。defineProps 会返回一个对象，其中包含了可以传递给组件的所有 props： 12const props = defineProps(['title'])console.log(props.title) TypeScript 用户请参考：为组 ...

【动态组件 组件注册】 动态组件 基本使用 composition api写法：只适用于vue3 在 <script setup> 中，组件被引用为变量而不是作为 字符串键 来注册 核心点 shallowRef() 虽然用 ref() 也能正常使用，但官方不推荐，会爆warn: “这可能会导致不必要的性能开销” （原因，组件不是动态数据，不需要转为proxy） :is 与 component > 设置动态组件的必要条件 :is 对应绑定的为字符串值即可，值对应引入的组件名 props 数据父传子 shallowRef > 声明 :is 绑定的值，值为 import 的组件名 1234567891011121314151617181920212223<template> <component :is='dynamic' :datas='{data1,data2}'></component> <button @click='change ...