有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？ 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。 这是一个非常简单的解决方案。 当然，你可能会对其他方式会更感兴趣： 简单粗暴的方式：重新加载整个页面 不妥的方式：使用 v-if 较好的方法：使用Vue的内置forceUpdate方法 最好的方法：在组件上进行 key 更改 简单粗暴的方式：重新加载整个页面 这相当于每次你想关闭应用程序时都要重新启动你的电脑。 这种方式或许有用，但这是一个非常糟糕的解决方案，不要这样做，我们来看看更好的方法。 不妥的方式：使用 v-if v-if指令，该指令仅在组件为true时才渲染。 如果为false，则该组件在DOM中不存在。 来看看，v-if 是怎么工作的，在template中，添加v-if指令：
|
1 2 3 |
<template> <my-component v-if="renderComponent" /> </template> |
在script 中，使用nextTick的方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> export default { data() { return { renderComponent: true, }; }, methods: { forceRerender() { // 从 DOM 中删除 my-component 组件 this.renderComponent = false; this.$nextTick(() => { // 在 DOM 中添加 my-component 组件 this.renderComponent = true; }); } } }; </script> |
上面的过程大致如下： 刚开始 renderComponent设置为true，因此渲染 my-component 组件 当我们调用forceRerender时，我们立即将renderComponent设置为false 我们停止渲染my-component，因为v-if指令现在计算结果为false 在nextTick方法中将renderComponent设置回true 当v-if指令的计算结果为true时，再次渲染my-component 在这个过程中，有两个部分比较重要 首先，我们必须等到nextTick，否则我们不会看到任何变化。 在Vue中，一个 tick 是一个DOM更新周期。Vue将收集在同一 tick 中进行的所有更新，在 tick 结束时，它将根据这些更新来渲染 DOM 中的内容。如果我们不等到next tick，我们对renderComponent的更新就会自动取消，什么也不会改变。 其次，当我们第二次渲染时，Vue将创建一个全新的组件。 Vue 将销毁第一个，并创建一个新的，这意味着我们的新my-component将像正常情况一样经历其所有生命周期-created，mounted等。 另外，nextTick 可以与 promise 一起使用:
|
1 2 3 4 5 6 7 8 |
forceRerender() { // 从 DOM 中删除 my-component 组件 this.renderComponent = false; this.$nextTick().then(() => { this.renderComponent = true; }); } |
不过，这并不是一个很好的解决方案，所以，让我们做 Vue 想让我们做的 较好的方法：forceUpdate 方法 这是解决这个问题的两种最佳方法之一，这两种方法都得到了Vue的官方支持。 通常情况下，Vue 会通过更新视图来响应依赖项中的更改。然而，当我们调用forceUpdate时，也可以强制执行更新，即使所有依赖项实际上都没有改变。 下面是大多数人使用这种方法时所犯的最大错误。 如果 Vue 在事情发生变化时自动更新，为什么我们需要强制更新呢？ 原因是有时候 Vue 的响应系统会让人感到困惑，我们认为Vue会对某个属性或变量的变化做出响应，但实际上并不是这样。在某些情况下，Vue的响应系统根本检测不到任何变化。 所以就像上一个方法，如果你需要这个来重新渲染你的组件，可能有一个更好的方法。 有两种不同的方法可以在组件实例本身和全局调用forceUpdate：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 全局 import Vue from 'vue'; Vue.forceUpdate(); // 使用组件实例 export default { methods: { methodThatForcesUpdate() { // ... this.$forceUpdate(); // ... } } } |
重要提示：这不会更新任何计算属性，调用forceUpdate仅仅强制重新渲染视图。 最好的方法：在组件上进行 key 更改 在许多情况下，我们需要重新渲染组件。 要正确地做到这一点，我们将提供一个key属性，以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变，则不会更改组件，但是如果key发生更改，Vue 就会知道应该删除旧组件并创建新组件。 正是我们需要的！ 但是首先，我们需要绕一小段路来理解为什么在Vue中使用key。 为什么我们需要在 Vue 中使用 key 一旦你理解了这一点，那么这是了解如何以正确方式强制重新渲染的很小的一步。 假设我们要渲染具有以下一项或多项内容的组件列表： 有本地的状态 某种初始化过程，通常在created或mounted钩子中 […]
View Details一、前言 ci/cd 持续集成持续交付，开发人员尝尝会遇到一些重复工作，比如一个asp.net的网站代码，写完之后要发布，然后再将发布内容移动到部署的服务器上再进行部署，就算你只改了一个页面上的一个字，也要将之前的发布部署过程重新做一遍。 CI 解决了这个重复性问题，开发人员只需git push 提交代码，剩下的工作交给CI , 做CI工作的有gitlab-ci/cd Jenkins k8s等，中小项目gitlab-ci比较合适，因为它更轻量级一些，本篇仅讨论gitlab的cicd功能。 二、环境 IP 角色 192.168.10.202(ubuntu) gitlab 192.168.10.208(centos) git,docker,gitlab-runner gitlab git docker 三者的安装 略。且本篇是以docker镜像方式部署 上图为gitlab-ci的过程，其实它只是省略了一些我们的手动发布部署过程，将其自动化，但原来的流程还是一个不能少。所以，我们要进行的第一步，就是手动实现一遍流程。 三、手动实现一遍 (gitlab服务器) 创建代码仓库—> (开发PC) git clone —> (开发pc) 修改代码，添加dockerfile —> (开发pc) git push —> (部署服务器) git pull —> (部署服务器) docker build ，docker run 1、创建代码仓库 在创建之前，需要在使用git的机器上设置好ssh，可以参考之前的https://www.cnblogs.com/hallejuayahaha/p/11996332.html 要注意的是，在部署机器上，gitlab-runner安装好后，需要添加一个gitlab-runner的用户，需要添加这个用的ssh，因为在ci自动化后，在部署服务器上的操作都是由这个用户来做的，所以不仅要添加它的ssh，也要docker 免去sudo的指令。 总之就是让gitlab-runner用户，在做部署过程中，不要受到权限的阻碍。 ******docker免去敲sudo******* 在安装完docker之后，也会出现一个docker用户组，将你要免去敲sudo的用户添加进去，就可以了
|
1 |
sudo usermod -aG docker gitlab-runner |
添加代码仓库 并将一个.netcore项目创建进去 添加dockerfile文件，仅需在项目上右键，docker支持，vs就可以自动添加。然后git push 这样开发pc端的代码就都提交到gitlab服务器上了， 2、部署端git pull ，docker build ， docker run 镜像已经成功启动，打开浏览器，输入ip + 暴露出来的端口8090 PS: .NETCORE web中，startup.cs文件中，有 app.UseHsts(); app.UseHttpsRedirection(); 这两行要注释掉，不然网站回一直往https跳转，没法进入http的80端口 整个手动流程成功。 […]
View Details使用 DATE_FORMAT(get_date, '%Y-%m-%d') 函数截取。 其中：get_date 是需要截取的字段名；’%Y-%m-%d' 是截取后的日期格式。 select date_format('1997-10-04 22:23:00′,’%y %M %b %D %W %a %Y-%m-%d %H:%i:%s %r %T'); 结果：97 October Oct 4th Saturday Sat 1997-10-04 22:23:00 10:23:00 PM 22:23:00 get_date = "2006-12-07" SELECT count(*) FROM t_get_video_temp Where DATE_FORMAT(get_date, '%Y-%m-%d')=’2006-12-07′; SELECT count(*) FROM t_get_video_temp Where get_date like '2006%-07%'; from:https://blog.csdn.net/hlbt0112/article/details/50600191/
View Details