vue 判断同一数组内的值是否一直_vue一些笔记

vuex action:

尤雨溪在知乎回答了,区分 actions 和 mutations 并不是为了解决竞态问题,vuex 真正限制你的只有 mutation 必须是同步的这一点,只是为了devtools追踪状态变化,或者说出于单一职责原则。https://www.zhihu.com/question/48759748/answer/112823337

vue事件绑定:

vue的事件绑定,直接绑定给当前元素,打印$event中的target和currentTarget会发现两个是同一个元素,而且是原生事件,用的是addEventListener。methods里面的this指向当前实例,内部用了bind方法,再去绑定this不生效。

vue.use():

vue.ues方法会执行这个插件的instll方法,默认传入vue,这样主要是为了可以让这个插件使用项目使用的vue,而不是自己引入导致vue版本不一致,导致出现一些无法预估的错误。

父子组件生命周期:

父组件执行到beforeMount之后,子组件先执行直到mounted,之后父组件才执行mounted。销毁父组件beforeDestroy,之后子组件销毁父组件才执行destroyed。

路由:

router-link、router-view这两个组件其实就是用Vue.component注册的全局组件。且内部用mixin让每个子组件都获取router实例。

数组函数劫持:

Vue重写了数组的七个会改变原数组的方法,用函数劫持的方法实现的,类似下面:

let oldArrayMethods = Array.prototype;
let arrayMethods = Object.create(Array.prototype);
let arrayPatch = ['push', 'pop', 'unshift', 'shift', 'splice', 'sort', 'reverse'];
arrayPatch.forEach(method => {arrayMethods[method] = function (...args) {console.log('调用了' + method);return oldArrayMethods[method].apply(this, args);}
})
Array.prototype = arrayMethods;
let arr = [1, 2, 3];
arr.push(4)
console.log(arr);

Vue的nextTick:

Vue 提供的nextTick能保证是在DOM渲染之后执行,主要是内部在调用这个之前会在试图渲染方法执行之后调用,内部会通过判断兼容使用微任务还是宏任务,所以要注意不能把这个nextTick跟微任务process.nextTick混淆。

请求放在生命周期哪个合适:

很多请求会放在created里面,这时候操作dom会失败,因为请求是异步的,一般也不会出现问题,但是建议统一放mounted,主要是这时候dom也就渲染了。而服务的渲染不支持mounted方法,统一放created中。

v-html:

v-html会造成XSS攻击,使用的时候必须确保内容是可信的,而且v-html会造成内部的子元素都被替换掉。

vue是渐进式框架:

你可以只用做模板引擎,或者加上vue提供的路由,或者加上全局状态管理vuex,或者直接使用vue-cli直接搭建项目。你可以在现有程序使用vue,也可以用vue搭建工程。

vue核心是响应式:

通过对data数据变更实现页面更新。

vue的mvvm理解:

view视图层,viewModel是vue的实例,也就是vm(new Vue),model数据,也就是vue里面的data。

vue响应式原理:

vue通过发布订阅和数据劫持的方法对数据进行监听,会给每个默认属性进行监听,深层次的也会递归进行监听,会对改变原数组的数组方法进行函数劫持。因为要对数据进行递归监听,这也是vue性能的一个痛点。到了vue3用proxy进行重写,不需要递归监听,但是proxy兼容性不好。

vue数据不更新到页面:

之前分享过vue数据不更新渲染,其实是错的,vue只能监听默认的属性,数组的索引发生变化或者改变数组长度也不会触发更新。比如你在data定义一个obj: {},然后在其它地方给obj定义一个属性,或者你定义一个数组arr,,然后直接arr[0]赋值,这些都不会进行监听,但是数据是变化的。有可能通过这两个方法页面发生变化了,那是因为有其它监听的数据发生变化,页面重新渲染,会顺带帮你把数据渲染到页面。使用$set可以监听或者$ForceUpdate会强制渲染。

vue中render、template、el:

vue中如果render、template、el都存在的情况下,render优先级最高,接着是template,最后是el:

var vm = new Vue({render: function(h){return h('div', {}, '这是render属性方式渲染。')},template: '<div>这是template属性模板渲染。</div>',el: '#app',});

vue中提供的template:

