vue看到页面都执行了什么

在Vue.js中，当页面加载完成后，会依次执行以下步骤：

1. 解析模板：Vue通过模板解析器将Vue组件的模板转换为虚拟DOM树。模板可以使用Vue提供的模板语法或者JSX语法编写。

2. 创建虚拟DOM：解析模板后，Vue将根据解析得到的虚拟DOM树来创建真实的虚拟DOM。

3. 挂载虚拟DOM：虚拟DOM被创建之后，它会被挂载到Vue实例的el属性所指定的DOM元素上，从而与页面上的HTML元素建立起联系。

4. 响应式数据绑定：Vue会检测组件中数据的变化，并建立起对应的数据依赖关系。当数据发生变化时，Vue会自动更新相关的DOM。

5. 编译模板：在挂载虚拟DOM之前，Vue会进行模板编译。模板编译包括将模板中的指令、表达式等转换为对应的JS代码，以实现动态绑定。

6. 创建Watcher：Watcher是与虚拟DOM相关联的对象，它负责监听数据的变化并触发重新渲染。当数据变化时，Watcher会通知虚拟DOM进行更新。

7. 渲染虚拟DOM：渲染虚拟DOM是将虚拟DOM转换为真实的DOM元素。Vue使用Diff算法来比较新旧虚拟DOM的差异，然后进行最小化更新。

8. 更新页面：当虚拟DOM更新完成后，Vue会将更新后的DOM元素渲染到页面上，更新视图。

9. 生命周期钩子函数：在页面渲染完成后，Vue会依次调用组件的生命周期钩子函数，比如created、mounted等。

综上所述，Vue在页面加载时主要进行模板解析、虚拟DOM的创建和挂载、数据绑定、模板编译、Watcher创建、虚拟DOM的渲染和更新等步骤，最终完成页面的渲染和响应式更新。

在Vue中，当页面加载时，会执行以下任务：

1. 初始化Vue实例：当页面加载时，Vue会创建一个根Vue实例，这个实例是整个应用的入口点。在这个过程中，Vue会做一些初始化工作，如设置数据响应式、编译模板、创建虚拟DOM等。

2. 解析模板：Vue使用模板语法来描述页面的结构和数据绑定关系。在页面加载时，Vue会将模板编译为渲染函数，这个渲染函数是Vue用于生成虚拟DOM的函数。

3. 创建虚拟DOM：在页面加载时，Vue会根据模板生成虚拟DOM。虚拟DOM是一个轻量级的JavaScript对象，它是对真实DOM的一个抽象表示，通过虚拟DOM，Vue可以高效地更新真实DOM。

4. 进行数据绑定：Vue会将数据与虚拟DOM进行绑定，这样当数据发生变化时，Vue会自动更新相应的虚拟DOM，并应用到真实DOM上。Vue使用一种叫做响应式系统的机制来实现数据绑定，当数据发生变化时，Vue会自动检测并触发相应的更新。

5. 渲染页面：当虚拟DOM与数据绑定完成后，Vue会根据虚拟DOM生成真实DOM，并将其插入到页面中。然后，Vue会监听用户的操作，当用户与页面交互时，Vue会根据需求更新相应的虚拟DOM，并重新渲染页面。

总结起来，Vue在页面加载时，会执行初始化Vue实例，解析模板，创建虚拟DOM，进行数据绑定，以及渲染页面的工作。这些工作是为了使Vue能够将数据与页面进行关联，并实现页面的动态更新。

当Vue应用加载并且页面渲染完毕后，会执行一系列的步骤和操作。下面是这些步骤的详细说明：

1. 解析模板：Vue会利用模板以及相关组件和指令，解析出DOM节点的结构。

2. 创建Vue实例：Vue会在内部创建一个Vue实例，用于管理数据和状态。

3. 初始化Vue实例：在创建Vue实例之后，Vue会执行一系列的初始化操作，包括监听数据变化、编译模板、挂载Vue实例等。

4. 数据响应式绑定：Vue会根据数据对象的所有属性创建getter和setter，以实现数据的响应式绑定。当数据发生变化时，会触发相应的更新操作。

5. 编译模板：Vue会遍历模板中的每个节点，解析指令和插值表达式，并将其转换为渲染函数。

6. 渲染页面：Vue会根据渲染函数生成虚拟DOM，然后将虚拟DOM转化为实际的DOM节点，并插入到页面中。

7. 监听数据变化：Vue会为每个数据属性创建依赖追踪器，当数据发生变化时，会触发相应的更新操作。

8. 挂载Vue实例：Vue会将Vue实例挂载到页面的特定位置，从而使其可以与页面交互。

9. 执行生命周期钩子函数：在Vue实例被创建和销毁的过程中，Vue会触发一系列的生命周期钩子函数，可以在这些钩子函数中执行一些特定的操作。

10. 响应事件：当用户与页面交互时，Vue会响应相应的事件，并执行相应的事件处理函数。

总的来说，当Vue应用加载并且页面渲染完毕后，会进行模板解析、创建Vue实例、数据响应式绑定、编译模板、渲染页面、监听数据变化、挂载Vue实例等一系列操作。这些操作使得Vue应用能够实现数据的双向绑定，以及响应式更新页面的功能。