- 博客(82)
- 资源 (28)
- 收藏
- 关注
RSS订阅原创 vue 项目性能优化
代码层面：合理使用 v-if 和 v-show区分 computed 和 watch 的使用v-for 遍历为 item 添加 keyv-for 遍历避免同时使用 v-if通过 addEventListener添加的事件在组件销毁时要用 removeEventListener 手动移除这些事件的监听图片懒加载路由懒加载第三方插件按需引入SSR服务端渲染，首屏加载速度快，SEO效果好Webpack 层面优化：对图片进行压缩使用 CommonsChunkPlugin 插件提取公共代
2020-09-27 09:09:20
62
原创 nextTick
nextTick 可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOMnextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用PromiseMutationObserversetImmediate如果以上都不行则采用setTimeout定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列...
2020-09-27 09:08:42
75
原创 Vue中的key到底有什么用？
key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超出差异.diff程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldC.
2020-09-27 09:08:25
669
原创 Vue为什么没有类似于React中shouldComponentUpdate的生命周期？
考点: Vue的变化侦测原理前置知识: 依赖收集、虚拟DOM、响应式系统根本原因是Vue与React的变化侦测方式有所不同React是pull的方式侦测变化,当React知道发生变化后,会使用Virtual Dom Diff进行差异检测,但是很多组件实际上是肯定不会发生变化的,这个时候需要用shouldComponentUpdate进行手动操作来减少diff,从而提高程序整体的性能.Vue是pull+push的方式侦测变化的,在一开始就知道那个组件发生了变化,因此在push的阶段并不需要手.
2020-09-27 09:08:02
739
原创 既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?
现代前端框架有两种方式侦测变化,一种是pull一种是pushpull: 其代表为React,我们可以回忆一下React是如何侦测到变化的,我们通常会用setStateAPI显式更新,然后React会进行一层层的Virtual Dom Diff操作找出差异,然后Patch到DOM上,React从一开始就不知道到底是哪发生了变化,只是知道「有变化了」,然后再进行比较暴力的Diff操作查找「哪发生变化了」，另外一个代表就是Angular的脏检查操作。push: Vue的响应式系统则是push的代表,当V.
2020-09-27 09:07:50
502
原创 你是如何理解Vue的响应式系统的?
响应式系统简述:任何一个 Vue Component 都有一个与之对应的 Watcher 实例。Vue 的 data 上的属性会被添加 getter 和 setter 属性。当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用.
2020-09-27 09:07:35
384
1
原创 Proxy与Object.defineProperty的优劣对比?
Proxy的优势如下:Proxy可以直接监听对象而非属性Proxy可以直接监听数组的变化Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改Proxy作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利Object.defineProp
2020-09-25 08:58:21
245
原创 移动端如何设计一个比较友好的Header组件？
当时的思路是头部(Header)一般分为左、中、右三个部分，分为三个区域来设计，中间为主标题，每个页面的标题肯定不同，所以可以通过vue props的方式做成可配置对外进行暴露，左侧大部分页面可能都是回退按钮，但是样式和内容不尽相同，右侧一般都是具有功能性的操作按钮，所以左右两侧可以通过vue slot插槽的方式对外暴露以实现多样化，同时也可以提供default slot默认插槽来统一页面风格...
2020-09-25 08:58:06
274
原创 vue.extend和vue.component
extend是构造一个组件的语法器。 然后这个组件你可以作用到Vue.component这个全局注册方法里还可以在任意vue模板里使用组件。 也可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件。Vue.component你可以创建 ，也可以取组件。...
2020-09-24 09:32:26
81
原创 vue项目中的性能优化
不要在模板里面写过多表达式循环调用子组件时添加key频繁切换的使用v-show，不频繁切换的使用v-if尽量少用float，可以用flex按需加载，可以用require或者import()按需加载需要的组件路由懒加载...
2020-09-24 09:32:09
75
原创 vue-router守卫
导航守卫 router.beforeEach 全局前置守卫to: Route: 即将要进入的目标（路由对象）from: Route: 当前导航正要离开的路由next: Function: 一定要调用该方法来 resolve 这个钩子。（一定要用这个函数才能去到下一个路由，如果不用就拦截）执行效果依赖 next 方法的调用参数。next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。next(false):取消进入路由，url地址重置为.
2020-09-23 10:25:53
120
原创 computed和watch区别
当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computedComputed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理watch用于观察和监听页面上的vue实例，如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监
2020-09-23 10:25:42
126
原创 ref的作用
获取dom元素this.$refs.box获取子组件中的datathis.$refs.box.msg调用子组件中的方法this.$refs.box.open()
2020-09-23 10:25:30
626
原创 Git 怎么避免每次都要输入密码
每次使用Git时都会遇到这样的问题，每次都要输入一边用户名和密码，给我们的编码带来了很大的不便。怎样才能设置一次以后就不用每次在登录了：在 git bash 里输入命令：git config --global credential.helper store然后执行 git 操作，输入一遍密码后就会记录密码，以后就不用输入了。那么要更改记录的用户名和密码怎么办呢？因为上面的命令会在你的用户目录下新建个 .git-credentials 文件，我们只需要更改这个文件即可。找到自己的用户.
2020-09-22 09:38:27
891
原创 scoped样式穿透
scoped虽然避免了组件间样式污染，但是很多时候我们需要修改组件中的某个样式，但是又不想去除scoped属性使用/deep/使用两个style标签
2020-09-22 09:38:01
83
原创 v-model双向绑定原理
v-model本质上是语法糖，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件text 和 textarea 元素使用 value 属性和 input 事件checkbox 和 radio 使用 checked 属性和 change 事件select 字段将 value 作为 prop 并将 change 作为事件所以我们可以v-model进行如下改写：这个语法糖必须是固定的，也就是说属性必须为value，方法名必须为：input。知道了v-model的原理，我们可.
2020-09-22 09:37:45
1706
原创 Vue3.x响应式数据原理
Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代.
2020-09-21 17:57:25
615
原创 Vue2.x 响应式原理
Vue 采用数据劫持结合发布—订阅模式的方法，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。Observer 遍历数据对象，给所有属性加上 setter 和 getter，监听数据的变化compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图Watcher 订阅者是 Obs.
2020-09-21 17:56:48
141
原创 Vue是如何实现双向绑定的?
利用Object.defineProperty劫持对象的访问器,在属性值发生变化时我们可以获取变化,然后根据变化进行后续响应,在vue3.0中通过Proxy代理对象进行类似的操作。
2020-09-21 17:55:19
283
原创 watch与computed的区别
computed:computed是计算属性,也就是计算值,它更多用于计算值的场景computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算 computed适用于计算比较消耗性能的计算场景watch:更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作无缓存性，页面重新渲染时值不变化也会执行
2020-09-20 20:00:18
175
原创 vuex是什么？怎么使用？哪种功能场景使用它？
vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 datastate 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性vuex的使用借助官方提供的一张图来说明:Vuex有5种属性: 分别是 state、getter、mutation、a.
2020-09-20 20:00:01
579
原创 Vue与Angular以及React的区别？
Vue与AngularJS的区别Angular采用TypeScript开发, 而Vue可以使用javascript也可以使用TypeScriptAngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。AngularJS社区完善, Vue的学习成本较小Vue与React的区别vue组件分为全局注册和局部注册，在react中都是通过import相应组件，然后模版中引用；props是可以动态变化的，子组件
2020-09-20 19:59:50
514
原创 组件之间的传值通信
组件之间通讯分为三种: 父传子、子传父、兄弟组件之间的通讯父组件给子组件传值使用props，父组件可以使用props向子组件传递数据。父组件vue模板father.vue:子组件vue模板child.vue:子组件向父组件通信父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件父组件vue模板father.vue:子组件vue模板child.vue:非父子, 兄弟组件之间通信vue2中废弃了broadcast广播和分发事件的方法。父子组件中.
2020-09-20 19:59:36
211
原创 vue-router 有哪几种导航守卫?
全局守卫路由独享守卫路由组件内的守卫全局守卫vue-router全局有三个守卫router.beforeEach 全局前置守卫 进入路由之前router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用router.afterEach 全局后置钩子 进入路由之后路由独享守卫如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫路由组件内的守卫beforeRouteEnter 进入路由前, 在路由独享守卫后.
2020-09-20 19:59:23
3523
原创 Proxy 相比于 defineProperty 的优势
Object.defineProperty() 的问题主要有三个：不能监听数组的变化必须遍历对象的每个属性必须深层遍历嵌套的对象Proxy 在 ES2015 规范中被正式加入，它有以下几个特点针对对象：针对整个对象，而不是对象的某个属性，所以也就不需要对 keys 进行遍历。这解决了上述 Object.defineProperty() 第二个问题支持数组：Proxy 不需要对数组的方法进行重载，省去了众多 hack，减少代码量等于减少了维护成本，而且标准的就是最好的。除了上述.
2020-09-20 19:59:09
626
原创 开发中常用的指令有哪些
v-model :一般用在表达输入，很轻松的实现表单控件和数据的双向绑定v-html: 更新元素的 innerHTMLv-show 与 v-if: 条件渲染, 注意二者区别使用了v-if的时候，如果值为false，那么页面将不会有这个html标签生成。 v-show则是不管值为true还是false，html元素都会存在，只是CSS中的display显示或隐藏v-on : click: 可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数v-for:基于源数据.
2020-09-18 09:50:48
285
原创 怎么快速定位哪个组件出现性能问题
用 timeline 工具。 大意是通过 timeline 来查看每个函数的调用时常，定位出哪个函数的问题，从而能判断哪个组件出了问题
2020-09-18 09:49:37
482
原创 Vue complier 实现
模板解析这种事，本质是将数据转化为一段 html ，最开始出现在后端，经过各种处理吐给前端。随着各种 mv* 的兴起，模板解析交由前端处理。总的来说，Vue complier 是将 template 转化成一个 render 字符串。可以简单理解成以下步骤：parse 过程，将 template 利用正则转化成AST 抽象语法树。optimize 过程，标记静态节点，后 diff 过程跳过静态节点，提升性能。generate 过程，生成 render 字符串...
2020-09-18 09:49:20
536
原创 Vue computed 实现
建立与其他属性（如：data、 Store）的联系；属性改变后，通知计算属性重新计算实现时，主要如下初始化 data， 使用 Object.defineProperty 把这些属性全部转为 getter/setter。初始化 computed, 遍历 computed 里的每个属性，每个 computed 属性都是一个 watch 实例。每个属性提供的函数作为属性的 getter，使用 Object.defineProperty 转化。Object.defineProperty gett.
2020-09-17 09:37:14
175
原创 Vue 组件 data 为什么必须是函数
每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他
2020-09-17 09:36:49
51
原创 实现 Vue SSR
其基本实现原理app.js 作为客户端与服务端的公用入口，导出 Vue 根实例，供客户端 entry 与服务端 entry 使用。客户端 entry 主要作用挂载到 DOM 上，服务端 entry 除了创建和返回实例，还进行路由匹配与数据预获取。webpack 为客服端打包一个 Client Bundle ，为服务端打包一个 Server Bundle 。服务器接收请求时，会根据 url，加载相应组件，获取和解析异步数据，创建一个读取 Server Bundle 的 BundleRenderer，然
2020-09-17 09:36:38
219
原创 vue的优点是什么？
低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写...
2020-09-16 09:38:53
908
原创 vue-cli 工程技术集合介绍
问题一：构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？vue.js：vue-cli工程的核心，主要特点是 双向数据绑定 和 组件系统。vue-router：vue官方推荐使用的路由框架。vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。vuex等：一个专为vue设计的移动端UI组件库。创建一
2020-09-15 10:17:06
167
原创 请列举出3个Vue中常用的生命周期钩子函数?
created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted被调用时 vm.$el 也在文档内。activated: keep-alive组件激活时调用...
2020-09-15 10:16:51
1573
原创 在Vue中使用插件的步骤
采用ES6的import ... from ...语法或CommonJS的require()方法引入插件使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })
2020-09-15 10:16:35
731
原创 指令v-el的作用是什么?
提供一个在页面上已存在的 DOM元素作为 Vue实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例,
2020-09-14 10:11:58
3668
简单的数据可视化页面25.zip
2020-07-16
简单的数据可视化页面20.zip
2020-07-16
简单的数据可视化页面16.zip
2020-07-16
简单的数据可视化页面7.zip
2020-07-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人