vue提供的template是无意义的,具有隐藏性、无效性、任意性,如果你用v-if的时候,使用template包裹,渲染的时候template会不存在。v-show不能用在template上。循环的key也不能放在template上。

v-if、v-show、v-for:

v-if是控制dom是否存在,v-show是控制样式display,v-if会重新渲染元素或者组件,并且重新执行涉及的函数。v-for的优先级高于v-if,性能会差一些,所以尽量不要一起使用。

v-model其实是语法糖:

v-model其实是:value和@input方法的语法糖,下面两个等价:

<input type="text" :value="msg" @input="(e) => msg = e.target.value"><input v-model="msg">

vue组件核心:

组件的优点很多,重用、易维护、解耦等,vue中组件还有一个核心的优点,就是组件级更新,因为每个组件都有自己一个watcher,数据更新了只是重新渲染自己组件,而不会是整个页面。

.vue文件

.vue的script中的export default出去的对象,相当于Vue.extends({})里面的这个对象。import .vue文件,获取的是一个对象,可以打印看看,里面有render函数等。

$bus:

给vue挂一个new Vue,因为每个vue实例都有$on、$emit、$off的事件,用来任意组件监听、通信,但是无法控制监听命名重复,不适合大规模使用,而且必须先监听再发布:

Vue.prototype.$bus = new Vue();

this.$once('hook:beforeDestroy', function () { picker.destroy() }); Vue3.0确实是新增了hook,有点靠近了react,但是这个是很早之前就出的,很奇怪,为什么没多少有介绍到。最简单的使用场景就是监听滚动或者计时器在组件销毁的时候清除,这段代码相当于在组件销毁的时候执行picker.destroy(),在vue官网/教程/深入了解组件/处理边界情况/程序化的事件监听器可以看看API。

@hook:

说实在的,这个语法我中文文档和英文文档都查了很久,没发现API有这个语法,但是确实是能实现,就是监听外部组件的生命周期

当子组件执行mounted的时候,父组件就会执行childrenMounted方法,这在一定场景应该是有用的。

.sync修饰符:

之前就说过v-model是一个双向绑定的语法糖,vue还提供了.sync这个修饰符对一个props进行双向绑定,其实就是v-bind和v-on的语法糖,某些场景比使用props传递更理想。

Component动态组件:

前几天才觉得react可以把组件当作参数传递非常神奇,想想之前在做页面内tab切换的时候,一堆的v-if去判断,其实直接使用内置的动态组件更省事,以前知道这个,但是居然没有在项目中使用:

Object.freeze():

Vue会递归监听data里面所有的对象,这是性能痛点之一,而这个方法,可以冻结一个对象,如果在vue里面声明的数据只是第一次渲染使用,可以直接冻结,不进行监听,如果你想重新进行监听可以直接赋值也是可以的,这方法也可以作为一个长列表性能优化使用:

data里面定义:

obj1: Object.freeze({a:1}),obj2: {b: 2}mounted(){console.log(this.obj1)console.log(this.obj2)}

输出:

028144a991f4dffdd3028346979bc26f.png

HTTP协议通信最耗费时间的是建立TCP连接的过程,那我们就可以使用HTTP Keep-Alive。但是,keep-alive长时间的TCP连接容易导致系统资源无效占用。配置不当的keep-alive,有时比重复利用连接带来的损失还更大。所以正确地设置keep-alive timeout时间非常重要。浏览器对于TCP的keep-alive有连接限制4-6个。

减少HTTP请求次数将多个文件压缩打包成一个,当然也不能都放在一个文件中,因为这样传输起来可能会很慢,权衡取一个中间值。配置使用懒加载,对于一些用户不立刻使用到的文件到特定的事件触发再请求,服务器资源的部署尽量使用同源策略。服务端最好开启gzip。

JSX 语法:

HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,允许 HTML 与 JavaScript 的混写HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。原谅我之前并不能解释jsx语法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/521445.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习从业人员到底做什么?

这篇文章是系列文章的第1部分,第2部分将阐述AutoML和神经架构搜索、第3部分将特别地介绍Google的AutoML。 关于机器学习人才的稀缺和公司声称他们的产品能够自动化机器学习而且能完全消除对ML专业知识需求的承诺经常登上媒体的新闻头条。在TensorFlow DevSummit的主题演讲中&a…

