lazy_tomato的博客

【代码】vue3响应式丢失的情况。

1.2 配置vite.config.js增加如下代码：核心的代码就是下面这些：1.1.3 效果截图2.2 配置vue.config.js2.1.3 效果截图

setup。

银行家舍入：所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。具体规则如下：简单来说就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。最近使用到一个方法，有点特殊，记录下。

【代码】仿csgo横向滚动抽奖效果 （源码直接复制）

在我自己实现功能的时候，发现首行的样式不会更新，排查了一下原因，可能是和 vue的diff算法有关，需要给虚拟节点 vnode增加一个key，标志组件唯一即可。最简单的还是使用css的animation属性，实现动画效果即可，当元素加载时会播放动画。在vue等框架中，组件更新也会重新渲染dom更新动画。在使用vue-table的时候，发现虚拟滚动失效了，后面发现这几个原因，记录一下。记录一下 vxe-table 实现表格新增数据背景闪烁功能。

最近项目中需要使用某些第三方插件，但是第三方插件对 vue 的版本有要求。插件要求 vue版本为vue2.6.x的，而我现有的环境是vue2.5.x的。记录一下 升级 Vue 版本从2.5.x到2.6.x的过程。

vscode。

在日常代码编写的过程中，针对高频出现的业务场景，我会它把封装一个组件，然后多个地方去使用。但是在某些情况下，一个组件并不能兼容所有的场景。就比如对话框组件，可能每个人都会用到对话框，但是对话框中的内容会根据需求千变万化。这个时候就要考虑有没有什么方法，可以让我们对话框中的内容变成动态的呢？答案：有，使用插槽就可以满足我们的需求。插槽的概念有点类似 JavaScript 中的插值表达式，在代码在保留一个占位符，然后动态的向占位符中传入内容。// 插值表达式var name = '番茄'我是${

所以在使用 lodash.debounce 时，传递的匿名函数，不要使用箭头函数，即可保证正确的 this 指向。：可以被 apply 修改 this，从而指向了函数A的 this (函数A的 this指向 vm)。： 箭头函数无法被 apply 等方法，显式的修改 this。它内部为了保证回调函数的this指向正确，使用了apply，处理了回调函数的this。当符合回调函数执行的时候，会触发，我们的回调函数。函数，执行后会返回一个函数。对照我们的示例代码，我们仔细研究一下，出现这个问题原因。

首先以文本的形式打开我们的svg图标。可以用记事本或者vscode都可以。使用浏览器打开会直接看到svg的效果。

当我们在监听元素滚动事件的时候，会一直触发 onscroll 事件，在 pc 端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给对移动端的滚动做一些优化。html 某些元素自带一些默认的事件，例如常见的:from 表单的提交；js 中事件默认是由内向外层冒泡传递的。修饰符是加在自定义组件的事件上，保证事件能执行.这三个修饰符分别是鼠标的左中右按键触发的事件。当我们并不想触发外层的事件时，我们可以用。修饰符的作用是，事件只执行一次。修饰符的作用是阻止默认事件。

本文介绍的vuex基于 @vuex3.0。

目前想到的解决思路：我搭建一个项目A，一个组件库项目B项目A中的 中软链接项目B。启动项目A，修改项目B，在项目A中实时查看效果。相关小知识1. ln -s1.1 基础解释 它的功能是为某一个文件在另外一个位置建立一个同步的链接。当我们需要在不同的目录，用到相同的文件时，我们不需要在每一个需要的目录下都放一个必须相同的文件，我们只要在某个固定的目录，放上该文件，然后在 其它的目录下用ln命令链接（link）它就可以，不必重复的占用磁盘空间。阮一峰-require加载node_modules的顺序r

接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。总的来说，截至目前，；；两者都可以实现取消请求。底层逻辑相同：都是通过传入配置参数，再手动触发对应参数的取消方法。差异：传入的配置对象不同。

github-axios 点击跳转我去年阅读 源码的时候，默认版本还是 ，今年变成了 了，这个需要注意下。我对 版本号比较在意的原因是，看到过这句话： 整体源码不过千行，可模仿和学习的地方还是有很多的，互勉。由上述的截图可得，目前最新的 的取消请求api，推荐使用 。旧版本的 在 后弃用。官方示例1.3.2 AbortController2. CancelToken 使用案例官方文档中的演示案例不太直观，我们搭建一个服务，本地调试一下。2.2 后端服务代码 2.3 启

