Vue.js源码解析——new Vue()做了什么事情

原创

于 2020-06-29 23:43:24 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #javascript

本文探讨了Vue.js中`new Vue()`操作背后的原理。它首先检查是否在生产环境中正确使用`new`关键字，然后调用`_init`方法初始化各种属性，如"data"、"methods"、"props"、"computed"和"watch"。`initState`方法负责初始化用户定义的属性，特别是`initData`对"data"进行处理，通过`Object.defineProperty`创建getter和setter，并通过`observer`实现数据绑定。最后，如果存在`el`属性，将调用`$mount`进行挂载和渲染。整个实例化过程涉及组件生命周期和数据绑定的关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js中我们可以用以下的语法来声明式渲染数据

<div id="app">
	{
   
   {
   
   message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	const app = new Vue({
   
   
		el:"#app",
		data:{
   
   
			message:"Hellp Vue!"
		}
	})
</script>

在页面上能看到Hellp Vue!，那么new Vue()做了什么呢？
首先找到Vue()这个类，在src/core/instance/index.js中

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

首先判断当前的环境是不是生产环境，且在调用Vue的时候，有没有用new操作符，如果没有就会调用warn，抛出一个警告告诉我们Vue是一个构造函数，需要用new操作符去调用
接着调用_init方法，传递的参数便是我们在new Vue时传进去的对象

{
   
   
	el:"#app",
	data:{
   
   
		message:"Hellp Vue!"
	}
}

_init方法是 initMixin 封装到vue函数原型中的，此方法在src/core/instance/init.js

let uid = 0//每个Vue实例都有一个id

export function initMixin (Vue: Class<Component

最低0.47元/天解锁文章

200万优质内容无限畅学