成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

liujs / 1164人閱讀

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

概述

在使用vue的時候，data,computed,watch是一些經(jīng)常用到的概念，那么他們是怎么實現(xiàn)的呢，讓我們從一個小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;
    }
  }
})
簡單說明

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

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

當(dāng)我們new一個vue時，實際上執(zhí)行了vue的構(gòu)造函數(shù)，這個構(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)識該對象不需要被做響應(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)境，包裝實例本身，在后期渲染時候，做一些校驗提示輸出。
  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 */)
  }
  // 初始化計算屬性
  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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/101648.html

相關(guān)文章

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

    摘要：執(zhí)行當(dāng)時傳入的回調(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 評論0 收藏0

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

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

    nihao 評論0 收藏0

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

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

    kgbook 評論0 收藏0

  • vue源碼分析系列

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

    Joonas 評論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 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<