针对不同的系统，使用Node.js的子进程 child_process 模块的spawn方法，调用系统的命令打开浏览器。

查看了上述的代码，主要逻辑就是触发当前组件实例的渲染watcher上的update更新方法。也就是主动触发整个组件的更新。

由于 Vuex 中的数据存储在内存中，所以有这么一个问题：Vuex 中的数据，页面刷新就没有了？是以字符串为基础，进行数据的存储的，所以可以存储字符串。Vuex 存储的是一个对象，对象又在内存中，所以，理论上，可以存储 js 中所有类型的数据。由于 Vuex 的数据是存储在内存中的，所以当网页刷新的时候，数据会丢失。浏览器环境下，项目没有引入 Vuex ，存储较少的标准json数据的情况。想要准确的思考，就必须要知道它们的不同点，它们各自的优势和劣势。得到的一个对象，它存储在内存中。

要是换做以前，可能这段内容我就跳过了。但是最近刚好学习了设计模式，又刚好学习了单例模式，这里我就讲讲我的理解。

vue3中由于响应式实现原理发生了变化，所以不需要 $set 了，所以不做探究。一知半解，是我最讨厌的状态，今天就带着问题，再阅读一下对应的源码，了解问题的本质。今天在使用 $set 的时候，发现如果 被赋值的数据 层级较深会出现报错的情况。简单说明一下我遇到的问题，明确探究问题的目标。3.通过数组索引修改数据。上述的演示，源码查看的是。

【代码】去除项目的 console。

有这么一个场景，组件 A 中有组件 B，组件 B 中有 C。AC 之间通信怎么办？另外说个其他的小 tips。

模式用于test模式用于production模式用于和二.可以通过--mode指定模式三.不同的环境变量的配置文件.env # 在所有的环境中被载入.env.local # 在所有的环境中被载入，但会被 git 忽略.env.[mode] # 只在指定的模式中被载入.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略四.在只有NODE_ENV，BASE_URL和以VUE_APP_开头的变量将通过静态地嵌入到客户端侧的代码中。.........

需要点击按钮弹出一个弹出框，然后再弹出框中可以输入内容，点击确定的时候，调用接口保存。原生的 cube-ui 仅支持一个输入框，而且这个输入框类型不可控。我接到的需求呢，是支持多个输入框，且输入框类型还不一样。cube-ui是支持插槽的，具体的代码中createElement这个函数结构有点类似于h函数。通过这个插槽插入文字图片什么的还是可以的。我如果通过这个函数，向对话框中，插入几个input框。第一有点麻烦。第二可操作性有点低。正当我思索的时候，我突发奇想，先看看它的对话框源码是怎么写的。看了一眼

1.2 简单解释一下这里的的逻辑，如果后面是路径，直接沿路径去寻找对应文件。如果后面是一个名称，那就引入是第三方模块，会去中寻找对应名称的文件夹。 》 》 1.3 Vue.use()代码2. 看一下 vueEsign 插件的install是什么？3.看一下 element-ui的install是什么？4. Vue.use() 总结首先 本身是一个函数;这个函数做了这些操作：暂时遇到的插件本身都是一个对象，然后install中都会拿到传递来的Vue构造函数进行一些绑定

自己造轮子有点麻烦，不如去github找一下。有一个关于电子签名200个star的库：，支持vue2，vue3。查看了一下demo符合我们的要求，就它了。官网地址安装依赖基本使用其他来都来了，顺便看下的它的源码......

比如我有一个对象obj，它有一个属性a.我可以设置它的值，也可以获取它的值。没毛病，这种代码我们肯定没少见过。vue双向数据绑定实现的是什么效果？数据改变了页面改变，页面改变了数据也跟着改变。那如果想实现它这个效果，该怎么做呢？我们可以给例如input框添加一个输入事件，当input框的内容改变了，我们修改一下数据。每次操作数据的时候，手动更新DOM。可以自己创建一个html页面，复制我的代码运行一下，就会发现基本实现了双向绑定的一个效果。简易版的弊端： 不适合处理复杂的数据由上面简易版本的弊端，我在想

