习惯但被忽视的vue知识根元素父模板中调用组件的元素会被组件本身的模板替换。所以如果组件的模板包含多个顶级元素：Vue.component('example',{template:'
A
'+'
B
'})或者模板包含onlyText:Vue.component('example',{template:'Helloworld'})在这两种情况下，实例都将成为片段实例，即没有根元素的实例。它的$el指向一个锚节点（正常模式下为空文本节点，调试模式下为注释节点）。更重要的是，父模板组件元素上的指令、转换和属性绑定（props除外）将不起作用，因为生成的实例没有根元素供它们绑定
Extension:WebComponents-future-orientedcomponents标准组件中的数据必须是一个函数定义组件时，数据必须声明为返回初始数据对象的函数，因为组件可用于创建多个实例。如果数据仍然是一个纯对象，所有实例将共享对同一个数据对象的引用！通过提供数据函数，我们可以在每次创建新实例时调用数据函数，返回原始数据对象的新副本。如果需要，可以通过将vm.$data传递给JSON.parse(JSON.stringify(...))来获得原始数据对象的深层副本。Complextype=>PointerSimpletype=>ValueVue.nextTick()Vue的DOM更新是异步进行的。当检测到数据变化时，Vue会打开一个队列，然后在同一个事件循环（eventloop）中观察到数据变化的观察者被推入这个队列。如果一个观察者在一个事件循环中被多次触发，它只会被推送到队列中一次。然后，在进入下一个事件循环时，Vue将清除队列并进行必要的DOM更新。(microtasksandmacrotasks)if(typeofMutationObserver!=='undefined'&&!hasMutationObserverBug){varcounter=1//创建一个MutationObserver，观察者监听到dom变化后会执行回调nextTickHandlervarobserver=newMutationObserver(nextTickHandler)vartextNode=document.createTextNode(counter)//调用MutationObserver接口观察文本节点的字符内容observer.observe(textNode,{characterData:true})//每次执行timerFunc时，文本的内容节点会在0/1之间切换，//不要使用true/false，可能有些浏览器存在设置文本节点内容为true/false的bug？//切换后，将新值分配给我们的MutationObservertimerFunc=function(){counter=(counter+1)%2textNode.data=counter}}else{//webpack尝试为setImmediate//如果它用作全局变量，那么我们必须解决这个问题//避免捆绑不必要的代码。//webpack默认会在代码中插入setImmediateshims//如果没有MutationObserver，先使用setImmediate，不再使用setTimeoutconstcontext=inBrowser?窗口：typeofglobal!=='undefined'？全局：{}timerFunc=context.setImmediate||setTimeout}MOandPromise.resolve().then(nextTickHandler)//文档示例varvm=newVue({el:'#example',data:{msg:'123'}})vm.msg='newmessage'//改变数据vm.$el.textContent==='newmessage'//falseVue.nextTick(function(){vm.$el.textContent==='newmessage'//true})cssscopeddata-v-079ce416属性app[data-v-079ce416]跟随作用域，webpackloader处理，加上'[hash:base64]'属性h=>h(App)hiscreateElement()，传入{}，返回vNode；template转DOM的一般流程：template模板parse处理后返回AST得到一个AST，然后通过generate()生成渲染函数，执行渲染函数后会得到一个VNode，也就是虚拟DOMpatch函数，它负责将虚拟DOM变为真实DOM
