STATICHIT静砸的博客

在Vue 3中，有一个非常方便的API可以观察响应式数据的变化，即watchEffect。watchEffect是一个新的API，可以自动跟踪响应式数据的变化，并在其发生变化时执行回调函数。由于项目中数据大屏页面的背景颜色不同于其他页面，而面包屑导航直接设置在根页面中，底板也直接设置在根页面中，所以今天还学习了vue3+setup中如何监听路由变化来改变根页面的背景颜色样式。在本例中，我们将使用watchEffect和useRoute来观察路由的变化，并更新页面的样式。已经成功实现，这里写个博客记录一下。

1.首先我们需要在路由中为每个vue页面设置meta属性。其他页面也切换自如成功配置啦（这里就不过多展示了。这是为了给面包屑导航遍历路由提供依据。2.然后封装面包屑组件。

今天使用changing这个变量进行控制组件的显示时，明明打印出changing的值是确实发生了改变的，但是页面中的样式却不发生改变！是因为，有个地方非常需要注意，也是刚开始学习vue3的人非常容易犯的一个错误，就是。在改变ref值时，一定给变量名字加上 .value 进行重新赋值操作！由于最近开始从vue2转vue3，对vue3的很多写法还不太熟悉。点击按钮后可以看到控制台中的确显示changing已经变成true。（注意这里是changing.value = true）//changing值。

项目中有个小地方虽然写起来不麻烦，但是也有那么二十几行代码，且几乎每个子页面的根页面都有这个部分，且不同之处只是两个字段内容，所以我对其进行了封装。由于多个页面拥有这个部分，为了降低代码冗余度，进行了TitleTip组件的封装（使用到该组件的页面直接传入标题，提示，提示内容和宽度即可(可以只传入部分)）该组件由两部分组成，一个是标签，设置了该页面的标题一个是element-plus的提示框组件，当鼠标悬停于图标上时会出现提示框便于用户理解功能。

最近在对项目做整体的自适应。我们可以通过设置meta的viewport属性设置屏幕的缩放，但有时候，屏幕缩放了但字体大小也需要做相应的调整才能达到更好的自适应效果。我们很容易想到使用媒体查询+rem来实现字体的自适应。rem单位：“rem” 是 “root em” 的缩写，表示相对于根元素（html元素）的字体大小。如果根元素的字体大小为16px，1rem就相当于16px。如果根元素字体大小更改，那么所有使用rem单位的元素的大小都会相应地调整。首先，简单说说使用'rem'单位的目的和必要性。

函数是一种用于定义组件的渲染函数的特殊函数。它是Vue.js的渲染函数API的一部分，允许我们以编程方式描述组件的UI结构。在传统的Vue.js开发中，我们通常使用模板语法（Template Syntax）来定义组件的UI结构，例如使用。函数，您可以创建不同类型的VNode，例如HTML元素、组件等，并定义它们的属性和子节点。函数，并将返回的VNode转换为实际的DOM元素，并将其插入到页面中。函数的好处是可以更灵活地控制组件的渲染过程，并且可以在。下面是一个简单的示例，展示了如何在Vue.js中使用。

合并和压缩 CSS、JavaScript ⽂件，使⽤雪碧图、字体图标等减少图片请求，减少不必要的资源请求。：在构建Vue应⽤时，确保使用⽣产模式，这将禁⽤⼀些开发模式下的警告和调试⼯具，并启用性能优化的功能。：使⽤Vue的计算属性和侦听器来优化视图的更新。：使⽤Webpack的代码分割功能，将代码拆分为多个小块，按需加载，避免打包⼀个巨⼤的⽂件。等代码规范⼯具和静态代码分析⼯具，可以发现潜在的性能问题和优化机会，并进行相应的调整。：选择⾼效的插件和加载器，合理配置它们的项，以优化构建过程和资源处理。

在上述示例中，我们通过 Object.defineProperty() 对 data 对象的 message 属性进⾏劫持，并在 getter 和 setter 中添加了相应的⽇志和更新操作。vue.js 则是采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调。通过数据劫持，Vue能够捕获数据的变化，⽽发布者-订阅者模式则确保了数据变化时的及时通知和更新。