START前段时间有小伙伴在vue项目中，路由跳转的时候，使用a标签去跳转路由，遇到跳转不生效，路径还是奇怪的http://xxxxxx/about#/about，记录一下这个问题。a标签基本介绍首先看看我们的a标签<a></a>的W3C基本介绍：<a>标签定义超链接，用于从一个页面链接到另一个页面;<a>元素最重要的属性是 href 属性，它指定链接的目标href属性可以设置的URL:绝对 URL - 指向另一个站点（比如 href=

今天在使用element-ui的表单的时候，点击了一个普通的按钮，表单数据清空了。有点意思，写个文档记录一下。本地演示的demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten

环境说明node版本node -v # v12.16.0vue版本vue 2node下载源# 查看当前node下载配置npm config get registry # 设置下载源为淘宝镜像npm config set registry https://registry.npm.taobao.org 方便演示，番茄Echarts系列博客环境都在 vue2; node版本为 v12.16.0下运行。安装官网说明地址npm install echarts

START记录一下element-ui 时间组件设置默认值相关做法代码<template> <div class="#app"> <el-date-picker v-model="value" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" > </el-date-picker> </d

START今天遇到一个有趣的bug，记录一下啊。编程十余载，倒也不一定遇到这种bug。正文由于一些功能需要，我们需要对代码的中文去做匹配。很简单的代码，用代码判断中文是否相等。但是明明中文相同，但是执行出来的结果却是false浏览器打印截图vscode代码截图END到最后才发现，是入字不相同导致的、入 ⼊还是很有趣的，┓( ´∀` )┏...

START如果希望元素的样式根据js代码去控制，常见的办法呢，是在元素的style属性绑定变量即可例如<h3 :style="{ color: colorList[0] }">1.基本的绑定样式示例</h3>详细用法可参考下面的博客：https://www.jianshu.com/p/2b82ee1e6199但是如果style不满足需求，想在style标签中使用变量怎么办？开始安装插件css-vars-ponyfillnpm i css-v

STRAT记录一下vue中常用的样式绑定的用法记录一下callBack函数的使用（蛮不错了，理解清楚之后很多场景会使用到。）代码<template> <div id="app"> <h3>vue中绑定style用法案例</h3> <!-- 1. 最基本的使用 --> <h3 :style="{ color: colorList[0] }">1.基本的绑定样式示例</h3> &

START番茄今天，在vue项目中，$ref取值操作发现，时而是对象时而是数组，以前没有注意到这个细节问题，今天又写了固定的ref名称，又写了for生成的ref名称。发现vue中$ref取值，静态的ref读取到的是dom对象，而for循环生成得ref，读取到的dom对象是一个数组。详细说明$ref取值操作发现，时而是对象时而是数组，以前没有注意到这个细节问题。demo代码<template> <div> <h1 style="text-align

icon图标的使用STARTicon图标的使用，对于番茄我来说，算是一个痛点吧。写这篇文章之前，也看了不少别人有关图标使用的博客。想了很久，还是想自己写一篇属于番茄我自己的一篇图标相关的博客。一来是复习，一来算是总结。这次必不会鸽了，一气呵成，一次到位.文章的主体顺序，还是按照我接触的先后做排序的，由易到难，这样方便理解。当然，番茄我了解的知识，或许也不够全面，请见谅.出于比较有责任的想法，我会写比较多的demo，展示具体用法，确保百分百可以运行，方便学习或CV.为了方便整合，所有演示demo我

STARTelement-ui 官方文档并没有记录滚动条的用法，但是实际上，它是有的。使用本文章的demo，默认认为你已经安装配置好了elemen-ui，没有配置请移步elemen-ui 安装配置下列代码可直接cv，ღ( ´･ᴗ･` ）代码<template> <div> <h3 style="text-align: center">我是vue element-ui 滚动条的使用demo</h3> <div class

START本文主要记录，vue开发者工具 vue-devtools的下载安装配置。截止目前最新版本为5.3.x （githup）vue-devtools github 地址由于谷歌官方下载需要翻墙，所以我们选择不去官网去下载，而是直接加载本地扩展程序配置下载：链接：https://pan.baidu.com/s/1557qbs6kdvzhXpgGRfJnpA 提取码：xdyk 打开谷歌浏览器 (输入)chrome://extensions/将下载好的文件直接拖到浏览