/**
* 1.vue 的渲染
*
* 在vue中，我们通过 $mount 实例来挂载vm；首先缓存原型上的 $mount 方法，
* 然后限制 el , vue 不能挂载到 body html 这样的跟节点上，why
*
* render生成的vNode，通过$mount 方法，挂载 == 替换 到定义的dom元素上，总不能把body html这样的节点替换掉
* index.html中的 <div id="app"></div> 也就是替换了 id为app 的div，而不是插入到这个节点中
*
* 如果没有render 方法， template => render方法，也就是模板编译的过程；
*
* 模板编译的过程：
* 首先，解析模板生成AST抽象语法树(js对象形式来描述整个模板)，使用大量正则表达式进行处理。
* 其次，优化，并不是所有的vue数据都是响应式的，有些首次渲染之后就不会变化了，dom也不再变化，优化就是找到并标记这些静态节点，那么下次就可以跳过这些节点的对比。
* 最后，将优化后的AST树转换为 可以 执行的代码
*/
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
const options = this.$options
// resolve template/el and convert to render function
if (!options.render) {
//...
}
return mount.call(this, el, hydrating)
}
/**
* 实现骨架屏方法
*
* 1.模板中替换，在div#app中实现，渲染之后会把这个div#app替换掉
*
* 2.使用base64 图片，写入index.html 的div#app里，简单暴力
*
* 3.使用vue文件，优点是 不在默认的模板index.html文件中coding， 可维护性高
*
* 4.自动生成静态骨架屏的插件
*
* 饿了么开源插件 page-skeleton-webpack-plugin，目前仅支持 history 模式
*
* history模式是依赖html5新增api history.pushState() history.replaceState() 来新增 修改 历史记录
*/
参考：http://www.360doc.com/content/20/0709/11/21412_923150401.shtml
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
