过客如期的博客

1.pinia和vuex一样是vue的状态管理器，从vue2升级到vue3加入了组合式API的概念后，vue已经主推pinia作为状态管理器2.与Vuex相比，Pinia提供了一个更简单的API，也提供了符合组合式API风格的API，最重要的是，搭配TypeScript一起使用时有非常可靠的类型推断支持1.一个完整的store包含3个配置项stategettersactions（4）同步修改：mutations弃用（5）模块化：modules弃用store1.要定义一个store，需要使用。

②更新对象的某个属性时，当属性被应用到模板上，会执行更新生命周期，没有被引用到模板上，不会执行更新生命周期。）发生了修改，才会触发更新生命周期，对于没有应用到模板上的响应式数据，即使发生修改，也不会触发更新周期。（1）当是基础数据时，只要发生改变，不管是否应用到组件上，都会执行更新生命周期。①替换整个对象（引用地址发生改变），会执行更新生命周期，2.引入的生命周期是一个函数，传入一个函数代表执行函数。组件失活时执行，组件卸载时也会执行。组件激活时执行，第一加载也会执行。：组件创建前和创建后执行，包含了。

1.在vue中我们可以使用component内置组件根据is属性来切换组，keepalive的功能就是在多个组件间动态切换时缓存被移除的组件实例2.keepalive也是vue的一个内置组件。

1.是一个用于渲染动态组件或元素的“元组件”。

返回一个触发器，用于触发事件，第一个参数是具体事件，第二个是传递的值。是一个函数，接受一个数组，元素为自定义事件名。中注册自定义事件，使用时需导入。

没有顶层元素，在引用这个组件时绑定了自定义事件，会出现警告。大致意思就是由于无根节点，无法自动继承。1.需要注意的是，在单文件组件中，如果。模块也是一样，可以不需要顶层元素，

1.在vue2中，我们使用选项api中的props来接受父组件传递来的数据。2.在vue3的setup中，我们使用来定义父组件传递的props。

