![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 79
多云转晴ing
这个作者很懒,什么都没留下…
展开
-
Vue生命周期与性能优化
生命周期beforeCreate 在 Vue 实例初始化之后,数据观测(data observer)之前被调用;created 实例已创建完成之后被调用。在这一步,实例已完成这几个配置:数据观测、属性和方法的运算、watch/event 事件回调。这里还没有 $el;beforeMount 在挂在开始之前被调用,相关的 render 函数首次被调用;mounted el 被创建的 vm.$el 替换,并挂载到实例上去之后调用这个钩子;brforeUpdate 数据更新时调用,发生在虚拟 DOM原创 2020-07-25 10:44:26 · 615 阅读 · 0 评论 -
深入Vue内部原理(三):Diff算法
虚拟 DOM 出现的背景:在 jQuery 时代,可以自行控制 DOM 操作的时机,手动调整,但是当项目很大时,操作 DOM 的复杂度就会上来,DOM 操作会很耗费性能,操作 DOM 就还需要考虑优化 DOM 操作,提升性能。《高性能JavaScript》这本书中说,把 DOM 和 JavaScript 各自想象成一个岛屿,它们之间用收费桥梁连接。操作 DOM 后需要经过跨流程通信和渲染线程触发的重新渲染(重绘或者重排),在开发中,应尽量减少操作 DOM。而虚拟 DOM 出现后,更新 DOM 交给框架处理。原创 2020-07-25 10:40:01 · 586 阅读 · 0 评论 -
深入Vue内部原理(二):异步渲染
如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue 会在本轮数据更新后,再异步去更新视图。Vue 内部会汇总 data 的修改,然后一次性更新视图,这样做是为了减少 DOM 操作次数,提高性能。通过 Vue 中的 $nextTick 函数也可以看出是异步更新。在数据更新后,如果我们要拿到更新后的 DOM 状态,应该使用 $nextTick 函数,比如使用数据把 li 列表增加了,想要获取到增加后的 li 元素数目,可以这么做:methods: { add (ite原创 2020-07-25 10:35:38 · 1072 阅读 · 0 评论 -
深入Vue内部原理(一):响应式原理
Vue 主要包括三大部分:响应式、模板编译和虚拟 DOM。MVVM 模型MVVM 是 Model-View-ViewModel 的简写。MVVM 用数据驱动视图。传统组件(如 asp、jsp、php)只是静态渲染,更新时还要依赖于操作 DOM。传统组件遵循 MVC 模型,即模型(Model)-视图(View)-控制器(Controller)。MVC 模式下,后端使用数据(Model部分)填充 HTML 模板,前端(View部分)访问不同的路由时展示不同的视图,这些视图都是后端已经渲染好的 HTML 文档原创 2020-07-25 10:33:14 · 206 阅读 · 0 评论