头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。

我们知道vue-router使用push跳转可以通过浏览器的返回箭头，就能回到上一页，是因为它有路由栈，每次跳转都会存放（记录）当前路由的相关信息。根据这个思路我们利用pinia+vue-router 来自定义路由栈。

图片懒加载（Lazy Loading）是一种延迟加载图片的技术，它只有在图片即将进入浏览器可视区域时才加载图片，从而减少页面初始加载时间和提高页面加载性能。

一、Vue3.0 里定义的变量、属性和方法必须 return 出来，中才能使用；这样会导致在页面上变量会出现很多次。vue3.2只需在script标签中添加setup，就可以帮助我们解决这个问题,无需再写return了。二、不用写export default 、setup函数三、组件只需import引入不用写components{}注册四、不可以直接写name: 'xxx', 但默认name 是 组件名，如Home.vue name 就是Home。

pinia 是状态管理工具，但是它与传统的状态管理工具（如 Vuex）不同，它采用了官方推荐的官方状态管理工具 ，它可以与Vuex共存。

vuex4.x版本中取消了一些辅助函数，包括mapActions、mapGetters、mapState和mapMutations。这些辅助函数被迁移到了官方的插件vuex-extension中，可以在npm上搜索并安装相应的插件：安装vuex-extension。

在使用嵌套路由时，建议将路由按照功能模块进行分层，每一层代表一个主要的功能块，每个层级下的路由数量不要过多，一般建议不要超过 10 个，层级也不要超过 5 层。

vue-router 是 vue的一个插件库1. 专门用来实现一个SPA单页面应用2 .基于vue的项目基本都会用到此库

使用Vue3的组合API封装的可复用的功能函数· 自定义hook的作用类似于vue2中的mixin技术· 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂

.emit('事件名', 参数)触发总线上指定的事件.on('事件名','回调函数')接收总线上某个事件.off('事件名')清除总线上指定事件.all.clear()清除总线上绑定的所有事件

· provide和inject提供依赖注入，功能类似 vue2.x 的provide/inject· 实现跨层级组件(祖孙)间通信

`props`的参数：type: 数据类型default： 默认值required： 是否必传, true必传，false 非必传

动态组件component：is属性来指定要渲染的组件(填写组件名）多个子组件通过component标签挂载在同一个父组件中， 可以修改is属性进行动态切换组件。可以搭配使用。

Fragment、Teleport、Suspense新组件

· isRef: 检查一个值是否为一个 ref 对象· isReactive: 检查一个对象是否是由 reactive 创建的响应式代理· isReadonly: 检查一个对象是否是由 readonly 创建的只读代理· isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

customRef· 创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制

toRef为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的

· toRaw返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发界面更新。· markRaw标记一个对象，使其永远不会转换为代理。返回对象本身应用场景:有些值不应被设置为响应式的，例如复杂的第三方类实例或 Vue 组件对象。当渲染具有不可变数据源的大列表时，跳过代理转换可以提高性能。

shallowReactive: 只处理了对象内最外层属性的响应式(也就是浅响应式)shallowRef: 只处理了value的响应式, 不进行对象的reactive处理

· readonly:深度只读数据获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。只读代理是深层的：访问的任何嵌套 property 也是只读的。· shallowReadonly浅只读数据创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换

在Vue3中，我们发现this是undefined，那我们真的没法使用this了吗？vu3给我们提供了一个getCurrentInstance函数： 用于获取当前组件实例。身上有个ctx属性有点类似this,通过代码可以看到如何使用。

1. 当一个组件有不确定的结构时, 就需要使用slot技术了2. 注意: 插槽内容是在父组件中编译后, 再传递给子组件3. 如果决定结构的数据在父组件, 那用默认slot或具名slot

vue中给我们提供了自定义指令，顾名思义允许我们自己去定义一个指令v-xxx。指令分两种：1.全局指令 （全局指令就是在所有vue文件中都可以使用）2.局部指令 （局部指令就是仅限在当前vue文件中使用）

watch监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次通过配置deep为true, 来指定深度监视watchEffect函数：不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据 默认初始时就会执行第一次, 从而可以收集需要监视的数据 监视数据发生变化时回调

1. 在computed中定义计算属性方法根据已有的数据进行计算返回一个要显示的新数据2. 在页面中使用{{计算属性名}}来显示返回的数据3. computed: 内部有缓存, 多处读取只计算一次4. 计算属性默认相当于只有getter来根据已有数据计算返回一个新数据值, 也可以指定setter来监视我们主动修改当前计算属性值

v-model 是 Vue 中一个常用的指令，用于实现表单元素与数据的双向绑定。 它的实现原理主要基于以下两个方面：语法实现：v-model 实际上是 Vue 对 :value 和 @input 两个属性的语法糖。当我们在组件中使用 v-model 指令时，Vue 会根据元素类型自动为该元素绑定 value 属性和 input 事件。值的传递与更新：v-model 绑定的值会随着用户在表单元素上的操作而同步更新。当用户修改绑定的表单元素时，会触发相应的事件（如 input 事件），Vue 会根据事

v-on 是 Vue中用于绑定事件的指令。它可以绑定许多不同的事件

v-bind 指令用于将一个表达式的值动态地绑定到目标元素的属性上。通过 v-bind，我们可以实现将 Vue 实例的数据或表达式的值绑定到 HTML 属性的功能。

1. 在应用界面中, 某个(些)元素的样式是变化的class/style绑定就是专门用来实现动态样式效果的技术

当在同一个标签上同时使用 v-for 和 v-if 时，可能会导致意外的结果或错误。这是因为Vue的编译规则中，v-for 比 v-if 优先级更高，意味着 v-for 会先执行，然后 v-if 根据条件进行渲染或移除子元素。

v-if: 通过删除DOM对象来隐藏劣势: 重新显示时需要重新创建, 需要时间, 慢些,优势: 隐藏时不占用着内存空间v-show: 通过css样式display: none;来隐藏优势: 重新显示时不需要, dom对象还在, 快些,劣势: 隐藏时还占用着内存空间如果是频繁切换, 一般用v-show相对更好些，两种方式都是在页面上视觉效果隐藏且不影响其它元素布局位置。

v-for遍历产生列表时, 每个项标签都需要有一个唯一的key值，如果数组元素有自己的标识数据, 用它作为key值, 否则才选择下标作为key。v-for 可以遍历数组 也可以 遍历对象。

v-text : 当作纯文本，更新元素的 textContent/innerTextv-html : 将value作为html标签来解析， 更新元素的 innerHTML

利用ref函数获取组件中的标签元素，可以操作该标签身上的属性，还可以通过ref来取到子组件的数据，可以修改子组件的数据、调用子组件的方法等、非常方便

对比vue2和vue3的生命周期，其实大部分都是相同的含义，只是命名不同，使用方式不同。vue3增加的生命周期几个钩子也非常方便使用。

{{}}表达式会返回一个数据值, 肯定没有分号,它不是完整的js的解析指令, 需要与其它语法组成一条完整的语句。

可以看到加了toRefs解构出来的变量 ++会改变原数据的值， 而直接解构出来的值相当于你重新声明的一个变量 ++改变的是新变量的值。

创建一个包含响应式数据的引用(reference)对象js中操作数据: xxx.value(html)模板中操作数据: 不需要.value

作用: 定义多个数据的响应式·const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象·响应式转换是“深层的”：会影响对象内部所有嵌套的属性·内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

setup·新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次·函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用