Proxy`本身用于对象拦截，通过`new Proxy`返回的值触发`get`和`set`方法，并通过ES6的`Reflect`进行反射，动态地对被代理对象的属性进行操作。由于`Proxy`是基于对象的拦截，当对象本身是原始值时，拦截无效，响应式也就失效。而`ref`在实现响应式时通过`.value`包裹一层对象，从而解决了这个问题。问题在于每次直接将对象或数组赋值给`reactive`创建的对象时，导致`reactive`创建的响应式对象直接被新赋值的对象代理。法二：另一种解决方法是直接使用`ref`

非常火急火燎的来写这篇博客！！因为自己一开始想实现这个效果时在网上查了很久查了很多资料和博客都没有找到能有效达到效果的方法，要么就是别人说有效但是我这里会报错而且难以解决。最后终于被我自己给摸索出来了！

很多人在vue3的代码开发过程，习惯于直接把所有类型的响应式数据都用ref包裹创建。其实这样是不好的，为什么呢？

（称为"陷阱"），这些拦截器可以拦截并处理对目标对象的操作，包括属性访问、属性赋值、函数调用等。它提供了一种在访问或修改目标对象之前进行自定义逻辑的能力。等，可以根据需要选择相应的拦截器来拦截不同的操作。它还支持嵌套代理、自定义拦截器行为以及错误处理等功能，使我们能够更精细地控制和管理对象的操作行为。是ES6（ECMAScript 2015）引入的一个特性，它是一种用于。当访问或修改代理对象的属性时，拦截器会被触发，并执行相应的自定义逻辑。以下是一个简单的示例，展示了如何使用。，您可以在目标对象上。

将图片压缩后，我们会得到一个 Base64 编码的字符串，该字符串包括了压缩后的图片数据以及一些元信息，如图片格式、压缩质量等。可以通过第二个参数来设置图片的压缩质量，该参数的取值范围是0到1，其中0表示最低质量（最高压缩），1表示最高质量（最低压缩，默认值为0.92）。就是如果后续需要把压缩后的图片比如说进行上传操作，我们得得到处理后图片的Base64 编码就好办了，其实这个 Base64 编码就在眼前。这里我再提供一个vue测试代码，可以在控制台中打印出图片压缩前后的size，以及图片压缩后的回显。

经历了很多次写着写着突然页面就不响应的事情！很痛苦，然后终于找到了原因！

或者，如果你的项目中已经使用了 CommonJS 规范导入模块，你可以考虑使用工具来将这些模块转换成 ES6 模块，以便在 Vue 3 中使用。是 CommonJS 规范中的一种导入方式，而 ES6 模块规范和 CommonJS 规范是不同的，它们的语法和语义有很大的不同。在 Vue 3 中，建议使用 ES6 模块语法来导入依赖。是一个动态导入函数，它不能在静态导入的位置使用。关键字来导入 CommonJS 模块，但是在浏览器环境中，导入模块，你可以使用上面我给出的使用。在 ES6 模块规范中，我们使用。

在这个例子中，我们定义了一个响应式的style对象，并使用useRoute来获取当前的路由信息。在Vue 3中，有一个非常方便的API可以观察响应式数据的变化，即watchEffect。watchEffect是一个新的API，可以自动跟踪响应式数据的变化，并在其发生变化时执行回调函数。总之，使用watchEffect可以非常方便地观察响应式数据的变化，并执行相关的操作。在本例中，我们将使用watchEffect和useRoute来观察路由的变化，并更新页面的样式。dataScreen页面。

defineEmit ----> [子组件向父组件事件传递]使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit。代码示列配置项的缺失，有时候我们需要更改组件选项，在setup中我们目前是无法做到的。我们需要在上方再引入一个script，在上方写入对应的export即可，需要单开一个 script。可以和普通的一起使用。普通的无法在声明的选项，例如或通过插件启用的自定义的选项。声明命名导出。

复制，点击复制后官方文档还贴心的给出了提示【已复制到剪贴板，请保持至*.json文件】可以直接在该页面引入echarts，就可以在数据大屏页面使用echarts的所有组件了。自定义好主题之后可以导出主题代码保存为一个js文件，引入目标页面在代码中使用该主题。由于项目需要一个数据大屏页面，所以今天学习了vue结合echarts的图标绘制。那么我们就到vue中创建一个js文件把我们复制的代码放进去备用。首先选择好一个主题，下载它的json版本代码。接着需要使用该主题的vue文件中导入主题。

2、使用filter循环，代码为【return this.urls.filter(item =>】1、使用foreach循环，代码为【this.urls.forEach(item =>】forEach() 方法主要是用于调用数组的每个元素，并将元素传递给回调函数。forEach(): 遍历数组需要一个回调函数作为参数。注:对于空数组不会执行回调函数。

后台管理时，最基本的一种列表就是用户列表，一般是均有修改资料和封号这样子的操作选项，而进行一些列表管理时，操作选项会根据具体内容而有所不同。解决思路是有多少种操作情况就写多少种按钮，使用vue的v-if来操作显示哪个按钮。通过 v-if指令 决定按钮的显示隐藏。我们无需对按钮进行过多的变换。

接收变量的时候也十分方便，只需要按照数据库中名称传json数据即可，比如我下面这个方法的需求只是根据id修改用户的昵称，那么我传参数只需要写入id和nickname。就是只需要我们传入一个User类型的变量，程序就会根据user.getId()找到需要操作的数据。所以我们只需要传入一个POJO类型的变量，即可根据id或其他什么字段进行修改。后端接收参数只需要用User user来接收即可，程序会自动帮我们装配好。上图中自动提示的方法中的updateById方法。然后把该变量中不为null的变量进行修改。

12.2明明跟着Vue3的视频学的，结果今天发现我学的都是vue2的写法，导致网上查阅资料调用组件有很多东西看不懂。设置lang=ts也用不了，所以去查文档，增加配置了。-安装vue-cli手脚架解决lang="ts"报错http://t.csdn.cn/7fxc4·去学习了解了支付宝的支付接口，蚂蚁金服开发平台，还没整明白。02 支付宝开发者入驻_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Ft41167fk/?p=2&vd_source=c09a3cfb

今天写后端，发现一个问题，我的其他页面之间都可以正常跳转显示，但是我的其中一个页面（简称U页面），我跳转到U页面时还可以显示，但之后点击其他页面就无法正常显示了（能跳转不能显示），前端后端也都不报错。找了很久也没发现问题。一开始还以为是我后台既使用了vue2的写法也使用的vue3的写法导致不兼容。然后突然就看了下浏览器报的警告查了一下，查到这篇博客，和我问题一样！vue3警告：Component inside renders non-element root node that cannot b - 掘金

直接使用this.$store.state.xxx是不行的，会报错。想获取很简单。先引用store文件，再调用。例如我项目中把token存入store。在封装请求的http.js文件中，这样子获取。

1

后面前端改好发送请求的时候，又发现前端没有填写数据的字段我初始化为"",传来就不会被识别为空null，而是识别为两个双引号”“，导致我后端又报错，本来是想在后端加上不等于""和不等于null的双重判断，后来想了想直接把这个步骤放在了前端拼接字符串的那一步，否则请求地址会非常累赘和不好看。（上图中已经完善此处）下图为第一个句子的执行结果，为传入的是String类型的查询参数，可以看到，查询结果只是取了前四条，并没用把cost限制在0到50之间。然后呢，后端写条件查询的时候，写动态查询，报了好几轮错误。

Vuex是实现组件全局状态(数据）管理的一种机制，可以方便的实现组件之间数据的共享。 像一个仓库一样！（一般情况下，只有组件之间共享的数据，才有必要存储到vuex中;对于组件中的私有数据，依旧存储在组件自身的data中即可。）vuex中的主要核心概念如下: StateState提供唯一的公共数据源，所有共享的数据都要统一放到Store的 State中进行存储。组件访问State中数据法一：通过 $store.state.全局数据名称 获取。法二：按需导入 对比两种方式： 对于Vuex，不允许直接修改sto

插槽（Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。基础用法示例：提示：没有预留插槽的内容会被丢弃，也就是说，如果在封装组件时没用预留任何的插槽，则用户提供的任何自定义内容都会被丢弃。相反，如果预留了插槽，但是没有设置插槽的内容，插槽位置也不会显示任何东西，所以我们可以为预留的插槽提供后备内容（默认内容）。

我想要在在不同的body组件（即相对于我的main组件来说它的内组件）中进行一些点击操作时更换外部main组件的body部分。比如我在最开始的body组件中进行了搜索，我就希望搜索按钮点击之后，把body部分换成搜索结果页面的组件。我一开始的方法是 监听+emit改变外组件的值（我改变的就是body处使用的组件的名字）我的整个项目界面的top和foot是不需要改变的，而body的内容会频繁改变。是可以实现在子组件内部改变外部组件的值，从而更换body处的组件的。这样子才体现了vue的优秀之处。

只需要在router-link中加上属性 target="_blank" 即可。vue是单页面应用，但是也可以实现在新窗口中打开新页面。

把图片作为文字背景，并使图片自适应。

首先展示官网给的模板。

在vue3中，可以定义多个根节点，而vue2的template中所有内容必须包含在同一个根节点中，且有且仅有这一个根节点。

但由于前端用params包裹起来了，后端接收的确是params内部的username和password，所以前后端对应不上，导致前端的post请求找不到对应的接口，找不到对应的接口所以报了404错误。表面上看是跨域问题，但是我换一个get方法却可以正常响应，不会报跨域问题，查询资料发现，有时候会因为bad request导致程序以为是跨域的问题，引起跨域问题的报错。或者说，两边都没有问题，只是没有使用同一种格式，这才是问题所在。当时的前端写的，是传出去了参数的，但注意这里的参数最外层是params。

实操： 1，2：操作完这里会多两行 3，4： 写到一半学到了新东西准备封装请求，晚点搞完继续写

Vue脚手架报错： Component name "xxx" should always be multi-word vue/multi-word-component-names - 哪家磨刀 - 博客园 (cnblogs.com)方法一：更改组件名,使其符合命名规范如：驼峰命名法 或 横线拼接单词。给组件命名时没有使用驼峰命名法或横线拼接单词，实际上是。lintOnSave: false　　//关闭语法检查。的问题，语法检查时将不规范的代码当成了错误。方法二：关闭语法检测（通常）。

今天写界面的时候发现样式改变对一个页面不起作用，和另一个页面保持一致。查了资料说是第一种引入方法是全局引用，其他页面也会使用该css文件。找了半天发现是重名串用了其他css文件中的样式。把样式直接卸载style里加scoped才有用。加了scoped也没用。我一开始是这样子引入的。就限定在当前文件中啦。

比如先做好一个简易的登录页面，login.vue，然后我们还准备一个主页vue，绑定好路由配置后，其中登录按钮的方法中就this.$router.push("/main")即可。然后呢，是把页面封装为一个主键，不要写在App.vue页面中，App.vue里只需要留一个组件占位符即可。之前刚学完四小时入门vue觉得挺简单的，然后开始写的时候被路由这玩意整麻了，看了好多教程都没搞明白怎么操作，然后就又去补了一波路由，现在思路清晰多了。让初始页面转到登录页面即可。主要是用到$router.push()来操作。

这题就是个朴实无华的数学题，想明白就一下子能做出来了。

这道题当时比赛时没写出来，一直报编译错误，还以为是vector二维数组没有开辟大小导致的，后来结束发现是for循环的时候>写成了>=导致数组越界了，这个细节当时没有发现，有点可惜。气死了，这篇文章些都快写完了，然后写错了个东西我快捷键撤销一下直接给我撤没了还回不去！我们看到的p.first和p.second指的就是map中键值对的key和value，非常方便，map也可以这样子使用。，因为在红黑树中，每一个节点都要额外保存父节点和子节点的连接，因此使得每一个节点都占用较大空间来维护红黑树性质。