vue回顾系列
文章平均质量分 84
归纳Vue的一些零零散散的知识点,总结项目中可用到的小技巧,记录会比较划水,切勿当一个系统的学习系列来看待。
庞囧
主业是一个纯前端打字员,生活与工作的平衡点是我的追求。
展开
-
【vue回顾系列】25-一图看懂生命周期,并教你怎么口述出来
这张图是我在官网图的基础上修改的,珍藏了一年多,可以放出来了。原创 2021-09-20 13:13:53 · 367 阅读 · 0 评论 -
【vue回顾系列】24-事件绑定的有关知识点记录
这篇文章可不看了,官方文档更新后很详细。在实现功能时,一定要先看有什么修饰符可以代替!一定要先看有什么修饰符可以代替!一定要先看有什么修饰符可以代替!。原创 2021-09-19 21:17:17 · 264 阅读 · 0 评论 -
【vue回顾系列】22-数据响应式原理补充-Array的变化侦测,以及如何更新视图
【vue回顾系列】18-数据响应式原理之Object的变化侦测大致分为两个阶段。【vue回顾系列】03-什么是模板编译,vdom以及它的更新机制是怎么样的解析模板,生成render函数。触发响应式前半段流程,监听data属性(第一次只会触发getter)。执行render函数,生成vNode,视图层渲染。修改data触发了setter,走响应式后半段流程。重新执行render函数,生成新的vNode执行patch(旧vNode, 新vNode),diff算法更新视图。原创 2021-08-22 15:26:32 · 270 阅读 · 0 评论 -
【vue回顾系列】21-常用的组件之间数据传递的方法
这个是用来反向修改str的。如果像高度定制化v-model逻辑,需要在子组件中加入modelmodel : {prop : 'aaa' , // 表明v-model传进来的变量,由props的aaa接收 event : 'sonChange' // 表明子组件可以通过sonChange这个方法可修改aaa变量,这样就可实现双向修改绑定 } , props : {// 用props接收v-model传进来的变量 aaa : {原创 2021-04-06 19:31:50 · 667 阅读 · 0 评论 -
【vue回顾系列】20-大白话讲解vue-router路由实现的基本原理,保证让你绝对能懂!
文章相较于之前做了删减,将稍微深入一点的知识点(例如源码,拓展)和一些表述比较乱的地方剔除,目的是为了能够用最小精力去记住,并且输出。在过去的前后端未分离时代,页面的每次跳转都是请求对应的html文件到浏览器进行渲染,页面才能展示。而现在前后端分离时代,客户端一次性加载大部分的前端文件,url变化时,不用向后台请求新的html文件,只需要将当前页面内的html内容进行更换,渲染,就可以实现页面内容的切换。这就是单页面,简称SPA。原创 2021-03-28 12:34:53 · 1314 阅读 · 0 评论 -
【vue回顾系列】19-你真的懂nextTick方法了吗?
文章目录前言概念什么是下次DOM更新周期DOM的大致更新过程一次性渲染例子setTimeOut同一轮事件循环中多次执行nextTick应用场景可与watch联用获取最新DOM数据获取v-if为true之后的DOM数据dom元素添加事件第三方插件问题尾巴前言需要先明白两个概念:虚拟DOM以及事件循环机制。概念nextTick 是个vue生命周期相关的实例方法 vm.$nextTick ,并赋予了vue的原型成为全局方法 Vue.prototype.$nextTick 。它接收一个回调函数作为参数,作原创 2021-03-27 22:11:39 · 644 阅读 · 0 评论 -
【vue回顾系列】18-数据响应式原理之Object的变化侦测
文章目录对象如何监测Object.defineProperty形参特性注意事项收集依赖对象如何监测可以通过ES5的Object.defineProperty和ES6的proxy,vue2现在采用的是ES5的方法,原因是浏览器厂商对新版JS支持的问题,但会有很多缺陷,所以尤大大以后会使用ES6的方法去重写这部分的代码。Object.defineProperty首先记录一下这个原生方法的使用方式Object.defineProperty(obj,'xxx',fn)形参第一个参数写要对哪个对象修改原创 2021-03-27 18:31:26 · 296 阅读 · 0 评论 -
【vue回顾系列】17-:class和:style绑定的积累
一开始学vue的时候,class和style的各种绑定方法总是记不住,所以之前开了这篇记录,现在回过头来看还是记录的很全滴。给自定义组件绑定class时,会在子组件的根标签上显示。原创 2021-03-07 18:20:49 · 265 阅读 · 0 评论 -
【vue回顾系列】15-Router的补充:参数传递、钩子函数(路由守卫)
由于有官方文档,就只记录自己用到的部分了。详情移步官方文档。原创 2021-02-28 17:20:11 · 511 阅读 · 0 评论 -
【vue回顾系列】14-Router的基本使用
文章目录前言在router/index.js中配置路由别名嵌套路由命名视图路由重定向路由meta动态路由匹配在模板router-link自带属性修改触发事件修改默认标签类型添加触发样式router-view自带属性加样式页面跳转方法通过标签跳转--声明式导航通过方法跳转--编程式导航this.$router.push()this.$router.replace()this.$router.back()this.$router.forword()this.$router.go()前言由于篇幅限制,就先不讲原创 2021-02-27 16:58:20 · 212 阅读 · 1 评论 -
【vue回顾系列】13-状态管理vuex的简单理解与个人使用记录
先看看我们的单向数据流的过程(从vuex的官方文档嫖来的一个表示“单向数据流”理念的简单示意)state:驱动应用的数据源view:以声明方式将 state 映射到视图actions:响应在 view 上的用户输入导致的状态变化如果严格按照单向数据流的思想去做开发,当遇到同一个变量(状态)在多个组件中通过子父传递的方式去使用,并伴随增删改查时,就会显得很麻烦不易维护和开发。并且该状态与组件间的粘性太强了,特别是组件树庞大的时候。原创 2021-02-18 23:22:26 · 461 阅读 · 0 评论 -
【vue回顾系列】11-使用vue-ref插件实现跨级获取组件实例
文章目录使用场景vue-ref的使用安装与引入在根组件中提供api链条下的子组件对于普通dom节点vue-ref的优点使用场景举个例子啊,简单的单链条组件dom树平时不跨层的第一层的A组件获取第二层的A组件很容易,直接一个ref的官方api搞定,但是如果有这样以下的跨级场景:Index要获取第二层的A组件实例第二层的A组件想获取Index实例第二层的B组件想获取第二层的A组件实例是不是就比较麻烦,使用传统的方法解决也是麻烦的,白嫖一下别人写的传统方法哈哈this.$parent //原创 2021-01-31 14:48:04 · 1227 阅读 · 5 评论 -
【vue回顾系列】10-彻底搞清楚v-for为什么要写key这个唯一标识符
适合已经会使用vue,但从来没去了解key的作用是什么的小伙伴观看。建议先看【vue回顾系列】03-什么是模板编译,vdom以及它的更新机制是怎么样的,了解diff算法。第一,当进行逆序添加、逆序删除等破坏顺序操作时,会重新渲染,导致性能效率低的问题;第二,容易照成显示错位的问题出现;原创 2021-07-18 14:11:15 · 1347 阅读 · 1 评论 -
【vue回顾系列】09-provide/inject的学习,链式信息传递
文章目录概念使用非响应式响应式与vuex的区别与props的区别缺点概念provide/inject这是一个组件的链式通信,provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法,而在任何后代组件中,我们都可以使用 inject 来接收 provide 提供的数据或方法。用inject的组件会不断向上找拥有provide的父组件,知道找到为止。这个通信的方法可能做业务的时候用不到,但是去开发底层的一些通用组件就会用到。使用非响应式一般是传基本类型时,父组件改变该传递的值了,子组原创 2021-01-24 22:32:09 · 320 阅读 · 0 评论 -
【vue回顾系列】08-关于watch监听的小小总结
文章目录概念怎么写初始化监听深度监听监听data状态监听某个具体的状态监听路由的变化监听整个路由只监听个别参数监听计算属性监听props的数据概念用于监视某个状态的改变,是在视图层更新之后,监听的值改变了,才执行的监听,所以并不是数据一更新就立马监听到了。触发顺序在$nextTick()之前。怎么写// 平时可简写watch: { xxx(newVal, oldVal) { // ... }}// 默认的写法应该是,如果自己写handler内部,相当于重构了监听函数watch:原创 2021-01-24 21:18:43 · 246 阅读 · 0 评论 -
【vue回顾系列】07-计算属性的良心小总结
文章目录计算属性特点用处注意与methods的区别与watch的区别完整写法getset计算属性由一个已知数据(这个已知数据一般是data中的,不能是全局的),通过逻辑计算得到一个新的数据,可直接当数据使用。特点1 依赖固定的数据类型2 可以被缓存计算属性可以被缓存,提高性能。意思为运行一次后,结果就会被缓存,下次启用就不需要在重新执行,直接从缓存中调取。例如:计算data中的str: 1然后用一个方法把str强制赋值还是1,计算属性知道是同一个值没有变化,就不会去运行,能节省性能3 即时原创 2021-01-24 17:26:33 · 135 阅读 · 0 评论 -
【vue回顾系列】06-关于data的一些注意事项,为什么要写成函数的形式
我们知道我们写的一个个组件,相当于在写构造函数,当new Vue的时候,我们的构造函数就进行实例化了。vue只对放在data里的变量做响应式处理,所以你直接在data外的变量做修改是不具备响应式的。这样,当这个组件复用多次,也就是实例化多次时,每个实例化对象的data都是这个构造函数原型上的同一个引用地址的对象。那么当HelloA.vue组件修改了name,通过原型链修改了后,HelloB.vue组件中的name也会发生改变。当每个组件通过原型链使用data数据时,都会执行后返回一个独立的对象,互不干扰。原创 2021-01-24 17:00:51 · 1107 阅读 · 0 评论 -
【vue回顾系列】04-slot插槽最良心的使用总结,如果插槽还满足不了,可以试试h函数
文章目录前言普通插槽旧版的写法新版的写法具名插槽作用域插槽前言自己写代码的时候从来没有用过slot插槽,直到有一天看到公司有大佬用这个东西,好好看了一下之后就目瞪口呆了,原来这东西用好了这么牛,于是我开始想学一下关于插槽的基本用法。普通插槽旧版的写法父组件 <template> <div> <slotTest> {{'传一句话'}} // 这就是插进子组件的内容 </slotTest>原创 2021-01-23 14:41:42 · 1663 阅读 · 0 评论 -
【vue回顾系列】03-什么是虚拟DOM,模板编译,以及diff更新机制是怎么样的
vue在对虚拟dom树进行比对的时候,时间复杂度降低很多,例如一颗三层的虚拟dom树,如果没有diff算法,那么旧树的每一个节点都要和新树的每个节点进行比对,时间复杂度就是On3。),只比对同一层级的,遇到不一样的不管子节点直接更新。如果我们使用虚拟DOM的能力,不需要用innerHTML,Vue直接创建新的虚拟DOM,进行新旧比对,然后直接对真实DOM进行修改或添加。具体怎么移动的暂时不深入,这种在作层级比对的时候会自动移动,比如比对旧DOM的C的时候,直接就把C移到最前面,这种方式损耗是非常小的。原创 2021-03-15 22:38:20 · 748 阅读 · 0 评论 -
【vue回顾系列】02-组件和插件的区别是什么,Vue.use又是什么意思
刚开始学习vue的时候,会搞不清楚插件的概念,也很难理解main.js中的是什么意思,这次就来讲明白。其实官方也讲了,这里放个vue3的版本,vue2也差不多是这样的。其实插件理解是什么意思就行了,具体怎么实现可以等有需求后再去官方文档上看着实现。宝典网站上面总结的很好,我直接引用下:组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue。插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 Vue 本身。原创 2021-01-23 11:15:30 · 255 阅读 · 0 评论 -
【vue回顾系列】01-记录一些对vue的理解,MVVM,特点,与原生对比,注意点
背景:web1.0-2.0时期,页面只是静态渲染,更新需要依赖于手动操作dom,比如JQ;web2.0时期,框架出现,数据驱动(vue的MVVM,react的setState)代替过去;model,数据层,比如data中的数据,vuex数据等,基本都是后端提供的。view,dom视图层,也就是用户界面。viewModel,视图数据层,通过数据层的数据的处理(例如dom监听,vue指令等),生成用于视图层展示的数据模型,也能通过视图层用户的交互,改变数据层的数据模型。原创 2021-01-23 00:12:25 · 694 阅读 · 1 评论