鍍金池/ 問(wèn)答/HTML/ Vue中的響應(yīng)式原理,有兩個(gè)問(wèn)題請(qǐng)大家回答一下?

Vue中的響應(yīng)式原理,有兩個(gè)問(wèn)題請(qǐng)大家回答一下?

首先上代碼

var data ={
  msg:'hello world'
}  //定義一條數(shù)據(jù)
new Bue({
  data : data   //vm層  data是不能變得,讓data等于data 確定數(shù)據(jù)
})

function Bue(options){    ///?????????????
  var data = options.data   ///?????????????
  var _data = {}
  Object.defineProperty(_data,'msg',{
    get:function(){  //當(dāng)數(shù)據(jù)被使用的時(shí)候 觸發(fā),數(shù)據(jù)返回什么就顯示什么
      return data.msg
    },
    set:function(newvel){ //當(dāng)數(shù)據(jù)更改的時(shí)候被觸發(fā),將數(shù)據(jù)呈現(xiàn)在視圖里
      document.getElementById('a').innerHTML = newvel
    }
  })
  document.getElementById('a').innerHTML = _data.msg
  inp.oninput = function(){ //給input綁定一個(gè)如果更改文本框中的內(nèi)容就觸發(fā)就事件
  console.log(this)
    _data.msg = this.value    //這里的this指的就是input 讓input的值等于_data中的數(shù)據(jù),然后將數(shù)據(jù)呈現(xiàn)在頁(yè)面上。
  }
}

這是解釋vue響應(yīng)式原理的原生代碼,在此我有幾個(gè)問(wèn)題,希望大家可以幫忙解決?

1.這為什么要傳一個(gè)參數(shù)options呢?

2. var data = options.data 的作用是什么?為什么不直接data = data 呢?
回答
編輯回答
誮惜顏

因?yàn)檫@是一個(gè)對(duì)象,data只是這個(gè)對(duì)象里的一個(gè)屬性,option還有其他的屬性,比如el,methods, props
還有,在源碼中,外部數(shù)據(jù)的data的定義和vue對(duì)象是不同文件,你怎么用data = data

2017年8月24日 02:39