关于vue.js:Vue理论随笔

11次阅读

共计 695 个字符,预计需要花费 2 分钟才能阅读完成。

1.v-if 和 v -for 的优先级哪个更高,同时应用时如何正确处理?

v-for 的优先级更高,在每次渲染时,都会先循环再判断,在源码中,能够看到两者的解决逻辑,先 for 再 if,若是同时应用,最好在 v -for 外层写一层 template,后行判断,再进行循环。

2.Vue 组件中的 data 为什么必须是个函数,而根实例时则没有该限度?

次要是为了避免数据净化,组件有可能会是多个,也就是说多个 Vue 组件共用一个 data,如果这时 data 是对象的话,那么一个组件的数据变更会影响到所有共用这个 data 的组件,而根实例创立时是间接 new 了一个新的 Vue,它每次都是新的且只有一个,所以不会呈现这种数据净化的状况。

3.key 的作用和原理

Key 的次要作用是更高效的更新虚构 DOM,原理是 vue 在 patch 过程中能够通过 key 精准判断两个节点是否是同一个,防止频繁更新 DOM,提高效率,以插入数组节点为例,若不应用 key,须要更新每一个数组节点,而后最初在创立节点并插入最初一位,而应用 key 后,则是去循环数组,进行首尾节点比拟,雷同则不做任何更新操作,不同则创立新节点并插入。
不应用 key 进行插入:

应用 key 进行插入:

(Vue 中 diff 执行的时刻是组件实例执行其更新函数时,它会比照上一次渲染后果 oldVnode 和新的的渲染后果 newVnode,此过程称为 patch)

4.diff 算法

a. 必要性 组件中可能会存在多个 data 中的 key 应用,特地是 watcher 中,能够精准监找到变动产生的中央
b. 执行形式 策略: 深度优先,同级比拟,找到节点中最初一个孩子,再进行比拟,比拟实现后上移持续比拟
c. 高效性 次要解决同级比拟

正文完
 0