new Vue()之后都做了什么

最新推荐文章于 2023-07-13 17:40:05 发布
最新推荐文章于 2023-07-13 17:40:05 发布
阅读量307 收藏
点赞数
文章标签： vue.js 前端 mvvm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr__proto__/article/details/121092562
版权

这是一个面试题
实际上new Vue的过程也是new MVVM的过程

在这里插入图片描述

new MVVM 之后进行了两件事==> 一件是处理数据

​ ==> 另一件是渲染视图

第一条腿:Observer劫持监听所有data==> 通过Object.defindproy()给每个数据都添加dep属性

第二条腿:Compile解析指令去渲染页面==>创建watcher用来更新视图

两条腿之间的联系怎么来的?靠的是Object.defineProperty()把所有data都添加了getters和setter属性,getters来搭建dep和watcher之间的关系

Mr__proto__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端面试-浅谈New vue 之后发生了什么
qq_873366938的博客
06-08 519
New Vue 如果有看过源码的同学，不难发现从⼊⼝代码开始我们先来分析 new Vue 之后发⽣了哪些事情。 new 关键字在 Javascript 语⾔中代表实例化是⼀个对象。⽽ Vue 实际上是⼀个类，类在 Javascript 中是⽤ Function 来实现的，来看⼀下源码，在 src/core/instance/index.js中。 function Vue (options) { if (process.env.NODE_ENV !== 'production'&&amp
Vue源码分析(一) : new Vue() 做了什么
dijiangui5341的博客
07-18 219
Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前，我们先对Vue源码做一些基础的了解，如果你已经对基础的源码目录设计等有基础的了解的话，可以跳过下面这部分。 源码目录设计 Vue.js 的源码都在 src 目录下，其目录结构如下。 src ├── compiler # 编译相关 ├──...
Vue生命周期
qq_45044074的博客
04-16 165
创建vue实例和创建组件的流程基本一致 首先做一些初始化的操作，主要是设置一些私有属性到实例中 运行生命周期钩子函数beforeCreate 进入注入流程：处理属性、computed、methods、data、provide、inject，最后使用代理模式将它们挂载到实例中 运行生命周期钩子函数created 生成render函数：如果有配置，直接使用配置的render，如果没有，使用运行时编译器，把模板编译为render 运行生命周期钩子函数beforeMount 创建一...
new vue 后发生了什么
m0_38066007的博客
12-17 584
为了完整的了解整个机制，我们最好选择客户端compile的版本，也即Runtime + Compiler。 在我们使用Vue-Cli初始化一个Vue项目的时候，会询问我们使用Runtime Only版本还是Runtime + Compiler版本。 Runtime Only 使用该版本时，我们需要借助webpack的vue-loader工具来把.vue文件编译成JavaScript，体积比较小。 Runtime + Compiler 使用该版本时，...
new Vue 发生了什么
weixin_34413103的博客
10-30 285
从入口代码开始分析，我们先来分析 new Vue 背后发生了哪些事情。我们都知道，new 关键字在 Javascript 语言中代表实例化是一个对象，而 Vue 实际上是一个类，类在 Javascript 中是用 Function 来实现的，来看一下源码，在src/core/instance/index.js 中。 function Vue (options) { if (process.e...
YoRenChen#Blog#vue2 - new Vue 做了什么1
07-25
new Vue()之后调用了_init方法，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher
insurance-vue
03-19
我相信无论您有什么需求，该项目都将为您提供帮助。 国内用户可访问该地址在线预览 基本模板建议使用： 桌面： 打字稿： typescript （来源： ） 在v4.1.0+版本之后，默认的master分支将不支持i18n。请使用，它将...
vue.js应用开发笔记
03-01
1、项目搭建使用vue-cli脚手架，首先必须安装vue、vue-cli：cnpmivuevue-cli-g，全局安装完成之后我们便可以使用vue-cli脚手架进行项目结构搭建，具体如下：vueinitwebpackfrontend，如下：这里我们环境部分选择...
解决Vue打包上线之后部分CSS不生效的问题
12-13
new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), 然后在utils.js中添加， minimize:true const cssLoader = {...
解决vue组件销毁之后计时器继续执行的问题
01-19
t=+ new Date().getTime(); }，5000） 很粗暴的方法，在执行之前看是否被销毁就行， 第二种方法，调用路由组件内的钩子函数beforeRouteLeave beforeRouteLeave（to，from，next）{ clearTimeout（window.timer）
new Vue() 做了什么？
松柏手记
02-22 1455
new Vue() 做了什么？
new Vue之后，发生了什么？ 数据改变后，又发生了什么
qq_41797328的博客
05-10 134
如果遇到创建一个组件的vnode，则会进入组件实例化流程，该流程和创建vue实例流程基本相同，最终会把创建好的组件实例挂载到vnode的componentInstance属性中，以便复用。在执行_update函数的过程中，会触发patch函数，由于目前没有旧树，因此直接以当前的虚拟dom树的每一个普通节点生成elm属性，即真实dom。在执行render函数的过程中，会去掉之前的依赖，重新收集所有的依赖，将来依赖变化时会重新运行updateComponent函数。
面试官问我new Vue阶段做了什么？
web全栈开发的博客
11-14 4941
本篇录入吊打面试官专栏，希望能祝君拿下Offer一臂之力，各位看官感兴趣可移步🚶。这段时间面了很多家公司，被问到的题我感觉不重复不止100道，将会挑选觉得常见且有意义的题目进行分析及回答。有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。请问Vue中的的new Vue阶段做了什么？虽然是一句玩笑，但确是广东某处真实的现象。广东挺住！
04-new Vue做了啥
东逝水
03-31 402
这里打算介绍一下new Vue时，Vue做了啥，其实就是说一下_init方法的调用。 Vue方法里面只有一行代码this._init(options); 这个_init到底做了什么？让我们看看吧（core/instance/init.js）。 每个实例给一个全局的_uid _isVue赋值true 顶重要的一步计算当前实例的$options，后续的所以操作基本都是根据它去做的 _renderPr...
new Vue()这句代码，VUE做了什么事情？
m0_57742630的博客
07-13 1183
这些选项可以包括`data`、`methods`、`computed`、`watch`等，用于定义应用程序的状态、方法和计算属性等。7. 执行生命周期钩子：Vue在Vue实例的生命周期的不同阶段执行各种生命周期钩子，例如`created`、`mounted`等。6. 注册事件处理器：Vue根据Vue实例的`methods`和`computed`选项注册事件监听器。通过使用`new Vue()`创建一个Vue实例，您正在初始化Vue.js的核心功能，并为构建具有响应性和交互性的应用程序奠定基础。
new Vue() 时做了什么
keepMeaningless的博客
03-02 739
new Vue() 时做了什么 import Vue from 'vue' var app = new Vue({ el: '#app', mounted() { console.log(this.message) //hello }, data() { return { message: 'hello' } } }) 这块代码我们很熟悉，引用vue，然后创建Vue实例，那我们有没有想过我们
VUE源码学习第三篇--new Vue都干了啥(概述)
恰恰虎的博客
03-04 2328
一、总体分析 当我们写下这段简单new Vue()代码，vue框架做了什么呢? var vm = new Vue({ el:"#app", data:{ msg:'tttt' } }) 会调用src/core/instance/index.js的Vue构造方法 function Vue (options) { if (process.en...
Vue源码窥探之new Vue之后发生了什么？
假面猫的博客
09-17 496
为了完整的了解整个机制，我们最好选择客户端 compile 的版本，也即 Runtime + Compiler 。 在我们使用 Vue-Cli 初始化一个 Vue 项目的时候，会询问我们使用 Runtime Only 版本还是 Runtime + Compiler 版本。 Runtime Only 使用该版本时，我们需要借助 webpack 的 vue-loader 工具来把 .vue 文件编译...
new vue 主要干了啥？
青阳的博客
02-03 2123
Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。 初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm ，挂载的目标 就是把模板渲染成最终的 DOM，那么接下来我们来分析 Vue 的挂载过程 Vue 不能挂载在 body 、 html 这样的根节点上。接下来的是很关键的 逻辑 —— 如果没有定义 render 方法，则会把 el 或者 tem.
vue new FileReader
最新发布
09-04
在Vue项目中，您可以使用JavaScript中的FileReader来读取文件并获取其base64编码值。 在您的代码片段中，您创建了一个FileReader实例并使用readAsDataURL方法来读取文件并获取base64编码值。然后，您将base64编码值存储在that对象的base64属性中。然而，在提交请求的时候，您发现参数中没有包含该文件的base64值。您也尝试使用Promise来异步获取base64值并在提交请求之后再进行操作，但由于异步的原因，它没有起作用。 为了解决这个问题，您可以将异步操作放在一个方法中，并在该方法中使用Promise来获取base64值。然后在Promise的resolve函数中，将base64值传递给您的post请求函数。这样可以确保在获取到base64值后再进行请求操作。以下是一个可能的解决方案的示例代码： ``` readAsBase64(file) { return new Promise(function(resolve, reject) { let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { resolve(this.result); }; }); }, ``` 然后，在您的post请求函数中，您可以调用readAsBase64方法来获取文件的base64值，并将其作为参数传递给post请求。这样可以确保在获取到base64值后再进行请求操作。请注意，由于post请求是异步的，您可能需要使用async/await或.then()链来处理返回的Promise对象。 希望这个解决方案能帮助到您！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [在vue中使用axios实现post方式获取二进制流下载文件(实例代码)](https://download.csdn.net/download/weixin_38537050/13674769)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue建站：FileReader的异步问题](https://blog.csdn.net/JasonRaySHD/article/details/89643215)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值