v-if与v-for 优先级问题
从源码分析可知,v-for和v-if在同一标签时,会先循环再执行每一次的判断函数,所以,v-for优先级高于v-if
所以实际开发中,应尽量避免这种情况,可将v-if放到v-for父标签进行判断,如果判断发生在v-for内部这种情况,可以使用vue的计算属性先进行循环判断,然后再将筛选后的结果渲染出来。
为什么组件data要使用函数形式而根实例没有这个限制
源码初始化initData()函数中,会判断data是否是一个函数,如果是函数,如果是,执行它,并且将结果作为data选项的值;如果使用对象形式,则会导致他们共用一个data对象,不同组件间用的数据将会共享,导致变量污染。根实例中能用是因为vue每次只能创建一个根实例,只是单例。
key的作用及原理
1.key的作用主要是为了高效更新虚拟dom,原理就是vue在patch过程中通过key可以精准判断两个节点是否是同一个节点,从而避免频繁更新不同元素,使得整个patch过程更加高效,减少dom操作
2.若不设置key还可能在列表更新时引发一些隐蔽bug
3.vue中在使用相同标签名元素的过渡切换时,也会用到key属性,目的是为了让vue可以区分他们,否则,vue只会替换其内部属性而不会触发过渡效果
怎样理解vue中的diff算法
1.diff算法是虚拟dom技术的必然产物:通过新旧虚拟dom做对比(diff过程),将变化的地方更新在真实Dom上;
2.vue2.x特性,只有用diff才能精确找到发生变化的地方;
3.vue中diff执行的时刻是组件实例执行其更新函数时,它会比对让一次渲染接轨oldVnode和新的渲染结果newVnode,此过程称为patch;
4.diff过程整体遵循深度优先、同层比较策略;两个节点之间比较它们拥有子节点或者文本节点做不同操作;比较两组子节点是算法重点,首先假设头尾节点可能相同做4次比对,如果没有找到相同节点才按照通用方式遍历查找,查找结束再按情况处理剩余节点;借助key通常可以非常精确找到相同节点,因此整个patch过程非常高效
vue组件化理解
1.组件是独立可复用的代码组织单元。组件系统是vue核心特性之一,它使开发者使用小型、独立个通常可复用的组件构建大型应用
2.组件化开发能大幅提高应用开发效率、测试性、复用性等;常分为页面组件、业务组件、通用组件
3.vue的组件是基于配置的,我们通常编写的组件是组件配置而非组件,框架后续会生成其构造函数,基于VueComponent,扩展于vue
4.vue中常见组件化技术有:属性prop,自定义事件、插槽等,主要用于组件通信、扩展等;合理的划分组件,有助于提升应用性能。
5.组件应该是高内聚,低耦合的,遵循单向数据流原则;