new Vue的时候到底做了什么

最新推荐文章于 2024-04-21 21:04:29 发布
最新推荐文章于 2024-04-21 21:04:29 发布
阅读量627 收藏 2
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bb_xiaxia1998/article/details/128518701
版权

Vue加载流程

1.初始化的第一阶段是Vue实例也就是vm对象创建前后：首先Vue进行生命周期，事件初始化发生在beforeCreate生命周期函数前，然后进行数据监测和数据代理的初始化，也就是创建vm对象的过程，当vm对象创建完成就可以通过vm对象访问到劫持的数据，比如data中的数据，methods中的方法等。然后Vue调用内部的render函数开始解析模板将其解析为一个JS对象也即在内存中生成虚拟DOM也就是Vnode对象。第二阶段是vm对象挂载前后：挂载完成前页面呈现的是未经过Vue编译的DOM结构，所有对DOM的操作最终都不会生效。挂载前首先将内存中的Vnode转换为真实DOM插入页面，此时完成挂载。页面中呈现的就是经过Vue编译的DOM结构，至此初始化过程结束。

2.开启订阅消息也就是数据劫持代理监听，其实就是写了一个watcher函数去监听数据的改变，发送网络请求，绑定自定义事件等初始化操作。当数据发生变化以后即状态变更的时候，会重新构造新的Vnode对象。然后用新的Vnode对象和旧的Vnode对象进行差异比较也就是DIFF算法，然后把差异应用到旧的Vnode对象所构建的真正的DOM树上这个过程就是patch，视图就更新了

每一个组件在加载时都会调用Vue内部的render函数把该组件的tamplate选项的模板解析为一个JS对象，这个对象和DOM节点对象结构一样，然后是数据劫持代理监听，当数据发生变化以后，将旧Vnode对象和生成的新Vnode对象比较差异然后更新DOM

