vue源碼分析系列之響應式數據（一）

liujs 發布于2019-08-23 15:11 / 1105人閱讀

摘要：代碼初始化部分一個的時候做了什么當我們一個時，實際上執行了的構造函數，這個構造函數內部掛載了很多方法，可以在我的上一篇文章中看到。合并構造函數上掛載的與當前傳入的非生產環境，包裝實例本身，在后期渲染時候，做一些校驗提示輸出。

概述

在使用vue的時候，data,computed,watch是一些經常用到的概念，那么他們是怎么實現的呢，讓我們從一個小demo開始分析一下它的流程。

demo演示代碼片段 html代碼



  
    demo
    
  
  
    
      
          a：{{a}}
          b: {{b}}
          a+b: {{total}}

js代碼

var demo = new Vue({
  el: "#demo", 
  data: {
    a: 1,
    b: 2,
  },
  computed:{
    total() {
      return this.a + this.b;
    }
  },
  methods: {
    addA() {
      this.a += 1;
    }
  }
})

簡單說明

這是一段簡單的代碼。頁面中引用了data中的a,b屬性，計算屬性total則是求a與b的和。頁面中提供一個button按鈕，每點擊一次會對屬性a+1。total屬性則會根據依賴變化，判斷total值是否需要更新，并在合適的時機更新。

代碼初始化部分 new一個Vue的時候做了什么

當我們new一個vue時，實際上執行了vue的構造函數，這個構造函數內部掛載了很多方法，可以在我的上一篇文章中看到。構造函數內部調用了_init方法，那我們看看init里做了什么即可。

function Vue (options) {
  this._init(options)
}

init函數

Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++

  // 通過_isVue標識該對象不需要被做響應式處理。
  vm._isVue = true
  // 合并構造函數上掛載的options與當前傳入的options.
  if (options && options._isComponent) {
    initInternalComponent(vm, options)
  } else {
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    )
  }
  // 非生產環境，包裝實例本身，在后期渲染時候，做一些校驗提示輸出。
  if (process.env.NODE_ENV !== "production") {
    initProxy(vm)
  } else {
    vm._renderProxy = vm
  }
  // expose real self
  vm._self = vm
  // 初始化生命周期相關
  initLifecycle(vm)
  // 初始化事件相關
  initEvents(vm)
  // 初始化渲染相關
  initRender(vm)
  // 這里調用beforeCreate鉤子
  callHook(vm, "beforeCreate")
  // inject/provide相關處理
  initInjections(vm) // resolve injections before data/props
  // 初始化data、props以及computed,watch等。
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  // 調用created鉤子
  callHook(vm, "created")


  if (vm.$options.el) {
    // 掛載組件到頁面上的
    vm.$mount(vm.$options.el)
  }
}

這篇文章講述的內容,需要我們著重關注一下initState函數與vm.$mount中渲染部分的內容。

initState函數

export function initState (vm: Component) {

  vm._watchers = []
  const opts = vm.$options
  //初始化props
  if (opts.props) initProps(vm, opts.props)
  // 初始化methods
  if (opts.methods) initMethods(vm, opts.methods)
  // 初始化data
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  // 初始化計算屬性
  if (opts.computed) initComputed(vm, opts.computed)
  // 初始化watch
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

接下里的幾篇我們將圍繞著initData，initComputed，initWatch函數，分別展開，探究其內部做了什么。

文章鏈接

vue源碼分析系列

vue源碼分析系列之debug環境搭建

vue源碼分析系列之入口文件分析

vue源碼分析系列之響應式數據（二）

GPU云服務器云服務器 asp響應式源碼系列之系列之二架構之坑系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101648.html

vue源碼分析系列之響應式數據（四）

摘要：執行當時傳入的回調，并將新值與舊值一并傳入。文章鏈接源碼分析系列源碼分析系列之環境搭建源碼分析系列之入口文件分析源碼分析系列之響應式數據一源碼分析系列之響應式數據二源碼分析系列之響應式數據三前言上一節著重講述了initComputed中的代碼，以及數據是如何從computed中到視圖層的，以及data修改后如何作用于computed。這一節主要記錄initWatcher中的內容。 ...

GHOST_349178 2019-08-23 15:16 評論0 收藏0
vue源碼分析系列之入debug環境搭建

摘要：目標是為了可以調試版本的，也就是下的源碼，所以主要是的開啟。結語至此就可以開心的研究源碼啦。文章鏈接源碼分析系列源碼分析系列之入口文件分析源碼分析系列之響應式數據一源碼分析系列之響應式數據二概述為了探究vue的本質，所以想debug一下源碼，但是怎么開始是個問題，于是有了這樣一篇記錄。目標是為了可以調試es6版本的，也就是src下的源碼，所以主要是sourceMap的開啟。原文來自...

nihao 2019-08-26 13:29 評論0 收藏0
vue源碼分析系列之入口文件分析

摘要：中引入了中的中引入了中的中，定義了的構造函數中的原型上掛載了方法，用來做初始化原型上掛載的屬性描述符，返回原型上掛載的屬性描述符返回原型上掛載與方法，用來為對象新增刪除響應式屬性原型上掛載方法原型上掛載事件相關的方法。入口尋找入口platforms/web/entry-runtime-with-compiler中import了./runtime/index導出的vue。 ./r...

kgbook 2019-08-23 15:10 評論0 收藏0
vue源碼分析系列

摘要：本系列文章旨在化繁為簡，通讀源碼，描述背后的實現邏輯。記錄方式主要是代碼注釋文章鏈接源碼分析系列之環境搭建源碼分析系列之入口文件分析源碼分析系列之響應式數據一源碼分析系列之響應式數據二概述在使用vue的時候，會遇到很多神奇的地方，比如修改vue實例中data對象的屬性值，會觸發dom值的改變；改變dom中的輸入，會觸發data對應屬性的改變，即雙向數據綁定。通過watch可以...

Joonas 2019-08-23 15:10 評論0 收藏0
vue源碼分析系列之響應式數據（二）

摘要：巴拉巴拉省略大法，去除無關代碼巴拉巴拉省略大法，去除無關代碼核心就這一句話。文章鏈接源碼分析系列源碼分析系列之環境搭建源碼分析系列之入口文件分析源碼分析系列之響應式數據一前言接著上一篇的初始化部分，我們細看initData中做了什么。正文 initData function initData (vm: Component) { let data = vm.$options.d...

CKJOKER 2019-08-23 15:11 評論0 收藏0