分析vue源码--->data挂载到vm

最新推荐文章于 2023-08-05 18:27:54 发布
最新推荐文章于 2023-08-05 18:27:54 发布
阅读量257 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5d0343d651882559f040273b
版权

  • 之前分析源码的笔记因为搬家丢了一部分，故将笔记写到网上来，也算是复习一下了
  • data为什么会挂在到vm上代理函数proxy

      其中defineProperty为设置或者修改对象属性的方法

       可以得出当访问vm.msg时，会返回vm._data.msg


转载于:https://juejin.im/post/5d0343d651882559f040273b

weixin_30613433
关注
Vue-基础使用
qq_45962090的博客
10-29 265
目录一、概述1.1 Vue.js是什么？1.2 如何引入vue?二、基本语法2.1 如何创建Vue应用？2.2 如何声明式渲染？2.3 什么是Vue的响应式？三、Vue指令3.1 v-pre指令3.2 v-once指令3.3 v-text指令3.4 v-html指令3.5 v-if和v-else指令3.6 v-else-if指令3.7 v-show指令 一、概述 1.1 Vue.js是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue
Vue源码分析之-Vue初始化的过程
前端高薪进击手记
07-07 715
Vue初始化过程调试 在src/core/global-api/index.js中，给Vue函数定义挂载了以下的静态成员： Vue的实例初始化过程 根据new Vue时的options挂载了各种属性成员：Vue首次渲染的过程
MVVM原理（代理data）
WF帆少的博客
02-20 278
const arrayProto = Array.prototype; function defArrayFunc(obj, func, namespace, vm) { Object.defineProperty(obj, func, { configurable: true, enumerable: true, // 当且仅当该属性的enumerab...
03-Vue之el挂载点和data数据对象
小白的博客
01-03 324
1. el：挂载点 1.1 Vue实例的作用范围 Vue会管理el选项命中的元素及其内部的后代元素 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu..
Vue（数据绑定、el和data多种写法、理解MVVM、数据代理）
weixin_57920269的博客
04-23 1170
get() {},},});
Vue的MVVM模型和数据代理
最新发布
a_ausb的博客
08-05 84
Vue的MVVM模型以及数据代理
vue自定义表单生成器form-create使用详解
10-16
Vue 自定义表单生成器 `form-create` 是一个强大的工具，它允许开发者根据 JSON 参数动态地生成表单，极大地简化了复杂表单的构建过程。`form-create` 支持 Vue 的各种组件，并且提供了丰富的功能，如动态渲染、数据...
vue源码分析-组件
yyzzabc123的博客
11-04 300
我们知道，组件是Vue体系的核心，熟练使用组件是掌握Vue进行开发的基础。上一节中，我们深入了解了Vue组件注册到使用渲染的完整流程。这一节我们会在上一节的基础上介绍组件的两个高级用法：异步组件和函数式组件。
每天学点Vue源码之vm.$mount挂载函数
10-17
总的来说，`vm.$mount()`是Vue中将组件实例与DOM关联的关键步骤，它在不同构建版本的Vue中有所差异，但核心功能是将组件渲染并插入到指定的DOM元素中。理解这个过程对于深入学习Vue的生命周期和渲染机制至关重要。...
vue muit-ui infinite-scroll源码解析
ScheduledThreadPoolExecutor原理源码解析
05-22 1万+
infinite scroll基本使用vue的mint-ui的infinite scroll的基本使用地址：infinite-scroll接入指南. 简单解释一下： 1、指令接受的method：处理loadmore回调 2、自定义属性infinite-scroll-disabled：为false时:不会进行是否到达底部的判断,因此就触发不了loadmore回调 3、自定义属性infinite
Vue源码：vue实例挂载篇
老司机的后备箱
06-28 2314
在new一个Vue对象的时候，内部究竟发生了什么？Vue的构造类只做了一件事情，就是调用_init函数进行初始化。 2._init，初始化 _init主要做了这两件事： initData 首先判断data是不是函数，如果是函数的话执行getData。getData做的事情很简单：，因为vue推荐我们把data定义为一个函数然后返回具体的data对象，因此getData只需执行一次data拿到返回值即可。 判断是否与props属性名冲突，然后将data挂载到vue实例中。这里是通过proxy对vue实例的g
Vue数据绑定与数据代理
qq_54250695的博客
01-11 559
❶当我们声明vue实例对象之后，即vm； ❷vm中会生成各种配置对象options，其中options包含了_data； ❸由于底层代码的支持会自动给_data中每个数据，在_data的外部(即同级)添加对应新的元素(即数据代理)，如上图中的name、address，同时每个name、address中都会有setter、getter函数。 ​ ​ ...
Vue的挂载以及data数据
weixin_70424030的博客
08-09 1698
什么时候使用对象式data数据，而又什么情况下使用return数据呢？
vue学习笔记--数据代理
aspxgod10的专栏
03-02 384
1.什么是数据代理？ 数据代理：通过一个对象代理对另一个对象中属性的操作(读/写)。 下面我们通过一个简单的例子来了解什么是数据代理： 1.我们定义了两个对象 obj 和 obj2 2.然后通过Object.defineProperty() 方法给obj2的对象上面添加了一个属性 x 在配置对象中我们定义了get() 方法和 set() 方法 3.当我们访问obj2的x属性时触发get() 方法把obj.x的值返回给我们 4.当我们修改obj2.x的值时候触发了set() 方法 把我.
Vue监测数据改变原理
KAMHUNCHAN的博客
04-25 440
vm身上有 _data 属性，_data的属性来自new vue时传入的数据，但是vue做了数据处理，给每个属性加入了getter和setter，因此数据改变时会调用set方法，set方法里面做了重新解析模板的操作（重新解析模板–>生成新的虚拟dom–>新旧dom对比，diff算法–>更新页面） 如果直接往vm._data或者vm身上的对象添加属性，则该属性没有getter，setter方法，无法实现数据监测也无法读取，应该使用Vue.set(obj,prom,value)或者vm.$se
vue2.0中data如何被挂载的
liubangbo的专栏
05-31 420
在面试中被问到这个问题。 <html> <head> <style type="text/css"> .div-cls { color: red; } </style> </head> <body> <script src="./vue.js"></script> <div id="app"> <
Vue之Vue实例创建整体流程
玉案轩窗的博客
09-03 7868
前言 上篇文章是Vue初始化加载的过程，主要的处理是对Vue实例方法以及静态方法的定义。 本篇是分析调用Vue构造函数的过程，实际上是主要分析大致流程、props、methods、data。 具体逻辑 使用Vue构造函数创建Vue实例，具体的处理逻辑如下图： 从上图中可以看出，Vue实例的具体处理是定义相关的内部属性包括props、data、methods、computed都会在创建...
【Vue】Vue入门：el挂载及data数据对象
dkz97的博客
07-02 1410
前言 最近在公司工作时，需要针对Vue的框架修理bug，由于自身对Vue不太熟悉，所以前辈就让其去学习一下Vue，以便更好的投入到工作当中，顺便随便写个文章来记录下遇到的问题。 基础 简介 1.js框架   使用之前，要先清楚，vue只是一个js的框架，而不是一个特别的语言，所以在学习vue之前，要先学会前端的三大剑客，HTML,CSS,JavaScript。而当前学习的Vue就是JavaScript的框架，为的是能更快速、方便的进行网页开发，以及与后端的交互等。 2.简化dom操作   如果在学习或者在
vue $ 符号（例如vm.$data vs vm.data）：读取实例属性 vs 读取 data 数据
热门推荐
weixin_41796631的博客
01-17 1万+
vm.$ 读取实例中属性列表（第一层） vm.data 直接读取实例 data 数据属性中的数据值（第二层）。等价于 vm.$data.data &lt;script&gt; var ok=new Vue({ data:{ a:"aa", b:"bb", c:"cc", data:"ddd", options:"op", myOption:"opp"}
Vue-Router源码分析：深入路由实现原理
"详解Vue-Router源码分析路由实现原理" Vue-Router是一个基于Vue.js的路由管理器，用于管理单页应用程序（SPA）的路由。下面我们将深入分析Vue-Router的源码，了解其路由实现原理。 一、Vue-Router源码结构 Vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值