vue學習筆記之數據驅動

一、數據驅動是什麼

vue.js的核心思想是數據驅動頁面，所謂數據驅動，就是頁面上的dom結構由數據的映射產生，開發項目的過程當中，咱們不須要去管界面的渲染，只須要集中精力管理數據的修改。
最經典的例子
建立一個vue的實例：

界面上的展現：

當一個 Vue 實例被建立時，它將data對象中的全部的屬性加入到 Vue 的響應式系統中。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。

關於數據驅動界面，值得注意的點：

1. 只有當實例被建立時就已經存在於data中的屬性纔是響應式的
2. 若是但願vue再也不追蹤到變化，Object.freeze()這個方法
3. 除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴$，以便與用戶定義的屬性區分開來。例如
   

二、數據驅動的實現

1. new Vue(options)作了什麼
在vue的源碼中src/core/instance/index.js 定義vue的函數
`function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}`
vue只能經過new來初始化，初始化以後調用_init()函數，定義在src/core/instance/init
` Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++

let startTag, endTag
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  startTag = `vue-perf-start:${vm._uid}`
  endTag = `vue-perf-end:${vm._uid}`
  mark(startTag)
}

// a flag to avoid this being observed
vm._isVue = true
// merge options
if (options && options._isComponent) {
  // optimize internal component instantiation
  // since dynamic options merging is pretty slow, and none of the
  // internal component options needs special treatment.
  initInternalComponent(vm, options)
} else {
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  )
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
  initProxy(vm)
} else {
  vm._renderProxy = vm
}
// expose real self
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  vm._name = formatComponentName(vm, false)
  mark(endTag)
  measure(`vue ${vm._name} init`, startTag, endTag)
}

if (vm.$options.el) {
  vm.$mount(vm.$options.el)
}

}`

三、tips能夠在vue項目調試源碼的技巧

在build/webpack.base.conf.js中找到對應的vue的源碼引用，能夠在相應的地方打上斷點