1.在vue3中provide和inject被归于组合式api，需要显式导入import {

是一个函数，接受一个函数作为参数，返回值是。

是一个函数，接受两个参数，第一个是需要监听的对象，第二个是处理函数。是惰性的，也就是说在第一次加载时，不会执行处理函数。本质上的区别就是 watchEffect。执行函数中，无法获取，上一次的值。其中的一员，使用时需导入。中，主要讨论的是监听。...

1.是的一个选项，是组件复用相同逻辑的一种方式。1.是一个对象，包含所有的，即混入对象可以包含任意组件选项2.选项接受一个数组，数组可以包含多个三，选项同名合并策略1.组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。（1）数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先（2）同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。（3）值为对象的选项，例如 、 和 ，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对1.我们可以

1. 目录是存放静态资源的一种方式。2.项目初始化时默认作为静态资源服务的文件夹。我们可以在中修改。3.该目录中的文件开发期间在 处提供，并在构建期间将文件夹下的文件（不包含本身）复制到 的根目录。4.下的文件会被完整复制到目标目录的根目录下，保持原有文件名，不会被。1.在开发时我们可以使用开头直接访问 目录下的资源2.当项目部署在嵌套的公共路径下，我们需要指定 配置项，由 引入的资源 ， 中的 引用以及 文件中引用的资源在构建过程中都会自动调整，以适配此选项。上面的资源在构建后会变为3.当

一，前言1.Vuex是专门为Vue设计的状态管理库，集中管理所有组件的状态。并与相应的规则保证状态以一种可预测的方式发生变化。2.Vuex解决了多个组件共享状态时，传参方式繁琐，代码维护困难的问题。二，Vuex入口1.Vuex的入口是store，同时store也是Vuex核心概念，像一个容器仓库集中管理了所有组件的state。2.在Vuex4中，我们使用createStore 初始化一个store，createStore接受一个对象作为参数，对象中定义了组件的state和改变state的规则im

一，前言

一，前言1.在vue3的语法糖setup中，组件默认是关闭的，2.defineExpose是用于暴露组件属性的编译宏二，defineExpose使用1.方法import { defineExpose,ref } from 'vue'const a =ref(1)const submit =()=>{}defineExpose({ a, submit,})2.当父组件通过模板 ref 的方式获取到当前组件的实例， ref 会和在普通实例中一样被自动解包...

一，前言1.相对于ref和reactive，shallowRef 和shallowReactive创建的数据是浅响应式的二，shallowRef介绍1.shallowRef可以创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的2.当使用shallowRef为一个基础类型数据创建响应性时，行为是和ref一样的。3.不同的是，当使用shallowRef为复杂类型创建响应性时，修改深层属性，不具备响应性const a = shallowRef({b:1})a.value.b

一，前言1.Vue的核心是使用模板语法，声明式的将data数据渲染进DOM系统。2.模板语法是响应性data数据在dom中的声明的地方。二，操作文本节点的模板语法1.在vue中文本插值使用双大括号语法<p> {{value}} </p>2.在双大括号中，除了可以简单的传值外，还可以使用表达式，每个绑定都只能包含单个表达式。<p> {{value.split().reserve().join()}} </p>3.双括号里的值会被解析成普通文本

一，前言1.当我们有一个应用涉及的组件层数较深时，若涉及到父组件要向其子组件的子组件的子组件… 传递数据时，我们可以使用props或者$attrs,2.然而这两种都不是最适合的，都需要在中间组件中一层一层的往下传递。3.对于这种情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。二，父组件provide1.在vue2中provide使用{ provide:{ mode:"view" }}2.若要在provide

一，前言1.vue插槽slot用于组件内容分发二，定义插槽1.默认插槽：<slot></slot>// 组件<template> <div><slot></slot></div></template>2.具名插槽：<slot name='xxx'></slot>// a组件<template> <div><slot name="cont

一，前言1.ref和reactive是vue3基于组合式api模式下，在setup中用于声明的具有响应式的数据的方法。二，ref1.ref用于声明基础类型响应式数据。import {ref} from 'vue'const age =ref(10) //声明响应式数据2.ref返回的是被包装过的响应式对象，在setup中访问和修改ref需要使用.value属性age.value=213.在模板中使用时无需使用.value，直接使用即可<div>{{age}}</di

一，前言1.setup是vue3新增的生命周期，同时也是vue3组合式api(Composition API )的入口。2.setup的出现解决vue2之前选项配置模式（Option API）导致的逻辑块关注点分离的问题。3.同时同react的hooks一样，可以将重复的逻辑抽取出去实现复用。二，setup生命周期1.在我们使用setup时，一定首先要记住setup是一个生命周期。2.setup是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之前执行。且只执行一次。

一，前言1.Vue Router 是 Vue.js 的官方路由二，安装1.npm install vue-router@4三，vue项目中基础使用搭建1.创建路由对象createRouter：createRouter是路由的入口，第一步我们就要使用createRouter实例化一个路由对象import { createRouter, createWebHashHistory } from "vue-router";export default createRouter { history:

一，前言1.在项目开发时，对于使用的一些组件库，例如element-ui，在有些时候会不符合ui的设计图，这时候我们就要修改一下组件的样式。二，方法1.去除scoped，当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。去除后则没有这种效果，不过这种方法可能会导致全局污染，不推荐。2.>>>:只针对普通的css有效3.:deep() | /deep/:当使用less或sass时:deep(.el-input__inner) {

一，生命周期初次加载：1.setup 创建：组件创建前和创建后执行2.beforeMount 挂载前：组件挂载前执行3.mounted 挂载后：组件挂载后执行更新：1.beforeUpdated 更新前执行2.updated 更新完成后执行卸载：1.beforeUnMount 卸载前执行2.unMounted 卸载后执行异常：1.errorCaptured 异常捕捉二，组件式API生命周期初次加载：1.setup 创建：组件创建前和创建后执行2.onBeforeMou

一，前言1.当组件之间层级不相近时，或者层级涉及的较多的时候，普通的组件数据传递方式就会显得比较无力，例如下面的A组件要和B组件通信。2.vue中提供了事件总线的方式，通过事件的发送和事件的监听可以做到上下平行数据传送。二，事件总线使用1.初始化（1）第一种方式新建一个.js文件导出Vue实例，作为桥梁，可以不需要有任何的配置项。export default const eventBus =new Vue()（2）第二种方式在vue入口文件全局初始化一个事件总线：Vue.prototype

一，前言1.props和$atrrs具有数据的单向性，只能由父组件向子组件传递数据。2.在vue中，我们可以使用自定义事件实现子组件向父组件传递数据。二，自定义事件1.在子组件上使用v-on指令绑定自定义事件，2.事件的名称推荐使用-分割三，$emit触发事件1.在子组件我们可以使用组件的$emit.........

1.在vue中我们可以使用props组件实现父子组件的单向数据传递。2.然而当组件层级较多时，第一层级的组件要向第三层级的组件传递数据时，使用props一级一级传递，明显是不高效，且比较麻烦的。3.vue中的$attrs可以实现组件的跨级数据传送。1.$attrs是 组件实例的一个属性，是 一个对象，包含 所有非props属性的键值对。

一，props作用1.props用于父子组件的通信。2.props具有单向下行绑定，由父组件传递给子组件。且子组件不能修改props。二，子组件props声明1.props是配置对象的一个配置项，可接受数组和对象。（1）数组：['title','content'] 声明该组件接受父组件传递的props。（2）对象：{title:'Number'} 使用对象形式可以对props进行校验。2.几种校验方式（1）类型校验：title:'Boolean' , title:['String','Nu

一，前言1.在vue中当一个数据会跟随着另一个数据变化，可以使用vue的计算属性来实现这种数据依赖。2.我们也可以在模板上使用表达式来处理这种依赖关系，但当逻辑复杂时，模板里的代码就会显得不清晰。二，computed计算属性1.computed接受一个对象，对象的key是定义的计算属性，对象的value是一个函数，返回计算后的属性值。{ data:function(){ return { a:1 }}, computed:{ b:function(){return this

一，前言1.vue有三种创建组件的方式二，全局组件三，局部组件四，单文件组件

一，前言1.vue的一个重要的知识点就是指令，是带有 v- 前缀的特殊 attribute。2.指令 attribute 的值预期是单个 JavaScript 表达式，v-for除外。二，常用指令1.v-bind:为元素属性传递动态参数。2.v-on: 绑定事件3.v-for：列表渲染4.v-if: 条件渲染5.v-show,v-if :控制显隐6.v-modal : 表单元素的双向绑定三，指令缩写1.v-bind 可以缩写为 :2.v-on 可以缩写为@...

一，前言1.由于 JavaScript 的限制，Vue 不能检测某些情况数组和对象的变化。二，对于对象1.vue不能检测对象的键的删除和新增。data:{a:{}}this.a.b=1 //视图不会响应2.只有对象的键在初始化时就声明才是响应式的三，对于数组1.vue不支持检测数组根据索引赋值，和直接改变数组的length属性。data:{a:[]}thia.a[0]=1 //视图不会响应2.对于数组常用的方法：push,pop,splice等直接改变原数组的方法，视图是响应的。

一，watch的作用1.watch对象用于监听数据的改变。当vue实例创建时会调用 $watch()，遍历 watch 对象的每一个 property。二，watch的使用1.watch接受一个对象，对象的键是需要观察的值，也可以是一个表达式，对象的值可以是回调函数，方法，对象，数组。2.当值是函数和方法名时。new Vue({data:{ a:1， b:1},watch:{ a:function(newVal,oldVal){ }, b:'watchB', }})3.当

一，条件渲染：v-if和v-show1.v-if : vue提供了v-if指令，可以根据条件判断元素渲染与否。2.v-if接受一个具有truth值的表达式，当为true时元素渲染，反之元素不渲染。3.相应的还有v-else和v-else-if，当v-if为false时，渲染v-else内容。4.注意，v-else必须和和v-if相邻，否则识别不了。5.v-show : vue提供了另一个指令v-show也可以用来动态渲染元素。6.v-if会销毁元素，代驾比较大，v-show只是在css的disp

一，原生事件绑定1.在原生js中，我们有三种方式为一个属性绑定事件，分别为：在HTML标签上添加事件属性在js中使用html节点的事件属性绑定事件处理程序，例如node.onclick=function(){}在js中使用addEventListener("click",function(){},false)想了解更多，可参考js原生事件绑定二，Vue事件绑定 v-on:1.在vue.........

一，引言1.操作元素的 class 列表和内联样式(style)是数据绑定的一个常见需求，为此vue做了专门的增强。二，class绑定(1) 对象语法1.我们可以向:class传入一个对象，动态决定是否应用某个class样式，2.v-bind:class 指令也可以与普通的 class 属性共存<p class="normal" :class="{styleA:use,style...

一，引言1.Vue的核心是使用基于 HTML简洁的模板语法，声明式的将数据渲染进DOM系统。二，模板语法1.Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据2.Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。三，HTML 模板语法形式（......