vue组件知识点
ref和通信ref在 Vue 组件中,ref 是一个用于在模板或组件内部获取对 DOM 元素或子组件实例的引用的特殊属性。ref 的使用场景和功能包括:
访问和操作 DOM 元素:通过给元素添加 ref 属性,可以在组件中直接访问和操作该 DOM 元素的属性、样式、以及调用其方法。
与子组件进行通信:通过给子组件添加 ref 属性,可以在父组件中获取子组件的实例,并通过实例调用子组件的方法、访问其属性。
下面是一个完整的示例,展示了 ref 的使用场景和示例:
12345678910111213141516171819202122232425262728<template> <div> <h1 ref="title">方式1:DOM元素</h1> <button @click="changeTitle">更改title</button> <child-component ref="child1">方式2: 引用子组件实例 ...
vue指令知识点
模板和指令
模板语法有两种
a. 插值语法: {{x}}, 用于解析标签体内容, 其中 x 为vm(mvvm)实例对象上可以直接访问的属性, 这些数据通过数据代理的形式(_data)确保 vm 可以进行访问. 注意, 插值语法中可以 data 或者 methods 等等任何数据.
b. 指令语法: v-CMD, 例如 v-bind, v-on, v-html 等
注意, 插值语法作用于标签体, 而指令语法则在标签属性中生效.
v-bind 表示数据的单向绑定, 从 data --> 模板, 其缩写语法为: “:KEY”, 一旦使用 v-bind 指定某个值, 则表示当前标签上已经有某一个 KEY 属性了, 例如: <li :bamboo="3"></li>在渲染之后, li 标签上将有一个 bamboo 属性. 这一点非常重要, 这个非常有助于后续第三方组件或者自定义组件中的关键字段传值:
1<component :key1="1" :key2="2& ...
vue基本知识点
计算和监视概要计算属性(Computed Properties)和监视器(Watchers)是Vue.js中用于响应式数据处理的两种重要机制,它们有一些区别和各自的使用场景和用法。
计算属性适合用于对现有数据进行复杂的计算、转换或筛选操作,并将结果作为属性暴露给模板使用. 计算属性适合处理基于现有数据的计算,具有缓存机制,只有在依赖数据变化时才重新计算.
监视器适用于处理特定响应式数据的变化,并进行更复杂和灵活的操作,例如发送网络请求、触发副作用等. 监视器适合监听特定数据的变化,并在数据变化时执行自定义操作,适用于处理复杂的业务逻辑和副作用
根据具体的需求和场景,选择使用计算属性或监视器来处理响应式数据,以提高代码的可读性和维护性.
计算属性
定义方式:通过在Vue实例的computed选项中声明。
特点:计算属性是基于其依赖的响应式数据进行计算,并缓存计算结果。只有当依赖的响应式数据发生变化时,才会重新计算,否则会直接返回缓存的结果。
使用场景:适合用于根据现有的响应式数据进行复杂的计算、转换或筛选操作,并将结果作为属性暴露给模板使用。
优点:提供了对响应式数据的自动依赖追踪和 ...
编程设计:微服务
站内链接:
设计(1)-常用术语
设计(2)-分层结构
设计(3)-微服务
设计(4)-设计模式分类
设计(5)-代码重构
微服务微服务和分层微服务可以是一种分层架构的实现方式,而分层架构可以在微服务架构中用于组织和管理各个微服务内部的组件。分层架构的架构演进中提出了整洁架构、DDD 领域驱动设计等架构或风格,它们的最终目的都是为了:关注点分离、边界职责分明,在这其中,微服务以 RPA 调用的方式从代码项目和信息交流方式上彻底的进行解耦,将自治的业务独立成一个个的微服务,确保一个庞杂的应用系统更加可维护、边界更清晰。
从分层架构的角度考虑,一个个的微服务何尝不是一个个分层的小圆圈。
微服务和单体微服务架构并非适用于所有的场景,在资源受限的情况下,采用微服务架构很多优势无法体现,性能上的劣势反而会比较明显,下面是单体架构和微服务架构在业务复杂度不断增加之后的成本估算:
从图中可以看出,只有业务复杂度达到一定规模之后,此时使用微服务才能有比较好的成本性价比。另外,微服务的落地也不是那么轻松就能实现的,需要提前完成如:服务描述、注册中心、服务框架、服务监控、服务治理等基础设施,这些 ...
数据库:mongo基本使用
站内链接:
容灾-mongo 高可用
db-mongo 基本使用
db-mongo 基本特征
集合和文档insertinsert()是 MongoDB 中用于向集合中插入新文档的方法。它可以一次插入单个文档或多个文档到指定的集合中。下面是insert()方法的用法说明:
1db.collection.insert(<document>)
db.collection:表示要进行插入操作的集合名称。
<document>:表示要插入的文档或文档数组。
例如:
1db.users.insert({ name: 'John', age: 30 });
以上示例表示向名为”users”的集合中插入一个文档,该文档包含”name”和”age”字段。 也可以一次插入多个文档:
1234db.users.insert([ { name: 'John', age: 30 }, { name: 'Jane', age: 25 },]);
以上示例 ...
容灾:数据同步和复制
站内链接:
容灾-mysql 高可用
容灾-策略和架构
容灾-数据同步和复制
容灾-redis 高可用
容灾-mongo 高可用
同步和复制同步和复制数据同步(Data Synchronization)指的是将数据在不同系统、设备或位置之间进行更新和保持一致的过程。它确保了数据的准确性和一致性,使得各个数据副本之间的内容保持同步。数据同步可以包括多种操作,例如数据的复制、更新、删除等,以确保数据在多个系统之间的一致性。
数据复制(Data Replication)则是数据同步的一种具体方式,它是指将数据从一个源位置复制到一个或多个目标位置的过程。数据复制可以基于不同的策略和技术来实现,例如同步复制、异步复制、基于日志的复制等。数据复制通常用于实现容灾、数据备份、数据分发和数据共享等目的。
因此,数据同步是一个更广泛的概念,包括了数据复制在内,而数据复制则是数据同步的一种具体实现方式。数据同步还可以包括其他操作,例如数据的更新、删除、冲突解决等,以确保数据的一致性和正确性。
但是,在大部分情况下,数据同步和数据复制都是指代同一个东西,如果真的将数据复制从狭义方面区别于数据同步,并搞出 ...
编程设计:分层架构
站内链接:
设计(1)-常用术语
设计(2)-分层结构
设计(3)-微服务
设计(4)-设计模式分类
设计(5)-代码重构
整洁架构定义和规则
定义
整洁架构(Clean Architecture):整洁架构(Clean Architecture)是由 Robert C. Martin 提出的一种软件设计架构,它强调将软件系统分解为独立的层次和组件,以便于维护、测试和部署。整洁架构的核心思想是将系统分解为多个层次,每个层次都有明确的职责和依赖关系,从而实现高内聚、低耦合的设计。整洁架构将系统分为如下几个层次:
实体层(Entity Layer):Enterprise wide business rules,实体层包含了应用程序的核心业务逻辑和数据模型,它们是应用程序中最基本的构件。实体层定义了应用程序中的数据结构,以及业务逻辑的校验和处理规则。
用例层(Use Case Layer):application specific business rules,用例层包含了应用程序的业务逻辑,它们定义了应用程序的行为和操作。用例层负责处理用户请求,并协调各个领域对象之间的交互,从 ...
编程设计:代码重构
站内链接:
设计(1)-常用术语
设计(2)-分层结构
设计(3)-微服务
设计(4)-设计模式分类
设计(5)-代码重构
容灾-策略和架构
重构步骤和原因
代码重构的原因
项目在不断演进过程中,代码不停地在堆砌。如果没有人为代码的质量负责,代码总是会往越来越混乱的方向演进。当混乱到一定程度之后,量变引起质变,项目的维护成本已经高过重新开发一套新代码的成本,其可能原因如下:
需求紧急度和成本上的考虑,在开发一些功能时往往不考虑整体而是在原功能堆砌式编程
多人团队配合,成员之间的代码开发质量不一,在缺乏有效代码质量监督机制的情况下往往会发生此类问题
代码开发在初期需要考虑和后续需要考虑的重点不一样,关注点不一样,这就导致初期开发的时候没有想象的那么远,那么深,当然这也是没有问题的。
此时,就需要不断地重构代码来解决代码中的混乱问题。
代码重构的步骤:
了解项目并评估项目的重构工作量,在确认之后开始进行重构代码
对重构后项目代码的回归测试,这个是非常必要的
通过重构分支和代码 review 确保重构代码更加合规
项目开关:确保线上代码可以通过某个开关回滚到之前的逻辑 ...
容灾:redis主从配置
站内链接:
容灾-mysql 高可用
容灾-策略和架构
容灾-数据同步和复制
容灾-redis 高可用
容灾-mongo 高可用
架构单机模式Redis 单机模式是指在一个单独的 Redis 实例上运行,没有任何主从复制或分片分布。它是 Redis 最简单的部署模式,适用于小规模应用或开发测试环境。尽管 Redis 单机模式在部署和管理上相对简单,但在面对高并发和大规模数据负载时可能存在性能和可靠性方面的限制。其有如下缺点:
Redis 单机模式没有内置的高可用性机制。如果 Redis 服务器发生故障或宕机,将导致应用程序无法访问数据。单点故障可能会导致应用中断或数据丢失。
有限的容量和性能:Redis 单机模式受限于单个服务器的资源,包括内存容量、CPU 和网络带宽等。对于大规模的数据集和高并发负载,单个 Redis 实例可能无法满足需求,导致性能下降或资源瓶颈。
无自动扩展:在 Redis 单机模式下,无法自动水平扩展以应对增长的数据量和负载。如果需要增加存储容量或处理能力,需要手动升级硬件或迁移数据到更强大的服务器。
数据丢失风险:由于 Redis 单机模式将数据存储在内存 ...
neovim配置记录笔记
站内链接:
vim 笔记(1)-命令-基本命令
vim 笔记(2)-命令-ex 命令
vim 笔记(3)-命令-map 映射
vim 笔记(4)-命令-输入模式
vim 笔记(5)-配置-通用配置和术语
vim 笔记(6)-配置-neovim
vim 笔记(7)-IDE:基础插件
vim 笔记(8)-IDE:开发语言相关插件
vim 笔记(9)-IDE:插件管理
安装配置vim 到 nvim
创建 init.vim
通过nvim打开编辑终端, 输入命令:help nvim-from-vim开启 vim 到 nvim 的使用文档介绍, 输入下面的命令:
12call mkdir(stdpath('config'), 'p')exe 'edit '.stdpath('config').'/init.vim'
其中stdpath('config')是 neovim 的内置函数, 用于获取当前用户的配置文件目录, 一般为~/.config/nvim ...