vue
10篇文章 · 0订阅
  • Vue原理解析（六）：全面深入理解响应式原理(上)-对象基础篇
    vue之所以能数据驱动视图发生变更的关键，就是依赖它的响应式系统了。响应式系统如果根据数据类型区分，对象和数组它们的实现会有所不同；解释响应式原理，如果只是为了说明响应式原理而说，但不是从整体流程出发，不在vue组件化的整体流程中找到响应式原理的位置，对深刻理解响应式原理并不太…
    Vue.js
  • Vue原理解析（四）：你知道被大家聊烂了的虚拟Dom是怎么生成的吗？
    在经过初始化阶段之后，即将开始组件的挂载，不过在挂载之前很有必要提一下虚拟Dom的概念。这个想必大家有所耳闻，我们知道vue@2.0开始引入了虚拟Dom，主要解决的问题是，大部分情况下可以降低使用JavaScript去操作跨线程的庞大Dom所需要的昂贵性能，让Dom操作的性能更…
    Vue.js
  • Vue原理解析（三）：初始化时created之前做了什么？
    5. initInjections(vm): 主要作用是初始化inject，可以访问到对应的依赖。 provide：提供一个对象或是返回一个对象的函数。 inject：是一个字符串数组或对象。 大概是因为会让组件数据层级关系变的混乱的缘故，但在开发组件库时会很好使。 一但触发h…
    Vue.js
  • Vue原理解析（二）：初始化时beforeCreate之前做了什么？
    先需要交代下，每一个组件都是一个Vue构造函数的子类，这个之后会说明为何如此。从上往下我们一步步看，首先会定义_uid属性，这是为每个组件每一次初始化时做的一个唯一的私有属性标识，有时候会有些作用。 首先要找的组件需要定义name属性，当然定义name属性也是一个好的书写习惯。…
    Vue.js
  • Vue原理解析（八）：一起搞明白令人头疼的diff算法
    之前章节介绍了VNode如何生成真实Dom，这只是patch内首次渲染做的事，完成了一小部分功能而已，而它做的最重要的事情是当响应式触发时，让页面的重新渲染这一过程能高效完成。其实页面的重新渲染完全可以使用新生成的Dom去整个替换掉旧的Dom，然而这么做比较低效，所以就借助接下…
    Vue.js
  • Vue原理解析（七）：全面深入理解响应式原理(下)-数组进阶篇
    再初步了解了响应式的原理后，接下来我们深入响应式，解析数组响应式的原理。 对于这两种改变数据的方式，vue内部的实现并不相同。 实现原理和对象是一样的，再vm._render()时有用到list，就将依赖收集起来，重新赋值后走对象派发更新的那一套。 走对象的那一套就不行了，因为…
    Vue.js
  • Vue原理解析（五）：彻底搞懂虚拟Dom到真实Dom的生成过程
    我们已经执行完了vm._render方法拿到了VNode，现在将它作为参数传给vm._update方法并执行。vm._update这个方法的作用就是就是将VNode转为真实的Dom，不过它有两个执行的时机： 当执行new Vue到此时就是首次渲染了，会将传入的VNode对象映射…
    Vue.js
  • Vue原理解析（一）：Vue到底是什么？
    Vue，现在前端的当红炸子鸡，随着热度指数上升，实在是有必要从源码的角度，对它功能的实现原理一窥究竟。个人觉得看源码主要是看两样东西，从宏观上来说是它的设计思想和实现原理；微观上来说就是编程技巧，也就是俗称的骚操作。我们这次的侧重点是它的实现原理。好吧，让我们推开它那神秘的大门…
    Vue.js
  • vue源码阅读之数据响应式原理
    上一篇《vue源码阅读之数据渲染过程》分析了数据是如何渲染到页面的过程，本章将继续分析当改变数据的时候，页面是如何重新进行渲染的。即数据响应式原理。首先我们看一下整个响应式的过程。如图1所示： 图一中涉及到data、props、computed、watch等属性的响应式过程。都…
    前端
  • vue源码阅读之数据渲染过程
    vue已是目前国内前端web端三分天下之一，也是工作中主要技术栈之一。在日常使用中知其然也好奇着所以然，因此尝试阅读vue源码并进行总结。本文旨在梳理初始化页面时data中的数据是如何渲染到页面上的。本文将带着这个疑问一点点“追究”vue的'思路'。总体来说vue模版渲染大致流…
    Vue.js