016-父子组件生命周期执行顺序

本文系统介绍了Vue Router的导航守卫机制。导航守卫是Vue项目中路由管理的核心功能，用于在路由跳转过程中进行拦截和处理，主要解决登录鉴权、权限控制、数据预取、页面行为管理等问题。文章详细讲解了三种导航守卫：全局守卫（beforeEach、beforeResolve、afterEach）、路由独享守卫（beforeEnter）和组件内守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave），分别阐述了它们的作用时机、适用场景和代码示例。最后强调了使

收集所有面试要点，大部分是实际面试问题，个别是提升时需要掌握的知识点

本文将深入剖析一款基于 HarmonyOS ArkTS 开发的租房管理应用的完整源码实现。该应用涵盖了房源管理、租客管理、财务统计、合同管理和个人中心五大核心模块，采用了 HarmonyOS 声明式 UI 开发范式和响应式状态管理机制，整体代码结构清晰、模块化程度高，非常适合作为 ArkTS 实战学习案例。从架构层面来看，本应用采用了经典的分层设计思想。最底层是数据模型层，通过接口（Interface）和可观察类（@Observed Class）定义了所有业务实体的结构；其上是配置与工具层，提供状态映射、颜

在移动互联网与智能穿戴设备高度普及的今天，"习惯养成"已经从一个模糊的自我管理理念，演变为一个可量化、可追踪、可视化的数字化产品赛道。越来越多的人希望借助手中的智能终端，把"早起、冥想、阅读、运动"这些抽象的自律行为，转化为一条条清晰的数据曲线和一张张可触摸的打卡卡片。而鸿蒙生态（HarmonyOS）凭借其跨设备协同、分布式软总线以及声明式 UI 开发框架 ArkUI，为这类注重"轻量化交互 + 即时反馈"的生活方式类应用提供了极为理想的生长土壤。本应用正是一款面向"晨间场景"深度打磨的习惯追踪工具。它聚焦

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。原理： 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中，在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。用于保留组件状态或避免重新渲染，包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

双向绑定原理双向绑定思考：一句话描述原理DocuemntFragment（碎片化文档）Object.defineProperty（数据劫持）发布订阅者模式Vue 双向绑定图示Vue 双向绑定完整实现代码 双向绑定 vue中 data定义的数据会添加双向绑定的功能，即数据更新后，页面内容会同步更新；页面内容更新后，数据也会同步更新。 思考： 初始化，如何将 data 中的数据更新到DOM模板中？ - 碎片化文档 页面更新，如何更新数据？ - input事件监听 数据变了更新页面，那如何知道数据变了呢？ -

由 属性绑定(v-bind:value=“searchText”) 配合 input事件监听(v-on:input=“searchText = event.target.value”) 实现。应用在组件上由 props: {value: xxx } ，this.$emit(‘input’, xxx ) 完成。

Vue 随笔 -- Vue CLIVue-cli 介绍Vue-cli 安装Vue-cli 使用项目开发总结 Vue-cli 介绍 Vue 项目开发全家桶，使用 webpack 进行打包构建部署等，可以配置 vue-router、vuex、axios等项目所需要的的插件，是实际项目开发必备工具集。 Vue-cli 官网：https://cli.vuejs.org/zh/guide/ Vue-cli 安装 下载 node nodejs中文网：http://nodejs.cn/download/ 下载后直接下

💡Tips：Vue 中，data、computed、watch、methods 各有其使用场景，使用时需要如何区别呢？

但是history也是有缺点的，不怕前进后退跳转，就怕刷新（如果后端没有准备的话），因为刷新是实实在在地去请求服务器了，选择history模式，后端需要配置如果找不到页面，默认跳转index.html，前端处理404页面等特殊情况。

文件中包含了所有的用户组件的js以及css代码，但用户可能根本不会浏览到某些页面，也就是说根本不需要渲染某些组件，所以vue-router 提供了一种路由懒加载机制，就是当某个路由规则匹配时，才会去加载下载并加载某个组件，此时可以提升首页的渲染速度。我们是将每个组件都分别打包了，每个组件都变成单独文件进行请求，并不是最优解，因为网络时延的存在，应将组件合理分包，进行请求，形成最优解。对比原来的引入方式，就能发现不同点：现在的 Login 是个函数，当路由规则匹配上，就会执行这个函数，才去加载此组件。

简单、双向绑定、轻量级框架、组件化、结构分离、运行速度快、用户体验好。

【代码】009-组件的data为什么是个函数。

route 对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。$router 是路由实例对象，是router构造方法的实例：new Router({})。

Vue 随笔 -- 组件组件介绍全局组件父子组件传值bus 总线进行传值v-model 在组件中的使用组件高级用法 slot、 name自定义树组件总结 组件介绍 Vue 的核心概念之一，将需求划分为多个小模块，小模块通过组件来实现，各个组件之间耦合度低，复用性高，团队成员分配任务进行各个组件编写，其他开发人员只要知道当前组件需要的入参，即可使用。 全局组件 通过 Vue.component 注册全局组件，传入 template、data、methods 等属性，配置组件名称，即可通过组件名称使用组件。 &

Vue 实现响应式，在 data 更新后，一定时间内，没有继续操作DOM，然后会触发浏览器渲染引擎去更新DOM，更新DOM也是需要时间的，所以。data 更新引起的 DOM更新并不是实时的。// 需要等DOM更新完成后调用init方法。Tips：显示组件，并调用组件的初始化方法。// 更新该变量，会引起 DOM 更新。

Vue 随笔 -- 基础知识Vue 简单介绍Vue 引入Vue 内置指令Vue 自定义指令Vue 最常用的生命周期函数data & 过滤器 & 计算属性axios国际化： vue-i18n总结 Vue 简单介绍 Vue 作为目前最受欢迎的前端框架，上手难度低，采用 axios 作为前后台交互方式，Vue-router 作为路由，vuex 管理数据流，Vue-i18n 进行语言切换，拥有生命周期、及组件系统，采用 webpack 全家桶打包优化性能，结合 UI 框架 elementUI，让前端

Vue 随笔 -- 路由Vue-router简单使用路由跳转路由跳转传参嵌套路由多视图路由守卫 Vue-router vue-router 官网： https://router.vuejs.org/zh/guide/ 更多的前端项目偏向于单页面应用程序，基于MVVM模式，单页面应用程序跳转不卡顿，切换流畅等； 基础知识点包括：路由跳转、路由跳转传参、嵌套路由、多视图、路由守卫等； vue-router 在项目的引入包含两种方式： 通过 js 引入<script src="https://unpkg.

使用定义 store两种风格：（类似 Vuex）（Composition API 风格，推荐）})})// 访问: store.state.count})// 访问: counter.countgetters: {// 访问: store.getters.doubleCount// 访问: counter.doubleCountComposition API 提供更灵活的代码组织方式更好的性能（响应式系统优化、Tree Shaking、更小的 bundle）