function Vue(options) {
//初始化工作
dosomething()
//检查是否有beforeCreate,有则执行
if (options.beforeCreate) options.beforeCreate()
//初始化数据并且进行双向绑定
initDataAndWatchData()
//此时数据以及初始化完成,检查是否有created,有则执行 (可以进行ajax操作)
if (options.created) options.created()
//判断是否有el选项 没有不往下走 当调用vm.$mount('#app')时进行
if (options.el) {
//判断是否有template选项 如果有则渲染
//如果没有,则把el对应的Html当成template来处理
if (!options.template) {
options.template = options.el.outerHTML
}
//渲染template
parseTemplateToRenderFunction(options.template)
//检查是否有beforeMount,有则执行
if (options.beforeMount) options.beforeMount()
//创建真实的HTML替换容器中的旧的HTML
createReallyDomAndReplaceOldDom()
//检查是否有mounted,有则执行 (Dom初始化完成,可以进行页面样式处理 如引用 Dom插件 swiper/echarts)
if (options.mounted) options.mounted()
}
//监听数据变化 开一个或者多个监听器
function listenDataChanged() {
//有数据变化时,检查是否有beforeUpdate,有则执行
if (options.beforeUpdate) options.beforeUpdate()
//修改data并更新Dom
setDataAndReplaceDom()
//已更新完成,检查是否有updated,有则执行
if (options.updated) options.updated()
}
//监听数据变化
listenDataChanged()
function listenDestroy() {
//当组件跳转或者切换时,将会触发销毁操作
//检查是否有beforeDestroy,有则执行
if (options.beforeDestroy) options.beforeDestroy()
//销毁事件和监听器等
removeListenAndWatcher()
//销毁完成时,检查是否有destoryed,有则执行
if (options.destoryed) options.destroyed()
}
//监听销毁方法 vm.$destroy()
listenDeatroy()
}
网友评论