首页 > 其他 > 详细

Vue源码的初始化以及数据驱动逻辑

时间:2021-05-13 00:59:51      阅读:22      评论:0      收藏:0      [点我收藏+]
vue本身只解决了视图渲染的问题,其他问题都是依靠插件来解决的,vuex解决的是数据仓库的问题,vue-router解决的是路由问题。
 
从最新版的2.x版本分析,版本为2.6.12
Vue本身是一个构造函数,既然是构造构造函数遵从new 操作符的规则。继承原型链,执行构造函数逻辑。
因为这里不是要自己实现一个Vue,所以主要看构造函数执行了什么逻辑。从找到核心逻辑开始分析。
 
vue初始化做了什么事
Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等等。建立数据和事件的依赖关系。
 
function Vue (options) {
  if (process.env.NODE_ENV !== ‘production‘ &&
    !(this instanceof Vue)
  ) {
    warn(‘Vue is a constructor and should be called with the `new` keyword‘)
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

  

从状态data数据改变到dom节点更新,新的渲染流程
核心逻辑是data数据改变然后触发watcher,然后生成vnode,然后更新dom。
 
在setter触发时,会触发dep的notify,然后dep会遍历所有相关的Watcher,执行update,update是一个异步执行watcher的过程,实际执行的是watch的run方法。
run方法实际执行的是watcher的回调函数。这个回调函数用来更新dom节点的。
 
这个回调函数就是updateComponent方法。
这个方法的具体逻辑:调用Vue实例上的_render方法, 这个方法返回vnode,之后作为参数给_update方法,执行_update,_update的核心是__patch__,__patch__的核心是patch,也就是diff算法的核心方法。patch对比newvnode和oldvnode,最后更新必要的dom节点。更新的方法就是基本的dom操作方法:appendChild,createComment,createElement,createTextNode,insertBefore,removeChild等。

Vue源码的初始化以及数据驱动逻辑

原文:https://www.cnblogs.com/zhensg123/p/14761682.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!