最近总结7.1-7.19

最新推荐文章于 2024-11-02 15:22:06 发布

wyzqhhhh

最新推荐文章于 2024-11-02 15:22:06 发布

阅读量107

点赞数

文章标签：笔记

本文链接：https://blog.csdn.net/wyzqhhhh/article/details/130903170

版权

1.如何使用git提交代码

首先添加所有，然后提交我的描述再push进去 push完事后切换主分支pull拉取我个人分支的内容，再切换到我自己的分支取merge合并我的分支。有冲突解决冲突。

$ git add .

$ git config --global core.autocrlf true

$ git commit -m '告警外发'

$ git push

$ git checkout master

$ git pull

$ git checkout baiyun

$ git merge master

$ git push
//有冲突去解决冲突再push
$ git add .

$ git commit -m '解决冲突'

$ git push

2.nextTick的时使用

(1).语法:this.$nextTick(回调函数)
(2).作用:在下一次DOM更新结束后执行其指定的回调。
(3).什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

nexttick使用场景

vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化

适用场景：
第一种：有时需要根据数据动态的为页面某些dom元素添加事件，这就要求在dom元素渲染完毕时去设置，但是created与mounted函数执行时一般dom并没有渲染完毕，所以就会出现获取不到，添加不了事件的问题，这回就要用到nextTick处理

第二种：在使用某个第三方插件时，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法，例如:应用滚动插件better-scroll时

第三种：数据改变后获取焦点

何为$nextTick

因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的。
详细解读：

我们先来看这样一个场景：有一个div，默认用 v-if 将它隐藏，点击一个按钮后，改变 v-if 的值，让它显示出来，同时拿到这个div的文本内容。如果v-if的值是 false，直接去获取div内容是获取不到的，因为此时div还没有被创建出来，那么应该在点击按钮后，改变v-if的值为 true，div才会被创建，此时再去获取，

handleEdit(todo) {
if (todo.hasOwnProperty('isEdit')) {
todo.isEdit = true //绑定了一个input输入框的是否可见性，即如果=true，输入框才可见
} else {
this.$set(todo, 'isEdit', true) //设置isEdit为true(即input框可见)
}
// nextTick指定的结点会在Dom更新之后执行
this.$nextTick(function (){
this.$refs.inputTitle.focus() //是该输入框获取焦点
})
},

我们想要实现的效果是：输入框一可见就获取焦点。如果我们直接写this.$refs.inputTitle.focus()不在外面嵌套$nextTick，就会出错，这是因为：Vue是在执行完这个函数之后再判断数据发生了变化，重新渲染模板，也就是说函数执行完之后input框才可见，而添加焦点是在函数中执行，即没有input框就进行获取焦点，这显然是不可以的。所以vue为我们提供了nextTick方法，nextTick方法中的函数会在VUE渲染完页面之后再执行，这样就可以正常获取焦点了。

=======================================================================

简而言之：

1.获取数据更新之后的DOM

2.created()中进行DOM操作

3.获取元素宽度

在vue的生命周期 created() 钩子函数中进行 dom 操作，一定要放在 $nextTick() 函数中执行。在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的代码放进 nextTick() 的回调函数中。
mounted() 钩子函数，因为该钩子函数执行时，所有的 DOM 挂载和渲染都已完成，此时在该钩子函数中进行任何 DOM 操作都不会有问题
在数据变化后要执行某个操作，而这个操作需要随数据改变而改变DOM结构时，这个操作都是需要放置 $nextTick() 的回调函数中。

原理

我们修改一个属性的时候通过$refs获取dom或组件的时候，拿到的值是没有更新过的因为在vue中 dom渲染是异步执行的也就是我们还没拿值的时候dom还没有更呐！

所以啊官方为我们提供了 $nextTick方法原理就是在DOM更新完成后执行回调函数

1、异步说明

1) vue是异步执行dom更新的，一旦观察到数据变化，vue就会开启一个队列，然后把在同一事件循环当中观察到数据变化的watcher推送进这个队列，如果这个watcher被触发多次，只会被推送到队列一次，这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和dom操作，这样可以提高渲染效率。

