new vue做了什么

New Vue（new Vue）主要是创建一个Vue实例，并且开始执行Vue生命周期内的各项操作。具体来说，new Vue主要做了以下几件事情：

初始化Vue实例的配置：包括数据、方法、计算属性和侦听属性等。
初始化生命周期钩子函数：如beforeCreate、created、beforeMount、mounted等。
初始化事件和数据绑定：将Vue实例与DOM元素进行关联，建立响应式的数据绑定。
编译模板：将模板编译成渲染函数。
挂载DOM：将渲染后的模板挂载到指定的DOM元素上。

一、初始化Vue实例的配置

当调用new Vue时，Vue首先会初始化实例的配置。配置包括数据（data）、方法（methods）、计算属性（computed）和侦听属性（watchers）等。这些配置项会在Vue实例中注册，以便在后续操作中能够访问和使用。

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
});

数据（data）：所有的数据属性会被加入到Vue的响应系统中，任何对数据的修改都会引起视图的更新。
方法（methods）：方法可以在模板中绑定事件或在JavaScript代码中直接调用。
计算属性（computed）：计算属性会根据其依赖自动更新，只有在其依赖发生改变时才会重新计算。
侦听属性（watchers）：侦听属性用于监听数据的变化，并执行特定的回调函数。

二、初始化生命周期钩子函数

Vue实例在创建过程中会依次调用不同的生命周期钩子函数，如beforeCreate、created、beforeMount、mounted等。这些钩子函数允许开发者在Vue实例的不同生命周期阶段执行特定的代码。

new Vue({
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  }
});

每个钩子函数都有其特定的用途：

beforeCreate：实例初始化之前调用。
created：实例创建完成后调用。
beforeMount：实例挂载之前调用。
mounted：实例挂载之后调用。

三、初始化事件和数据绑定

Vue实例会将数据和事件绑定到模板中的DOM元素上。这使得模板中的数据可以通过Vue实例来进行访问和修改，同时也使得事件处理程序可以直接绑定到DOM事件上。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    changeMessage() {
      this.message = 'Hello World!';
    }
  }
});

在这个过程中，Vue会进行以下操作：

数据绑定：Vue会自动将数据属性绑定到模板中的DOM元素上，使得视图能够随着数据的变化而更新。
事件绑定：Vue会将方法绑定到模板中的事件上，使得事件触发时能够调用相应的方法。

四、编译模板

Vue在实例化时，会将模板编译成渲染函数。这个过程包括解析模板、生成AST（抽象语法树）、优化AST、生成渲染函数等步骤。

new Vue({
  template: '<div>{{ message }}</div>',
  data: {
    message: 'Hello Vue!'
  }
});

编译模板的步骤如下：

解析模板：解析模板字符串，生成AST。
优化AST：优化AST，标记静态节点，以便在后续渲染过程中能够跳过不需要更新的部分。
生成渲染函数：将优化后的AST转换成渲染函数。

五、挂载DOM

最终，Vue会将编译后的模板渲染成真实的DOM，并挂载到指定的DOM元素上。这个过程包括创建虚拟DOM、对比虚拟DOM和真实DOM、更新真实DOM等步骤。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

挂载DOM的步骤如下：

创建虚拟DOM：将编译后的渲染函数执行，生成虚拟DOM。
对比虚拟DOM和真实DOM：通过Diff算法对比虚拟DOM和真实DOM，找出需要更新的部分。
更新真实DOM：将需要更新的部分应用到真实DOM上，使视图与数据保持一致。

总结

通过上述分析，我们可以看到，new Vue主要完成了以下几个步骤：

初始化Vue实例的配置：注册数据、方法、计算属性和侦听属性。
初始化生命周期钩子函数：在实例的不同生命周期阶段执行特定的代码。
初始化事件和数据绑定：将数据和事件绑定到模板中的DOM元素上。
编译模板：将模板编译成渲染函数。
挂载DOM：将渲染后的模板挂载到指定的DOM元素上。

这些步骤使得Vue能够实现数据驱动的视图更新和高效的DOM操作。在实际应用中，开发者可以根据自己的需求在不同的生命周期钩子中执行特定的操作，以实现复杂的交互逻辑。建议开发者熟练掌握这些基本概念，以便更好地使用Vue进行前端开发。