成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue源碼分析系列之響應(yīng)式數(shù)據(jù)（一）

liujs / 1112人閱讀

摘要：代碼初始化部分一個(gè)的時(shí)候做了什么當(dāng)我們一個(gè)時(shí)，實(shí)際上執(zhí)行了的構(gòu)造函數(shù)，這個(gè)構(gòu)造函數(shù)內(nèi)部掛載了很多方法，可以在我的上一篇文章中看到。合并構(gòu)造函數(shù)上掛載的與當(dāng)前傳入的非生產(chǎn)環(huán)境，包裝實(shí)例本身，在后期渲染時(shí)候，做一些校驗(yàn)提示輸出。

概述

在使用vue的時(shí)候，data,computed,watch是一些經(jīng)常用到的概念，那么他們是怎么實(shí)現(xiàn)的呢，讓我們從一個(gè)小demo開始分析一下它的流程。

demo演示代碼片段 html代碼 


  
    demo
    
  
  
    

      

          
a：{{a}}

          
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;
    }
  }
})
簡(jiǎn)單說明

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

代碼初始化部分 new一個(gè)Vue的時(shí)候做了什么

當(dāng)我們new一個(gè)vue時(shí)，實(shí)際上執(zhí)行了vue的構(gòu)造函數(shù)，這個(gè)構(gòu)造函數(shù)內(nèi)部掛載了很多方法，可以在我的上一篇文章中看到。構(gòu)造函數(shù)內(nèi)部調(diào)用了_init方法，那我們看看init里做了什么即可。

function Vue (options) {
  this._init(options)
}
init函數(shù) 
Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++

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


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

這篇文章講述的內(nèi)容,需要我們著重關(guān)注一下initState函數(shù)與vm.$mount中渲染部分的內(nèi)容。

initState函數(shù) 
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 */)
  }
  // 初始化計(jì)算屬性
  if (opts.computed) initComputed(vm, opts.computed)
  // 初始化watch
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

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

文章鏈接

vue源碼分析系列

vue源碼分析系列之debug環(huán)境搭建

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

vue源碼分析系列之響應(yīng)式數(shù)據(jù)（二）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101648.html

相關(guān)文章

  • vue源碼分析系列之響應(yīng)式數(shù)據(jù)（四）

    摘要：執(zhí)行當(dāng)時(shí)傳入的回調(diào)，并將新值與舊值一并傳入。文章鏈接源碼分析系列源碼分析系列之環(huán)境搭建源碼分析系列之入口文件分析源碼分析系列之響應(yīng)式數(shù)據(jù)一源碼分析系列之響應(yīng)式數(shù)據(jù)二源碼分析系列之響應(yīng)式數(shù)據(jù)三 前言 上一節(jié)著重講述了initComputed中的代碼，以及數(shù)據(jù)是如何從computed中到視圖層的，以及data修改后如何作用于computed。這一節(jié)主要記錄initWatcher中的內(nèi)容。 ...

    GHOST_349178 評(píng)論0 收藏0

  • vue源碼分析系列之入debug環(huán)境搭建

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

    nihao 評(píng)論0 收藏0

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

    摘要：中引入了中的中引入了中的中，定義了的構(gòu)造函數(shù)中的原型上掛載了方法，用來做初始化原型上掛載的屬性描述符，返回原型上掛載的屬性描述符返回原型上掛載與方法，用來為對(duì)象新增刪除響應(yīng)式屬性原型上掛載方法原型上掛載事件相關(guān)的方法。 入口尋找 入口platforms/web/entry-runtime-with-compiler中import了./runtime/index導(dǎo)出的vue。 ./r...

    kgbook 評(píng)論0 收藏0

  • vue源碼分析系列

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

    Joonas 評(píng)論0 收藏0

  • vue源碼分析系列之響應(yīng)式數(shù)據(jù)（二）

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

    CKJOKER 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<