2) 如果要获取更新后的dom元素，可以使用vue内置的$nextTick方法，参数是一个函数；它的作用类似setTimeout，进行执行异步的操作。

2、事件循环说明

vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick可以获取数据更新后最新dom的变化。

this.$refs()常和nextTick()一起用，例如：

(114条消息) vue中$refs 和 $nextTick的基本使用_奥特曼　的博客-CSDN博客

比如项目中的哪里需要用到，为什么第二次不渲染，如实习项目中告警外发的

1.有时需要根据数据动态的为页面某些dom元素添加事件，这就要求在dom元素渲染完毕时去设置，但是created与mounted函数执行时一般dom并没有渲染完毕，所以就会出现获取不到，添加不了事件的问题，这就要用到nextTick处理

2.有一个div，默认用 v-if 将它隐藏，点击一个按钮后，改变 v-if 的值，让它显示出来，同时拿到这个div的文本内容。如果v-if的值是 false，直接去获取div内容是获取不到的，因为此时div还没有被创建出来，那么应该在点击按钮后，改变v-if的值为 true，div才会被创建，此时再去获取.

vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在下一个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。所以如果你用一个for循环来动态改变数据100次，其实它只会应用最后一次改变，如果没有这种机制，DOM就要重绘100次，这固然是一个很大的开销。

Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver，如果都不支持，就会采用setTimeout代替。

知道了Vue异步更新DOM的原理，就理解了。事实上，在执行this.showDiv = true时，div仍然还是没有被创建出来，直到下一个vue事件循环时，才开始创建。$nextTick就是用来知道什么时候DOM更新完成的，不加的话就会报错。
<div id="app">
<div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
    el : "#app",
    data:{
        showDiv : false
    },
    methods:{
        getText:function(){
            this.showDiv = true;
            this.$nextTick(function(){
                  var text = document.getElementById('div').innnerHTML;
                 console.log(text);  
            });
        }
    }
})
</script>

所以啊官方为我们提供了 $nextTick方法原理就是在DOM更新完成后执行回调函数

3.keeplive的使用 keeplive 用active和actived一块用

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keep-alive

举个栗子:

当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：

首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > … … > beforeRouteLeave > deactivated
再次进入组件时：beforeRouteEnter >activated > … … > beforeRouteLeave > deactivated

缓存后如何获取数据
解决方案可以有以下两种：

beforeRouteEnter
actived

keepalive是给页面设置缓存，避免每一次进入页面都请求数据，可以很好的减少服务器压力，主要场景用于列表页进入详情页，并且列表页传递给详情页的参数和上一次传递的参数没有变化，那具体怎么使用呢，
首先：
在router.js中配置当前路由的里边设置 meta: { keepAlive: true },APP.vue设置
这样这个页面就设置好缓存了。
如果之后这样简单的设置的话会导致每次进入页面都不会请求数据，数据得不到更新，所以vue有一个专门配合keepAlive使用的 activated（），
页面设置keepAlive缓存后，在页面中activated（）的代码可以生效，进入详情页必定会传递一个id的唯一标识，然后变量存储，可以在actived里边判断父级页面传值是否和存储的值一致，然后根据判断如果不一样就继续请求接口

4.computed 和watch和methods的使用搞清楚项目那个怎么实现的！！！3个方法

method：一般用于事件处理函数方法调用

compute：一般用于属性的计算

watch：主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作

区别

1.methods中没有缓存机制，页面中调用了多少次就要执行多少次

2.compute中有缓存机制，当依赖没有发生变化时，页面中使用多次只用执行一次，当依赖发生变化时，才会重新执行

3.watch中也没有缓存机制，观察某一个属性的变化，重新计算属性的值

4.compute更适合用于多个属性同时影响一个属性的多对一情况，watch更适合用于一个属性影响多个属性的一对多的情况

