![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 73
Goodbye_yesterday
湖北大学计科18级
展开
-
Vue中computed原理
computed是vue中的计算属性,在依赖的值发生变化的时候进行重新计算,否则使用缓存。而在面试中常被问及computed原理,这篇文章主要作为我学习computed源码的笔记。前面说到computed只有在依赖发生变化才会重新计算,那么如何得知computed的值发生了变化呢这主要是Watcher中的dirty属性,dirty属性为true时,说明computed中的值需要重新计算,dirty为false时,则说明依赖没有变化,不需要重新计算当计算属性的值发生变化时,计算属性的watch原创 2022-03-14 15:40:34 · 6356 阅读 · 0 评论 -
vm.$nexttick实现原理
1.nexttick用法nexttick接受一个回调函数作为参数,它的作用是将回调延迟到下个DOM更新周期之后执行。它与全局方法Vue.nexttick一样,不同的是回调的this自动绑定到调用它的实例上。如果没有提供回调且在支持Promise的环境中。则返回一个Promise下个DOM更新周期的含义在Vue中,当状态发生变化时,watcher会得到通知,然后触发虚拟DOM的渲染流程,而watcher触发渲染是异步的,每当需要渲染时,会将watcher推送到这个队列中,在下一次事件循环中再让wa原创 2021-08-24 21:01:04 · 383 阅读 · 0 评论 -
vue变化相关API实现原理(vm.$watch, vm.$set,vm.$delete)
1.vm.$setvm.$set(target, key, value)处理target是数组的情况export function set(target, key, val) { //处理数组 if(Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key) target.splice(key, 1,原创 2021-08-22 21:28:22 · 287 阅读 · 0 评论 -
vue模板编译原理
1.模板编译在整个渲染过程中的位置模板->模板编译->渲染函数->vnode->用户界面原创 2021-05-09 14:26:58 · 864 阅读 · 0 评论 -
vue双向数据绑定
vue中数组与对象采用了不同的绑定方式1.vue对象数据绑定(1)数据侦测在js中,我们使用Object.defineProperty()和ES6的proxy来对对象进行侦测在vue2.x中使用的是Object.defineProperty()来对对象进行数据侦测,我们首先对Object.defineProperty进行封装,有如下的代码:function defineReactive(data, key, val){ let dep = new Dep(); Obje原创 2021-05-15 20:17:17 · 310 阅读 · 3 评论 -
vue虚拟DOM详解
1.虚拟DOM的概念虚拟DOM的概念是通过状态生成一个虚拟节点树,然后使用虚拟节点数进行渲染。在渲染之前,会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比,只渲染不同的部分2.vue中的虚拟DOMvue中状态变化时,只能通知到组件,组件内部的变化需要通过虚拟DOM去进行比对与渲染在vue中,我们使用模板来描述状态与DOM之间的映射关系。vue通过编译将模板转换成渲染函数,执行渲染函数就可以得到一个虚拟节点树,使用虚拟节点数就可以渲染页面虚拟DOM在vue中主要提供与真实节点对应的虚拟原创 2021-05-02 15:51:02 · 9120 阅读 · 1 评论