1.什么是数据驱动?需要管理界面的渲染,只需要专心管理数据的修改。最经典的例子就是创建一个Vue实例:在界面上显示:当一个Vue实例被创建时,它会将数据对象中的所有属性添加到Vue的响应式系统中。当这些属性的值发生变化时,视图会“响应”,即用新值更新匹配。关于数据驱动接口,值得注意的是,只有创建实例时数据中已经存在的属性才具有响应性。如果您希望Vue不再跟踪更改,除了数据属性之外还可以使用Object.freeze()方法。Vue实例还公开了一些有用的实例属性和方法。它们都以$为前缀,以区别于用户定义的属性。例如2.数据驱动实现1.newVue(options)是干什么的?在Vue的源码中,src/core/instance/index.js定义了Vue的函数`functionVue(options){if(process.env.NODE_ENV!=='production'&&!(thisinstanceofVue)){warn('Vue是一个构造函数,应该用`new`关键字调用')}this._init(options)}`vue只能用new初始化,初始化后调用_init()函数,定义在src/core/instance/init`Vue.prototype._init=function(options?:Object){constvm:Component=this//auidvm._uid=uid++letstartTag,endTag/*istanbulignoreif*/if(process.env.NODE_ENV!=='production'&&config.performance&&mark){startTag=`vue-perf-start:${vm._uid}`endTag=`vue-perf-end:${vm._uid}`mark(startTag)}//避免这种情况被观察到的标志vm._isVue=true//mergeoptionsif(options&&options._isComponent){//优化内部组件实例化//因为动态选项合并非常慢,而且//内部组件选项需要特殊处理。initInternalComponent(vm,options)}else{vm.$options=mergeOptions(resolveConstructorOptions(vm.constructor),options||{},vm)}/*伊斯坦布尔忽略其他*/if(process.env.NODE_ENV!=='production'){initProxy(vm)}else{vm._renderProxy=vm}//暴露真实的selfvm._self=vminitLifecycle(vm)initEvents(vm)initRender(vm)callHook(vm,'beforeCreate')initInjections(vm)//解决数据之前的注入/propsinitState(vm)initProvide(vm)//解决数据之后的提供/propscallHook(vm,'created')/*istanbulignoreif*/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在build/webpack.base.conf.js中可以找到对应的Vue源码参考,在对应的地方打断点即可
