vue学习笔记之数据驱动

1、数据驱动是什么

vue.js的核心思想是数据驱动页面，所谓数据驱动，就是页面上的dom结构由数据的映射产生，开发项目的过程中，我们不需要去管界面的渲染，只需要集中精力管理数据的修改。
最经典的例子
创建一个vue的实例：

当一个 Vue 实例被创建时，它将data对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

关于数据驱动界面，值得注意的点：

1. 只有当实例被创建时就已经存在于data中的属性才是响应式的
2. 如果希望vue不再追踪到变化，Object.freeze()这个方法
3. 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。例如
   

2、数据驱动的实现

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)
}

}`

3、tips可以在vue项目调试源码的技巧

在build/webpack.base.conf.js中找到对应的vue的源码引用，可以在相应的地方打上断点