关于一些Vue的文章。(7)

原文链接我的blog,欢迎STAR。

首先安利一波福利,有没有用vscode的小伙伴?推荐一个神奇的字体,自从用了这个字体,敲代码效率简直上天了。先上图看看效果:

全等

箭头函数

小于等于

还有其他许多,就不一一列举出来了。 有没有看上了的? 没有我等下再来问。

这次推荐的一篇文章来自,阅读这篇文章有利于加深对Vue程序结构的了解,虽然是 1.0版本,不过好在 2.0 版本保留了绝大部分 1.0 的API。

在这篇文章里我将是这几个月来对 Vue 学习的一个小结。


思路

Vue 和其他的 MVVM 思路是类似的:

主要是为了实现三个过程:

  1. Observer: 通过Observer对data进行监听,并且提供订阅某个数据项的变化的能力。利用Object.defineProperty, 将data里的每个属性全部转化为getter/setter,已遍拦截对象赋值与取值操作;
  2. Compiler: 将template 解析为 render()方法;
  3. watcher: Compiler 的解析结果与 Observer 结合起来,在 Observer 监听到数据发生改变时,接受通知,进而触发 re-render, 重新渲染DOM。

new Vue

我们从 new Vue 开始,

上图即是官网给出的一张生命周期图,主要是四个过程:

  • create: 在 new Vue() 时会运行,创建出 Vue 对象。
  • mount: 会根据 el, template, render 等,生成 Vnode, 完成 diff 算法后挂载到 DOM 上。
  • updata: 当数据发生改变时,会重新渲染 DOM。
  • destory: Vue 销毁时会运行。

现在,我们进入源码,分析具体的实现:

  • Create: 首先运行new vue()的时候,会进入_init, 其中关键部分的代码如下:

可以看出在 beforeCreatecreated 只有initState, initState 是用于实现data observerevent/watcher

  • Mount: 在_init最后,会运行 vm.$mount 方法:

具体 vm.$mount 的分析,请看上篇。最后进行了 render(), 从而会有Vnode, 经过 DIFF 算法后会有真实 DOM ;

  • Update: DOM 之后,会进行update方法: vm._watcher = new Watcher(vm, () => { vm._update(vm._render(), hydrating) }, noop)复制代码

将以上用一张序列图表示也就是:


深入响应式原理 (Observer, watcher)

MVVM 框架有一个很重要的特征:就是当数据放生变化后,会自动更新对应的DOM节点。 Vue 是怎么实现的?

以上是来自官网的一张图。

前面提到在 beforeCreatecreated 两个生命周期钩子函数之间会运行 initState() 方法。

initState() 源码里:

在这个方法里,会对props, data, computed 等属性利用 Object.defineProperty 将这些属性全部转化为 getter/setter

我们以 initData() 为例子进行分析:

这里有一个值得注意的地方, proxy(vm, "_data", keys[i]), 设置 vm._data为代理,具体作用是实现 vm.a === vm._data.a

initData()最后 会进行 observe(data, this)

observe()里,既是转化为 getter/setter

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // 只有在有Dep.target时才说明是Vue内部依赖收集过程触发的getter
      // 那么这个时候就需要执行dep.depend(),将watcher(Dep.target的实际值)添加到dep的subs数组中
      // 对于其他时候,比如dom事件回调函数中访问这个变量导致触发的getter并不需要执行依赖收集,直接返回value即可
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          // 如果value在observe过程中生成了ob实例,那么就让ob的dep也收集依赖
          childOb.dep.depend()
        }
        if (isArray(value)) {
            //如果数组元素也是对象,那么他们observe过程也生成了ob实例
            dependArray(value)
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      var value = getter ? getter.call(obj) : val
      if (newVal === value) {
        return
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      // observe 这个新数据
      childOb = observe(newVal)
      // 通知到dep 进行数据更新。
      dep.notify()
    }
  })复制代码

到这个时候,Observer 监听已经完成,如果数据更新,我们会进行 dep.notify() 方法:

dep.notify() , 方法里会执行update()

update() , 中会进行 queueWatcher() 方法:

queueWatcher(), 目的是通过 nextTicker 来执行 run()

run() 里,其实就是执行 this.get() 方法:

get() 方法里,会运行 this.getter(), 方法来更新 DOM 。

this.getter()方法是啥?

再就是上文中所提到的new Watcher(), 的第二个参数。

vm._watcher = new Watcher(vm, () => {
  vm._update(vm._render(), hydrating)
}, noop)复制代码

而在 new Watcher 构造完成后,会调用 this.get() ,触发 this.getter(),方法触发 DOM 更新。

具体可以看watcher.js:

截一个关键代码部分的图:

以上,用一张序列图来表示,既就是:

对以上总结:

  • 首先 _init ,对属性利用 Object.defineProperty,将属性转为 getter/setter,在 setter 方法里,会调用 dep.notify()
  • vm 设置 new Watcher
  • data 变化时,进行数据跟新。

完。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏肖蕾的博客

第七章:游戏音效Audio接口简介Sound类及使用方法Music类以及使用方法

1.LibGdx提供的音频方式,有三种,但是游戏中主要使用两种,Sound Music 2.枪声,按键声,这些短促,播放频率高的可以使用Sound实现。 3...

13820
来自专栏菩提树下的杨过

解决JQuery中的ready函数冲突

jQuery确实是一个提高前端开发效率的好框架(虽然很多大牛们都说它效率不咋地),但是用好它有时候并不容易,也许你也遇到过以下情况: 一个aspx页面通常可以包...

20680
来自专栏闻道于事

动态增加表单元素并获取元素的text和value提交

以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户。 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常...

749110
来自专栏自由而无用的灵魂的碎碎念

多层次探秘Windows Vista的区域与语言选项和多语言版本问题

之前,一直想深入了解下Windows Vista Ultimate的英文版与中文版有什么详细的区别,因为Ultimate版支持多国语言。这便萌生了写这篇文章的想...

11630
来自专栏工作积累

Android获取QQ和微信的聊天记录,并保存到数据库

(该方法只适用于监控自己拥有的微信或者QQ ,无法监控或者盗取其他人的聊天记录。本文只写了如何获取聊天记录,服务器落地程序并不复杂,不做赘述。写的仓促,有错别字...

5.1K140
来自专栏知道一点点

用js+cookie实现商城的购物车功能

<input name="buy" type="image" alt="第一个商品" src="images/buy.gif" align="middle" o...

27620
来自专栏Spring相关

快速初步了解Neo4j与使用

Neo4j是一个高性能的,NOSQL图形数据库,它将结构化数据存储在网络上而不是表中。它是一个嵌入式的、基于磁盘的、具备完全的事务特性的Java持久化引擎,但是...

20410
来自专栏非著名程序员

常见面试第四题之requestLayout, invalidate和postInvalidate的异同

requestLayout, invalidate和postInvalidate的异同 ? 今天我们来讲讲在面试当中最常见的,最常常被问到的第四题,近期由于小...

26650
来自专栏叁金大数据

自学Python七 爬虫实战一

  此文承接上文,让我们写一个简简单单的爬虫,循序而渐进不是吗?此次进行的练习是爬取前5页什么值得买网站中的白菜价包邮信息。包括名称,价格,推荐人,时间。

15710
来自专栏Python绿色通道

Python爬虫:把爬取到的数据插入到execl中

前面我们把大量数据已经爬取到了本地,但这些数据如果不存储起来,那么就会变得无效.开始本文之前,请确保已经阅读。

25030

扫码关注云+社区

领取腾讯云代金券