黑科技揭秘:面对海量的文本翻译任务,阿里翻译团队是如何解决的

摘要&#xff1a; 对国际化企业来说语言问题是亟待突破的重要关口。面对海量的文本翻译任务&#xff0c;昂贵低效的人工翻译显然不能满足需求&#xff0c;利用计算机自动进行文本翻译的机器翻译才是解决这个问题的关键。阿里翻译团队在机器翻译领域做了大量技术储备&#xff0c…

(需求实战_进阶_03)SSM集成RabbitMQ 路由模式关键代码讲解、开发、测试

接上一篇&#xff1a;&#xff08;企业内部需求实战_进阶_02&#xff09;SSM集成RabbitMQ 关键代码讲解、开发、测试 https://gblfy.blog.csdn.net/article/details/104214033 上一篇给大家介绍了在RabbitMQ 的管控台中&#xff0c;将队列绑定到指定的交换机上&#xff1b;这片…

在计算机中dos代表什么意思,Boot是什么意思

Boot是什么意思如果你去问一个学计算机的人&#xff0c;“启动”是计算机中的那个单词?回答一定是Boot。可是&#xff0c;Boot原来的意思是靴子&#xff0c;“启动”与靴子有什么关系呢?原来&#xff0c;这里的Boot是bootstrap(鞋带)的缩写&#xff0c;它来自一句谚语&#x…

你知道哪些情况下不该使用深度学习吗?

深度学习不适用于什么样的任务&#xff1f;依我之见&#xff0c;以下这些主要场景的深度学习弊大于利。01低成本或者低承诺问题深网是非常灵活的模型&#xff0c;有着许多架构和节点类型&#xff0c;优化器和正则化策略。根据应用&#xff0c;你的模型可能会有卷基层&#xff0…

秒后面的单位是什么_单位与国际单位制是如何由来的?

2013年国庆期的一则网络消息说&#xff0c;11万人看升旗留下了5吨垃圾。有人认为这是一则假消息&#xff0c;因为5吨&#xff1d;5000千克&#xff0c;110000500022千克/人&#xff0c;而每人携带22千克&#xff08;44斤&#xff09;的垃圾是不可能的。以前还看过一个说法&…

(需求实战_进阶_04)SSM集成RabbitMQ 通配符模式 关键代码讲解、开发、测试

背景&#xff1a; 为了减轻服务器的压力&#xff0c;现在原有项目的基础上集成消息队列来异步处理消息! 此项目是企业真实需求&#xff0c;项目的代码属于线上生产代码&#xff0c;直接用于生产即可&#xff01; 此项目采用MQ发送消息模式为:通配符模式&#xff0c;如果对Rabbi…

halo多人正在连接服务器,在线人数过低 《光晕2》PC版多人服务器下月关闭

这也许是一个让粉丝略伤感的消息&#xff0c;《光晕2(Halo2)》PC多人游戏服务器将在下个月永久关闭。343 Industries注意到服务器的峰值在线人数一直仅有20人&#xff0c;因此做出了关闭服务器的决定。343 Industries在Halo Waypoint中说道&#xff1a;“我们很遗憾地宣布&…

纯Python实现鸢尾属植物数据集神经网络模型

摘要&#xff1a; 本文以Python代码完成整个鸾尾花图像分类任务&#xff0c;没有调用任何的数据包&#xff0c;适合新手阅读理解&#xff0c;并动手实践体验下机器学习方法的大致流程。 尝试使用过各大公司推出的植物识别APP吗&#xff1f;比如微软识花、花伴侣等这些APP。当你…

【明人不说暗话】我就只讲进程与线程

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 阮一峰责编 | 阿秃进程&#xff08;process&#xff09;和线程&#xff08;thread&#xff09;是操作系统的基本概念&#xff0c;但是它们比较抽象&#xff0c;不容易掌握。最近&#xff0c;我读到一篇材料&#xff0c;发现有…

(需求实战_进阶_05)SSM集成RabbitMQ 通配符模式 关键代码讲解、开发、测试

