传播有益的技术文章，力求精准、专业、专心、专享

总共7个守卫，3个全局守卫：全局前置守卫`beforeEach`、路由前置解析守卫`beforeResolve`、全局后置守卫`afterEach`，1个路由独享守卫：进入任一路由前守卫`beforeEnter`，3个组件内导航守卫钩子：进入新目标前守卫`beforeRouteEnter`、路由更新前守卫`beforeRouteUpdate`、离开当前实例前守卫`beforeRouteLeave

lambda表达式是一个函数表达式，表达式的计算结果为函数对象，语法：参数列表+箭头+函数体

事件，就是用户或浏览器自身执行操作而触发的某种动作，那么对某种动作的响应就是事件处理。响应事件处理或者说进行事件处理的回调函数就叫做**事件响应处理函数**。

传统布局解决方案中，其基于盒状模型，主要依赖于display属性、position属性、float属性。它对于一些特殊布局，使用起来有诸多不便，比如，垂直居中就不太容易实现。flex布局，可以简便、完整、响应式地实现各种页面布局。为了提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空闲空间，引入flex弹性布局。CSS3弹性盒子（ Flexible Box 或 flexbox）是一种当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为的一种布局方式。

v-model指令实现表单输入值与父组件中的属性变量保持同步

使用v-on指令 (简写为@) 来监听DOM事件，并在事件触发时执行对应的JavaScript脚本。用法：v-on:click="handler"或@click="handler"。

v-for指令相当于根据组件实例中的数组数据来批量渲染生成大量的新的数据标签

条件为真是渲染，否则不渲染相关组件或标签

该属性绑定指令主要应用在两类场景下：一类是绑定attrs标签属性，如class、id、style等属性；另外一类是绑定props组件实例自定义属性，即用于动态地绑定一个或多个基本类型属性或者绑定一个对象类型的属性到组件上。props 是组件间通信的一种方式，允许父组件向子组件传递数据。在 Vue 中的灵活性和强大功能，无论是用于 DOM 属性还是组件 props 的动态绑定。是组件的数据属性，它们的变化将实时反映到 DOM 上。还可以接受一个对象，这样就可以批量绑定多个属性。

Vue3中，使用defineModel()函数实现父子组件表单数据的双向绑定

组件attributes元素属性，即通常意义上的标签属性，如：class、id等

组件实例prop属性跨层级传递，即所谓的“属性透传”，主要由provide()函数与inject()函数实现

Vue中的动态组件，即组件动态切换，由标签与is属性共同实现，外加保留组件切换状态。

Vue3开始，子组件可以使用defineEmits(["enlarge"])函数注册enlarge事件，父组件则可以用v-on(@)指令来绑定该事件，如@enlagre="doEnlarge"

采用最新的Vue官方构建工具Vite实现Vue项目工程化方法

vue生命周期与生命周期钩子

Vue响应式机制，ref()函数和reactive()函数

在 Vue中，计算属性（computed properties）是一种特殊的响应式属性，它们基于响应式依赖进行缓存，并且只有当依赖发生变化时才会重新计算。计算属性是派生状态的声明式定义，经常用于执行复杂逻辑或执行性能密集型操作。

计算属性允许声明性地计算衍生值。然而在有些情况下，需要在状态变化时执行一些Effect（额外的逻辑）

当v-bind绑定是一个对象字面量时，对象的所有属性都会被当前props传入，而且组件属性名与对象属性名一至，此时，可以使用无参的v-bind来简化属性绑定，即只使用v-bind而不需要使用:prop-name绑定形式。Vue中，父子组件数据传递应遵循单向数据流原则，比如，构建一个博客，可能需要一个表示博客文章的组件，并且，所有的博客文章使用相同的视觉布局，但内容却不相同。原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。类型的 props 有特别的类型转换规则。

Vue 的组件可以按两种不同的风格书写：选项式API和组合式API

Vue3组合式函数定义及应用，Vue3 slot插槽使用及插槽属性解构

vue事件绑定，computed计算属性，v-bind style属性绑定

Vue3 Switch开关按钮实现，defineEmits()实现父子组件事件绑定，defineProps()实现父子组件属性绑定

基于vue实现下拉列表联动效果，v-model select数据绑定及v-bind change事件绑定，定模拟Vue3 fetch异步请求。

javascript实现一个简易计算器

省市县三级联动，模拟fetch异步请求地区数据，数据文件参考Vue3实现的三级联动

待办事项管理界面包含标题，全部勾选，添加新的待办事项，事项列表和状态栏。勾选中表示办结事项，底部状态栏显示剩余待办事项数量、事项列表选项（全部事项、待办事项和办结事项）和清队办结事项。待办事项状态state包括：所有待办事项todos、事项承办状态过滤条件filter、事项编号nextId，待办事项计算属性getters包括：已完成事项finishedtodos、未完成事项unfinishedTodos、过滤已办或未办事项filteredTodos，添加待办事项行为actions：addTodo。