总结
watch是观察某一个属性的变化，重新计算属性值，computed是通过所伊拉德属性变化重新计算属性值。

大部分情况下watch和computed几乎没有差别。但是如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择

methods则作为函数调用以及事件处理函数

Computed：

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
computed擅长处理的场景：一个数据受多个数据影响，如购物车计算价格

Watch：

当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用watch选项允许我们执行异步操作。这些都是计算属性无法做到的。
watch擅长处理的场景：一个数据影响多个数据，如搜索数据

watch:一条数据变化影响多条数据变化

举例：费用应收总计受多条应收数据变化而变化

watch:一条数据变化影响多条数据变化

举例：当时间变化，表格的表头时间也跟着变化。

然后我们可能有其他的计算属性依赖于 A ，这时候，我们就需要缓存。也就是使用 computed 而不是 methods。但对于每次都需要进行重新计算的属性比如下面这个函数的返回值 function () { return Date.now() } ，我们最好使用 methods。
总之：数据量大，需要缓存的时候用 computed ；每次确实需要重新加载，不需要缓存时用 methods 。

5.tabs栏的使用渲染不同的页面

6.代码的封装

7.if else 的嵌套问题

多层嵌套有时候会不好使，所以else if（）要写全，写明白

8.watch监听获取客户端

watch: { componentsKey: {

immediate: true,

handler(newKey) {

this.handleComponentsKeyChange(newKey); }, }, },

methods: {

handleComponentsKeyChange(key) {

if (key === "alarm") {

this.form = { name: "", description: "", type: "", clientIds: [], };

} else if (key === "rsyslog") {

this.form = { name: "", host: "", port: "", protocol: "", ident: "", facility: "", };

} else if (key === "kafka") {

this.form = { name: "", servers: "", topics: "", };

} else if (key === "file") {

this.form = { filePath: "", }; }

console.log(this.form); }, }

9.不同的form渲染提交不同的新增内容

使用父子组件props传值传递components的值，再在子组件props接收，

10.get post 请求

post请求的请求参数是不会跟在url后面的，get请求才会跟在后面，所以大家才说post请求比get请求安全。

POST和GET请求都是向服务器提交数据，并且都会从服务器获取数据。
区别：
传送方式：GET通过浏览器的地址栏进行传输，POST通过报文传输。

传送长度：GET参数有长度限制(受限于url长度)，而POST无限制。

从浏览器发送的数据包：GET产生一个数据包，而POST则产生两个数据包；
对于GET的请求浏览器会把http header和data一并发送出去，服务器响应200(返回数据)
对于POST的请求浏览器先发送header，服务器响应100 continue,浏览器再发送data，
服务器响应200 ok(返回数据)。

从耗时来看：因为POST请求需要两步，所以耗时高，而GET请求则相对耗时低，速度更快。

从安全性来看：因为GET传输数据是通过URL请求，以字段=value的形式，置于URL后，并用?连接，这个过程用户是可见的，可能会泄露用户的私密信息，如账号密码等。
所以不安全，而POST传输数据通过HTTP的POST机制，将字段与对应值存在请求实体
中发送给服务器，这个过程对用户是不可见的。相对GET来说安全性高些。

从支持的字符集来看：GET方式只能支持ASCII字符，向服务器传的中文字符可能会乱码，POST支持标准字符集，可以正确传递中文字符

11.使用echarts

选择哪种渲染器

一般来说，Canvas 更适合绘制图形元素数量较多（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉特效。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、并且用户使用浏览器内置的缩放功能时不会模糊。

选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。

在软硬件环境较好，数据量不大的场景下，两种渲染器都可以适用，并不需要太多纠结。
在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：
- 在需要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略的说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如水球图等，SVG 渲染器可能效果更好。
- 数据量较大（经验判断 > 1k）、较多交互时，建议选择 Canvas 渲染器。
12.v-for知识点

注意：不推荐v-for和v-if同时用在同一个元素上。因当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级。这意味着 v-if 将分别重复运行于每个 v-for 循环中。