接上一篇&#xff1a; 文章目录一、RabbitMQ 配置文件1. RabbitMQ 生产者配置文件更新二、启动项目2.1. 启动项目2.2. 清空控制台三、管控台总览3.1. 登录管控台3.2. 交换机中查看绑定队列总览四、验证测试4.4. 生产者①请求4.5. 生产者②请求五、启动RabbitMQ5.1. 进入sbin目录…

两台邮件服务器共用一个公网地址,两个不同域邮件服务器的互通

两个不同域的邮件服务的互通如图&#xff0c;有两个不同域的邮件服务器(postfix)通过一个DNS服务器实现互通。首先说明一下IP分配情况服务器1qq.cometh0(VMnet2)&#xff1a; ip:192.168.2.2 netmask:255.255.255.0 gw 192.168.2.1 hostname:mail.qq.com服务器2(qq.neteht0VMne…

希捷银河声音大_【推仔说新闻】那款硬盘它终于来了 希捷推出首款双磁臂硬盘...

经常关注科技新闻的朋友们应该都知道&#xff0c;现在机械硬盘领域可以说是被固态硬盘冲击的不清&#xff0c;而对于我们广大用户们来说&#xff0c;HDD这一个储存介质就被我们更多的用来充当仓库盘使用&#xff0c;毕竟现在的固态已经下探到白菜级别的价格了。但是对于那些HDD…

(需求实战_进阶_06)SSM集成RabbitMQ 订阅模式 关键代码讲解、开发、测试

背景&#xff1a; 为了减轻服务器的压力&#xff0c;现在原有项目的基础上集成消息队列来异步处理消息! 此项目是企业真实需求&#xff0c;项目的代码属于线上生产代码&#xff0c;直接用于生产即可&#xff01; 此项目采用MQ发送消息模式为:订阅模式&#xff0c;如果对RabbitM…

【目瞪口呆】通信机房内部长这样

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 小枣君责编 | 刘晶晶大家好&#xff0c;我是小枣君。一直以来&#xff0c;我都在努力给大家做通信知识科普&#xff0c;也写了很多有趣的文章。不过&#xff0c;文章再有趣也只是文字&#xff0c;不是实物。现实生活中&#…

NLP的ImageNet时代已经到来

摘要&#xff1a; NLP领域即将巨变&#xff0c;你准备好了吗&#xff1f; 自然语言处理&#xff08;NLP&#xff09;领域正在发生变化。 作为NLP的核心表现技术——词向量&#xff0c;其统治地位正在被诸多新技术挑战&#xff0c;如&#xff1a;ELMo&#xff0c;ULMFiT及Open…

mysql字段分隔符拆分_面试题Mysql数据库优化之垂直分表

在日常的开发工作中&#xff0c;除了JAVA相关的技术&#xff0c;打交道最多的就是Mysql数据库&#xff0c;当数据积累到一定程度&#xff0c;比如500W时就会难免出现一些慢sql&#xff0c;对数据库的优化方式有很多&#xff0c;比如通过增加合理的索引&#xff0c;今天我们来说…

python print用法不换行_python3让print输出不换行的方法

python 3.x版本print输出不换行的格式如下&#xff1a; print(x, end"") 其中&#xff0c;end"" 可使输出不换行&#xff0c;不能省略。 举例&#xff1a;输出结果&#xff1a;内容扩展&#xff1a; python3.x中如何实现print不换行 大家应该知道python中p…

使用Numpy和Opencv完成图像的基本数据分析(Part II)

摘要&#xff1a; 使用Numpy和Opencv完成图像的基本数据分析后续部分&#xff0c;主要包含逻辑运算符操作、掩膜以及卫星图像数据分析等操作 在上一节中&#xff0c;主要是介绍了图像的基本知识以及OpenCV的基本操作&#xff0c;具体内容参见“使用Numpy和Opencv完成基本图像的…

(需求实战_进阶_07)SSM集成RabbitMQ 订阅模式 关键代码讲解、开发、测试

接上一篇&#xff1a;&#xff08;企业内部需求实战_进阶_06&#xff09;SSM集成RabbitMQ 订阅模式 关键代码讲解、开发、测试 https://gblfy.blog.csdn.net/article/details/104219096 此项目采用MQ发送消息模式为:订阅模式&#xff0c;如果对RabbitMQ不熟悉&#xff0c;请学习…