vue基础知识

1、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。

当我们点击按钮的时候动态给data增加成员,此时成员不是响应数据,如果想成为响应数据可以调用vm.set方法或者this.$set方法,其原理是通过调用此方法,将数据处理生成自己的get,set方法并添加到vue实例的属性中从而达到响应的目的

2、 vue中el不能挂载到body以及html上,vue中如果不存在render函数则会把template转换成render函数进行渲染,当有render函数的时候直接调用mount函数挂载DOM

3、vue---watcher对象：没有静态方法。因为$watch方法中要使用Vue的实例，watcher分为三种：计算属性watcher（vue中computed），用户自定义watcher（侦听器vue中watch），渲染watcher，创建顺序为：计算属性watcher（vue中computed），用户自定义watcher（侦听器vue中watch），渲染watcher，执行顺序同创建顺序，而在watch侦听器中，handler可以以数组的形式传递多个函数，也可以是字符串，当是字符串的时候vue实例会在（在methods中查找）方法中找到字符串对应的函数,

4、$nextTick()：执行nextTick时dom已经更新完毕，优先以微任务的形式执行回调，当浏览器不支持为任务的时候会降级，ie中是setImmediate,其他的是setTimeout,在修改完数据后，想要获取更新后 DOM 上最新数据，需要使用 nextTick，因为 DOM 的更新过程是异步的。nextTick 内部优先使用微任务执行异步的回调函数，如果浏览器不支持 Promise 的话会降级成 MutationObserver,如果当前浏览器不支持微任务，会降级成宏任务，如果是 IE 浏览器的话优先使用 setImmediate，否则的的使用 setTimeout(callback, 0)

5、完整版和运行时版的 Vue，编译后的文件中会同时存在支持 UMD、CommonJS、ESM 三种模块化的方式，VueCLI 生成的项目默认使用 Vue 是 ESM 模块化方式的运行时版本,运行时版本的 Vue 体积比编译器版本的 Vue 要小 30% 左右，并且运行时版本的 Vue 的运行效率要比完整版的 Vue 要高,运行时版本的 Vue 编译后的文件名是 vue.runtime.js 模块化的方式是 UMD，同时会编译出 vue.runtime.js(UMD)、vue.runtime.common.js 和 vue.runtime.esm.js 不同模块化方式的版本

6、当new vue实例的时候如果既传入template也传入render函数的话(此时执行哪个呢??):

从图中可以看出来在vue的处理中当不传render的时候会将template转成render,如果传了render那么就不再处理template了,然后执行mount方法渲染DOM

7、vue初始化过程:初始化data和props时为什么使用object.defineProperty(vue.property,'$data',dataDef),object.defineProperty(vue.property,'$props',propDef),呢？？因为通过这种方式将定义好的XXDef经过包装不允许使用者直接设置

初始化流程 

$mount 进行页面挂载

8、数组的响应式：重写数组的push，pop，shift,unshift,splice,sort,reverse等方法达到监控数组的目的，在重写的函数中不仅调用原方法还会调用dep.notify方法通知订阅者，当插入新元素的时候会调用observeArray重新遍历数组元素（针对数组元素是对象的时候当该元素的属性变化的时候可以通知订阅者，当元素不是对象的时候，通过索引改变值不触发通知），并将其设置为响应数据，因此通过索引改变数组元素值以及设置数组长度等操作的时候，数组虽然改变但是不是响应式的

9、虚拟DOM不一定可以提高性能，在首次渲染的时候会增加开销，复杂视图下提升渲染性能，通过给节点设置key属性可以让节点重用避免大量的重绘，render中的h函数就是￥createElement函数，h函数的参数：tag：标签名称或者组件对象，data:描述tag，可以设置DOM的属性或者标签的属性，children：tag中的文本内容或者子节点，vnode核心属性：tag，data,children,text elm,key

10、patch 的初始化是通过 createPatchFunction 完成，这个函数需要一个对象参数，它包含跟平台相关的模块和指令对象。createPatchFunction 是一个高级函数，这个函数最终返回 patch 函数，并准备好 patch 的必要必要参数，返回的 patch 函数在源码中会多次被使用。在首次渲染的时候调用 patch 函数传入 vm.$el 和 vnode，vm.$el 是真实 DOM，在 patch 函数内部会把 vnode 转换成真实 DOM，插入到 DOM 树，并把 vm.$el 移除，当数据更新后，调用 patch 会传入两个 VNode 对象，patch 会比较两个 VNode，最终把两个 VNode 的差异更新到真实 DOM

11、模板编译：a、作用：1.在vue 2.x中使用vnode描述视图以及各种交互，用户自己编写的vnode比较复杂，2:用户只需要编写类似HTML的代码-vue.js模板，通过编译器将模板转换为返回vnode的render函数，3：.vue文件会被webpack在构建过程中转换成render函数

模板编译过程：先去找缓存中编译的结果如果有的话直接返回，没有的话直接进行编译，并将编译的字符串形式的结果转换成函数形式并缓存并返回，具体编译过程：ast:1、compile 合并编译选项，basecompile-AST语法树：将模板转换成ast抽象语法树，在调用optmize优化抽象语法树，调用generate将抽象语法树转换成字符串形式的js代码最终返回一个包含ast，render渲染函数（字符串形式），staticRenderFns静态渲染函数（生成静态vnode树）的对象，2、basecompile-pase:将模板字符串转换成ast对象：3、basecompile-optmize：优化（标记抽象语法树中的静态节点），markStatic标记静态节点，markStaticRoots标记静态根节点，4、basecompile-generate:抽象语法树转成js代码：5、createCompilerCreator-creatFunction将字符串转换成js方法

b、之所以使用静态语法树：1.转成ast后可以通过ast对模板做优化处理，标记模板中的静态内容，2.在patch的时候直接跳过静态内容，3在patch的过程中静态内容不需要对比和重新渲染

13、组件化：a、组件注册：

全局注册

12、单文件组件的 template 模板在执行过程中会被编译成渲染函数,generate() 函数返回的是字符串形式的代码，还需要 toFunctions() 转换成函数的形式,模板和插值表达式在编译的过程中都会被转换成对应的代码形式，不会出现在 render 函数中,全局组件之所以可以在任意组件中使用是因为 Vue 构造函数的选项被合并到了 VueComponent 组件构造函数的选项中,在 createElement() 函数中调用 createComponent() 创建的是组件的 VNode。组件对象是在组件的 init 钩子函数中创建的，然后在 patch() --> createElm() --> createComponent() 中挂载组件