Vnode:
最低0.47元/天 解锁文章
bb_xiaxia1998
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
YoRenChen#Blog#vue2 - new Vue 做了什么1
07-25
new Vue()之后调用了_init方法，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher
new-vue
03-27
新价值 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue源码学习，new Vue都干了什么，beforeCreate，created，mounted触发前，都做了什么，执行顺序Props＞Setup＞Met＞Data＞Computed＞Watch
weixin_44434938的博客
01-17 921
需求：触发beforeCreate状态后，执行顺序Props>Methods>Data>Computed>Watch ，再触发created状态踩坑路漫漫长@~@
Vue源码学习 - new Vue初始化都做了什么？
铁锤妹妹的博客
07-25 548
如果觉得直接看源码很枯燥，可以结合前人总结的文章或者视频来看，相信会事半功倍。 源码这个东西，一定要多看多思考，要想精通，一遍两遍肯定是不够的。有的时候可能看着一个问题就会想通之前看过但是不明白的另个问题。
new Vue() 发生了什么？_new vue过程发生了什么，阿里二面是什么
最新发布
m0_61068088的博客
04-21 739
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包。
new Vue()这句代码，VUE做了什么事情？
m0_57742630的博客
07-13 1187
这些选项可以包括`data`、`methods`、`computed`、`watch`等，用于定义应用程序的状态、方法和计算属性等。7. 执行生命周期钩子：Vue在Vue实例的生命周期的不同阶段执行各种生命周期钩子，例如`created`、`mounted`等。6. 注册事件处理器：Vue根据Vue实例的`methods`和`computed`选项注册事件监听器。通过使用`new Vue()`创建一个Vue实例，您正在初始化Vue.js的核心功能，并为构建具有响应性和交互性的应用程序奠定基础。
VUE源码学习第三篇--new Vue都干了啥(概述)
恰恰虎的博客
03-04 2331
一、总体分析 当我们写下这段简单new Vue()代码，vue框架做了什么呢? var vm = new Vue({ el:"#app", data:{ msg:'tttt' } }) 会调用src/core/instance/index.js的Vue构造方法 function Vue (options) { if (process.en...
new vue 主要干了啥？
青阳的博客
02-03 2127
Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。 初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm ，挂载的目标 就是把模板渲染成最终的 DOM，那么接下来我们来分析 Vue 的挂载过程 Vue 不能挂载在 body 、 html 这样的根节点上。接下来的是很关键的 逻辑 —— 如果没有定义 render 方法，则会把 el 或者 tem.
VUE源码学习第六篇--new Vue都干了啥(挂载)
恰恰虎的博客
05-18 1330
一、总述 如果说前面的几部分都是准备工作，那么从挂载开始，就进入了正式的渲染工作，直到页面呈现出来。在开始分析代码前，我们可以思考下应该要做哪些工作。 1、将template中的各变量，表达式等替换成实际的值。比如： <div id="app"> <ul> <li v-for="item in items"> {{item...
vue源码分析-new Vue发生了什么
frontendchen的博客
02-17 4838
简单描述new Vue发生了什么 Vue是function实现的class，当执行new Vue()的时候，会进入到这个function，执行this._init()初始化，同时传入options参数，_init方法是在原型上挂载的方法，它是在什么时候被定义的呢？实际上我们初始化的时候下面会执行initMixin()混入，这个方法是在init.js中被定义的，方法中在原型上挂载_init方法 _init方法做了一堆初始化的操作，比如定义uid，合并options，它会把传入的options合并到$op
Vue.use()在new Vue() 之前使用的原因浅析
01-19
最近强迫症犯了，老在想为什么Vue.use函数执行，要在Vue实例化即new Vue(options)之前。解铃还须系铃人，这个问题只能通过看源码解决，于是。。。 先看Vue.use做了什么 Vue.use = function (plugin: Function | ...
为什么Vue.use()在new Vue() 之前使用
10-16
主要介绍了为什么Vue.use()在new Vue() 之前使用,需要的朋友可以参考下
xuangmu7-newVue元素
02-18
vue3-管理员简介vue3-admin是一个后台管理系统的前端页面展示，是由vue-cli4和elemnet-ui构造实现的。使用了最新的vue框架，内部采用了组件化开发模式，并已将每个组件都整合为单个功能原则。虽然刚开始看起来可能略...
new Vue() 发生了什么
weixin_53877433的博客
09-20 548
new Vue() 发生了什么
使用new Vue()的时候发生了什么？
一个努力不被优化的程序员
11-24 493
Vue.js是一个流行的JavaScript前端框架，用于构建单页面应用（SPA）和用户界面。当我们使用new Vue()来创建一个Vue实例时，Vue会执行一系列的初始化过程，将数据变成响应式，编译模板，挂载实例到DOM，并在数据变化时更新DOM。这个过程涉及到Vue的响应式系统、模板编译、虚拟DOM等核心概念。理解这些概念对于深入学习Vue和开发高效的Vue应用至关重要。
new Vue发生了什么?
blue_go_go的博客
09-25 359
new Vue发生了什么? 首先查看源码src/core/instance/index.js import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from './render' import { eventsMixin } from './events' import { lifecycleMixin } from './lifecycle' import { warn
VUE原理及运行机制
三包酸奶！的博客
06-18 1062
在修改对象值时，会触发响应的setter，setter通知之前【依赖收集】到的Dep 中的所有watcher，告诉他们自己的值变了，需要重新渲染视图。3.设置一个解析器 Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在 v-model，v-on等指令，则解析器 Compile 初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）如果修改了text3的数据，但视图中不需要text3，所以并不需要调用cb函数。
new Vue() 发生了什么？
A12536365214的博客
10-24 406
Vue.js是一个流行的JavaScript前端框架，用于构建单页面应用（SPA）和用户界面。当我们使用new Vue()来创建一个Vue实例时，Vue会执行一系列的初始化过程，将数据变成响应式，编译模板，挂载实例到DOM，并在数据变化时更新DOM。这个过程涉及到Vue的响应式系统、模板编译、虚拟DOM等核心概念。理解这些概念对于深入学习Vue和开发高效的Vue应用至关重要。
Vue源码常见问题
yiyueqinghui的博客
06-20 892
1，new Vue()都做了什么 1，new Vue ( ）是创建 Vue 实例，它内部执行了根实例的初始化过程。 2， 初始化过程具体包括以下操作： 合并配置 初始化事件中心 初始化生命周期 (new Vue()时只调用了beforeCreated、created两个生命周期) 初始化渲染 初始化数据 data、props、computed、watcher 等 3，new Vue( ) 创建了根实例并准备好数据和方法，以备将来执行挂载进使用。 2，说一说你对Vue响应式的理解 1，所谓数据响应式
new vue的原理是什么，做了什么操作
05-29
"new Vue()" 是 Vue.js 框架中用来创建 Vue 实例的语法。在执行这个语句时，Vue.js 会执行以下操作： 1. 创建一个空对象，作为 Vue 实例。 2. 初始化 Vue 实例的属性，包括 data、props、methods、computed 等。 3....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值