Vuex有哪几种属性?
有五种,分别是 State、 Getter、Mutation 、Action、 Module
Vue.js的template编译
简而言之,就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点),详细步骤如下:
首先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式),compile是createCompiler的返回值,createCompiler是用以创建编译器的。另外compile还负责合并option。
然后,AST会经过generate(将AST语法树转化成render funtion字符串的过程)得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名、子节点、文本等等)
Vue 中 computed 和 watch 有什么区别?
计算属性 computed:
侦听属性 watch:
vue初始化页面闪动问题
使用vue开发时,在vue初始化之前,由于div是不归vue管的,所以我们写的代码在还没有解析的情况下会容易出现花屏现象,看到类似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是还是有必要让解决这个问题的。
首先:在css里加上以下代码:
如果没有彻底解决问题,则在根元素加上
Vue中的key到底有什么用?
是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速
diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的与旧节点进行比对,然后超出差异.
diff程可以概括为:oldCh和newCh各有两个头尾的变量StartIdx和EndIdx,它们的2个变量相互比较,一共有4种比较方式。如果4种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了,就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾.
依赖收集简版
参考
diff算法
时间复杂度: 个树的完全 算法是一个时间复杂度为 ,vue进行优化转化成 。
理解:
diff算法的优化策略:四种命中查找,四个指针
$nextTick 是什么?
Vue 实现响应式并不是在数据发生后立即更新 DOM,使用 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用,则可以在回调中获取更新后的 DOM。
为什么要有这些模式,目的:职责划分、分层(将层、层进行分类)借鉴后端思想,对于前端而已,就是如何将数据同步到页面上
MVC模式 代表: + +
MVVM模式 映射关系的简化,隐藏了
是缩写,也就是把中的演变成。层代表数据模型,代表UI组件,是和层的桥梁,数据会绑定到层并自动将数据渲染到页面中,视图变化的时候会通知层更新数据。
总结 : 模式简化了界面与业务的依赖,解决了数据频繁更新。 在使用当中,利用双向绑定技术,使得 变化时, 会自动更新,而 变化时, 也会自动变化。
我们以下通过一个 实例来说明 的具体实现
的编译过程就是将 转化为 函数的过程
回答范例
思路
回答范例
可能的追问
在 之后。 会调用 函数进行初始化,也就是这里的 i 过程,它会初始化生命周期、事件、 、 、 、 与 等。其中最重要的是通过 设置 与 函数,用来实现「响应式」以及「依赖收集」
使用将语法解析
源码分析
Vue的优点
diff算法
<details open=""><summary><b>答案</b></summary>
<p>
</p><p><strong>时间复杂度:</strong> 个树的完全<code> diff</code> 算法是一个时间复杂度为<code> O(n*3)</code> ,vue进行优化转化成<code> O(n)</code> 。</p>
<p><strong>理解:</strong></p>
<ul>
<li>
<p>最小量更新,<code> key</code> 很重要。这个可以是这个节点的唯一标识,告诉<code> diff</code> 算法,在更改前后它们是同一个DOM节点</p>
<ul>
<li>扩展<code> v-for</code> 为什么要有<code> key</code> ,没有<code> key</code> 会暴力复用,举例子的话随便说一个比如移动节点或者增加节点(修改DOM),加<code> key</code> 只会移动减少操作DOM。</li>
</ul>
</li>
<li>
<p>只有是同一个虚拟节点才会进行精细化比较,否则就是暴力删除旧的,插入新的。</p>
</li>
<li>
<p>只进行同层比较,不会进行跨层比较。</p>
</li>
</ul>
<p><strong>diff算法的优化策略</strong>:四种命中查找,四个指针</p>
<ol>
<li>
<p>旧前与新前(先比开头,后插入和删除节点的这种情况)</p>
</li>
<li>
<p>旧后与新后(比结尾,前插入或删除的情况)</p>
</li>
<li>
<p>旧前与新后(头与尾比,此种发生了,涉及移动节点,那么新前指向的节点,移动到旧后之后)</p>
</li>
<li>
<p>旧后与新前(尾与头比,此种发生了,涉及移动节点,那么新前指向的节点,移动到旧前之前)</p>
</li>
</ol>
<p></p>
</details>
--- 问完上面这些如果都能很清楚的话,基本O了 ---
以下的这些简单的概念,你肯定也是没有问题的啦