当前位置: 首页 > Web前端 > vue.js

Vue理论-随笔

时间:2023-03-31 20:18:11 vue.js

1.v-if和v-for哪个优先级高,同时使用时如何正确处理?v-for具有更高的优先级。每次渲染的时候都会先循环再判断。在源码中可以看到两者的处理逻辑,先是for,后是if。如果同时使用,最好在v-for外使用,逐层写一个模板,先判断,再循环。2、为什么vue组件中的数据必须是函数,而根实例中却没有这样的限制?主要是为了防止数据污染,可能有多个组件,也就是说多个Vue组件共享一份数据。如果此时数据是一个对象,一个组件的数据变化会影响所有共享该数据的组件。在创建根实例的时候,直接新建一个vue,每次都是新建的,而且只有一个,所以不会出现这种数据污染。3.键的作用及原理键的主要作用是更高效地更新虚拟DOM。其原理是vue在patch过程中可以通过key准确判断两个节点是否相同,避免DOM的频繁更新,提高效率,以插入数组节点为例。如果不使用键,则需要更新每个数组节点,然后创建节点并在末尾插入最后一位。使用key后,需要循环数组,比较第一个和最后一个节点。如果它们相同,则不会执行更新操作,如果不同,则创建并插入一个新节点。Insertwithoutkey:Insertwithkey:(Vue中执行diff的时刻是组件实例执行它的update函数的时候,会比较上一次的渲染结果oldVnode和新的渲染结果newVnode,这个过程叫做patch)4.diff算法A.必要组件中的数据中可能存在多个key,尤其是在watcher中,可以准确监控并找到变化发生的地方b.执行方法策略:深度优先,同级比较,找到节点A子节点中的最后一个节点,然后比较,比较完成后,向上移动继续比较c。效率主要处理同级比较