vue源码分析(三)——new Vue 的过程(详解data定义值后如何获取的过程)

文章目录

  • 零、准备工作
    • 1.创建vue2项目
    • 2.修改main.js
  • 一、import Vue from 'vue'引入的vue是哪里来的(看导入node_modules包)
    • 1: 通过node_modules包的package.json文件
    • 2: 通过配置中的main入口文件进入开发环境的源码
      • (1) 生产环境
      • (2) 开发环境
    • 3: 查看node包中生产环境的源码
  • 二、解析挂载的#app(还是看源码)
  • 三、解析data定义值后如何获取的
    • 1. vue 项目中main.js
      • (1)代码
      • (2)效果![在这里插入图片描述](https://img-blog.csdnimg.cn/170df3ef6e4f4e7393f24605def8063b.png)
      • (3)思考
        • ①根据vue的源码找到stateMixin
        • ②stateMixin文件中的initData方法就是初始化data数据


零、准备工作

1.创建vue2项目

vue init webpack vue2_project (vue2_project 文件名)

2.修改main.js

import Vue from 'vue'var app = new Vue({el: '#app',data: {message: '我是一个双向绑定的数据'}
})

一、import Vue from 'vue’引入的vue是哪里来的(看导入node_modules包)

1: 通过node_modules包的package.json文件

从vue2_project中\node_modules\vue\package.json中找到main的入口文件
在这里插入图片描述

2: 通过配置中的main入口文件进入开发环境的源码

(1) 生产环境

生产环境:node_modules\vue\dist\vue.runtime.common.dev.js

在这里插入图片描述

(2) 开发环境

开发环境:node_modules\vue\dist\vue.runtime.common.dev.js

在这里插入图片描述

3: 查看node包中生产环境的源码

看到这里,你就会发现和vue源码中的构建找到vue 函数中的是一样的了。

在这里插入图片描述

二、解析挂载的#app(还是看源码)

首先,通过构建vue我们知道Vue其实是个函数
路径:vue\src\core\instance\init.ts

在这里插入图片描述

如上可知:el挂载其实就是在初始化initMixin函数的时候判断的

export function initMixin(Vue: typeof Component) {if (vm.$options.el) {vm.$mount(vm.$options.el)}
}

vue2中的main文件new Vue挂载加$mount的原因
在这里插入图片描述

三、解析data定义值后如何获取的

根据一、二我们了解了main 中new Vue的el挂载和$mount方法

1. vue 项目中main.js

(1)代码

import Vue from 'vue'var app = new Vue({el: '#app',mounted() {console.log(this.message);},data() {return {message: '我是一个双向绑定的数据'}}
})

(2)效果在这里插入图片描述

(3)思考

为什么直接使用this.message就能获取到数据呢?

①根据vue的源码找到stateMixin

路径:src\core\instance\index.ts
在这里插入图片描述

②stateMixin文件中的initData方法就是初始化data数据

在这里插入图片描述

function initData(vm: Component) {let data: any = vm.$options.datadata = vm._data = isFunction(data) ? getData(data, vm) : data || {}
}

在这里插入图片描述

在这里插入图片描述

过程:通过initData获取到传入的对象数据,将这个数据复制给vm,也就是在new Vue中的this。这样你就可以通过this.message和this._data.message来获取你在data中定义的数据了,而这里的this.data.message会执行proxy函数,通过Object.defineProperty执行sharedPropertyDefinition.get方法,也就是message。至于数据的绑定后面会单独说明,这里先忽略。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/171528.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java将list转为逗号隔开字符串,将逗号连接的字符串转成字符数组,​将逗号分隔的字符串转换为List​(Java逗号分隔-字符串与数组相互转换)

一、通过testList.stream().collect(Collectors.joining(",")) &#xff0c;通过流转换&#xff0c;将list转为逗号隔开字符串 List<String> testList new ArrayList<>(); testList.add("test1"); testList.add("test2"); testList…

如何查找特定基因集合免疫基因集 炎症基因集

温故而知新&#xff0c;再次看下Msigdb数据库。它更新了很多内容。给我们提供了一个查询基因集的地方。 关注微信&#xff1a;生信小博士 比如纤维化基因集&#xff1a; 打开网址&#xff1a;https://www.gsea-msigdb.org/gsea/msigdb/index.jsp 2.点击search 3.比如我对纤维…

基于Python Django 的微博舆论、微博情感分析可视化系统(V2.0)

文章目录 1 简介2 意义3 技术栈Django 4 效果图微博首页情感分析关键词分析热门评论舆情预测 5 推荐阅读 1 简介 基于Python的微博舆论分析&#xff0c;微博情感分析可视化系统&#xff0c;项目后端分爬虫模块、数据分析模块、数据存储模块、业务逻辑模块组成。 Python基于微博…

如何在Windows和Linux系统上监听文件夹的变动?

文章目录 如何在Windows和Linux系统上监听文件夹的变动&#xff1f;读写文件文件系统的操作缓冲和流文件改变事件 如何在Windows和Linux系统上监听文件夹的变动&#xff1f; libuv库实现了监听整个文件夹的修改。本文详细介绍libuv库文件读写和监听的的实现方法。libuv库开发了…

浏览器事件循环 (event loop)

进程与线程 进程 进程的概念 进程是操作系统中的一个程序或者一个程序的一次执行过程&#xff0c;是一个动态的概念&#xff0c;是程序在执行过程中分配和管理资源的基本单位&#xff0c;是操作系统结构的基础。 简单的来说&#xff0c;就是一个程序运行开辟的一块内存空间&a…

【计算机网络笔记】Cookie技术

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

Fourier分析导论——第1章——Fourier分析的起源(E.M. Stein R. Shakarchi)

第 1 章 Fourier分析的起源 (The Genesis of Fourier Analysis) Regarding the researches of dAlembert and Euler could one not add that if they knew this expansion, they made but a very imperfect use of it. They were both persuaded that an arbitrary and d…

如何使用手机蓝牙设备作为电脑的解锁工具像动态锁那样,蓝牙接近了电脑,电脑自动解锁无需输入开机密码

环境&#xff1a; Win10 专业版 远程解锁 蓝牙解锁小程序 问题描述&#xff1a; 如何使用手机蓝牙设备作为电脑的解锁工具像动态锁那样&#xff0c;蓝牙接近了电脑&#xff0c;电脑自动解锁无需输入开机密码 手机不需要拿出来&#xff0c;在口袋里就可以自动解锁&#xff…

calcite 校验层总结

1、校验的作用 1&#xff09;完善语义信息 例如在SQL语句中&#xff0c;如果碰到select * 这样的指令&#xff0c;在SQL的语义当中&#xff0c;“*” 指的是取出对应数据源中所有字段的信息&#xff0c;因此就需要根据元数据信息来展开。 2&#xff09;结合元数据信息来纠偏…

Java游戏修炼手册:2023 最新学习线路图

前言 有没有一种令人兴奋的学习方法&#xff1f;当然有&#xff01;绝对有&#xff01;而且我要告诉你&#xff0c;学习的快乐可以媲美游戏的刺激。 小学时代&#xff0c;我曾深陷于一款名为"八百万勇士的梦"的游戏。每当放学&#xff0c;我总是迫不及待地打开电脑&a…

JSON(详解)

目录 什么是JSON&#xff1f; 哪里会用到JSON&#xff1f; JSON的特点 JSON的优点 JSON的缺点 JSON和cJSON的关系 什么是JSON&#xff1f; JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式。它以易于阅读和编写的文本格式来存储和表示…

Kafka - 3.x 图解Broker总体工作流程

文章目录 Zk中存储的kafka的信息Kafka Broker总体工作流程1. broker启动后向zk中注册2. Controller谁先启动注册&#xff0c;谁说了算3. 由选举出来的Controller监听brokers节点的变化4. Controller决定leader选举5. Controller将节点信息上传到Zk中6. 其他Controller从zk中同步…

为什么说大模型微调是每个人都必备的核心技能?

▼最近直播超级多&#xff0c;预约保你有收获 近期直播&#xff1a;《基于开源 LLM 大模型的微调&#xff08;Fine tuning&#xff09;实战》 0 — 为什么要对 LLM 大模型进行微调&#xff08;Fine tuning&#xff09;&#xff1f; LLM 大模型&#xff08;比如&#xff1a;Chat…

安全狗安装

安装waf 关闭apache程序及httpd.exe进程; 运行cmd&#xff0c;cd进入apache/bin文件夹目录&#xff0c; 执行httpd.exe -k install -n apache2.4.39; 启动apache,启动phpstudy 安全狗安装服务名称填写apache2.4.39; 安装安全狗之后就会提示报错 网站防护 可以设备黑白名单 漏…

JAVA实现校园二手交易系统 开源

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 二手商品档案管理模块2.3 商品预约管理模块2.4 商品预定管理模块2.5 商品留言板管理模块2.6 商品资讯管理模块 三、实体类设计3.1 用户表3.2 二手商品表3.3 商品预约表3.4 商品预定表3.5 留言表3.6 资讯…

Leo赠书活动-03期 【ChatGPT 驱动软件开发:AI 在软件研发全流程中的革新与实践 】

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 赠书活动专栏 ✨特色专栏&#xff1a;…

网络协议--TFTP:简单文件传送协议

15.1 引言 TFTP(Trivial File Transfer Protocol)即简单文件传送协议&#xff0c;最初打算用于引导无盘系统&#xff08;通常是工作站或X终端&#xff09;。和将在第27章介绍的使用TCP的文件传送协议&#xff08;FTP&#xff09;不同&#xff0c;为了保持简单和短小&#xff0…

【微信小程序】数字化会议OA系统之投票模块(附源码)

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《微信小程序开发实战》。&#x1f3af;&#x1f3a…

了解单域名证书和通配符证书的区别,选择合适的SSL证书解决方案

随着互联网的不断发展&#xff0c;网站安全性问题一直备受关注&#xff0c;在保护网站数据安全的过程中&#xff0c;SSL证书一直发挥着至关重要的作用。而在选择SSL证书时&#xff0c;单域名证书和通配符证书是两种常见的选择。本文将详细介绍单域名证书和通配符证书的区别&…

【开源框架】Glide的图片加载流程

本篇文章从Glide 4.11源码入手&#xff0c;简单的分析整个图片请求的流程&#xff0c;本着 ”只见树林&#xff0c;不见树木“ 的原则&#xff0c;宏观请求流程&#xff0c;不细究实现细节&#xff08;细节留坑埋点&#xff0c;之后慢慢写&#xff09; 引入依赖 以下的所有分…