vue源码分析

最新推荐文章于 2022-09-07 23:03:33 发布

冰中何人知

最新推荐文章于 2022-09-07 23:03:33 发布

阅读量75

点赞数

分类专栏： vue源码分析文章标签： vue 源码

本文链接：https://blog.csdn.net/weixin_44167314/article/details/85089772

版权

vue源码分析专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue源码分析

<body>
	<div id="app">
	  <p>{{ message }}</p>
	  <input type="text" v-model="message">
	</div>
</body>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeMount:function () {
  	console.log("开始进入");
  }
})

1、vue初始化过程

1、new Vue() 
2、this._init(options);        //Vue.prototype._init
   合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等
3、vm.$mount(vm.$options.el);  //Vue.prototype.$mount
4、mountComponent(this, el, null);
   这一步通过 vm.$options.render = createEmptyVNode; 创一个空的虚拟dom节点
5、vm._update(vm._render(), null);  //这一步的时候开始new Watcher() 
6、vm._render()   //Vue.prototype._render
   创建虚拟dom，将相关数据都赋上值
   vnode = render.call(vm._renderProxy, vm.$createElement);
7、vm.$createElement()   //真正调用的是createElement（）
   这个方法真正创建一个虚拟dom树
8、vm._update()
   将虚拟dom树转化为真实的dom结构
   在new Watcher(vm, updateComponent, noop, null, true)这步将真实dom渲染到页面

2、vue生命周期方法回调原理：
先在_init()方法里将new Vue()里面的生命周期方法添加到vm.options里面
再在相关代码执行步骤里添加callHook(vm, ‘beforeCreate’);
如果vm.$options里面有对应方法，则立即执行

function callHook (vm, hook) {
  pushTarget();
  var handlers = vm.$options[hook];
  if (handlers) {
    for (var i = 0, j = handlers.length; i < j; i++) {
      try {
        handlers[i].call(vm);
      } catch (e) {
        handleError(e, vm, (hook + " hook"));
      }
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook);
  }
  popTarget();
}

在这里插入图片描述

冰中何人知

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue源码分析

vue源码分析&lt;body&gt; &lt;div id="app"&gt; &lt;p&gt;{{ message }}&lt;/p&gt; &lt;input type="text" v-model="message"&gt; &lt;/div&gt;&lt;/body&gt;var app = new V
复制链接

扫一扫

专栏目录