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的源码引用，能够在相应的地方打上断点