David Xue
0%

发表于 更新于 分类于 阅读次数： 评论：

new Vue的整个过程，大致经历了什么

从new Vue开始都大致执行了哪些重要的方法

  1. new Vue();
  2. Vue.prototype._init();
  3. Vue.prototype.$mount();
  4. mountComponent();
  5. new Watcher();
  6. Watcher.prototype.get();
  7. updateComponent();
  8. Vue.prototype._render();
  9. render();
  10. createElement()
  11. Vue.prototype._update();//这里面会执行vm.$el=vm.patch(),最终根vm的$el就有了真实dom值
  12. Vue.prototype.patch();//这个应该是最重要的方法了，他返回了真实的dom节点。

发表于 更新于 分类于 阅读次数： 评论：

为什么data是一个函数，不是一个对象

data属性可以是一个函数也可以是一个对象，比如在vue实例中，它可以设置为对象：

1
2
3
4
5
6
<script>
    let vm = new Vue({
        el:'#app',
        data:{}
    })
</script>

而在组件中就需要将data设置为函数类型了，因为我们知道vue组件是需要进行复用的，假设data属性是一个对象的话，就意味着组件在复用的时候，其中的data用的是一个内存地址，在组件A中的变动也会体现在组件B中，而如果data属性是一个函数就不会出现这样的问题，我们每次在调用组件的时候data函数都会为我们返回一个新的对象，由各组件独立维护。

其实就是因为对象是一个引用类型。

阅读全文 »

发表于 分类于 阅读次数： 评论：

Vue双向绑定过程

vue2的和vue3的双向绑定区别，优势等

发表于 更新于 分类于 阅读次数： 评论：

Vue-diff算法

为什么要用Diff算法

在浏览器中操作DOM的代价是非常“昂贵”的。。。

传统的Diff算法

传统的Diff算法通过循环递归对节点进行比较，然后判断每个节点的状态以及要做的操作（add，remove，change），最后根据Virtual DOM进行DOM的渲染。大体流程如下图:

传统Diff算法的复杂度为O(n^3)，这个复杂度相对来说还是较高的。后来React开发者提供了一种复杂度仅为O(n)的Diff算法。下面就来看一下O(n)复杂度的Diff算法是如何实现的。

更高效的Diff算法

React的开发者结合Web界面的特点做出了两个大胆的假设，使得Diff算法复杂度直接从O(n^3)降低到O(n)，假设如下：

  • 两个相同组件产生类似的DOM结构，不同的组件产生不同的DOM结构；
  • 对于同一层次的一组子节点，它们可以通过唯一的id进行区分。
阅读全文 »