vue框架原理学习的第一天

最新推荐文章于 2024-09-26 01:42:12 发布
最新推荐文章于 2024-09-26 01:42:12 发布
阅读量105 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Suezyue/article/details/116154133
版权

Vue框架 MVVM Object.defineProperty 模板编译 虚拟DOM
关键词由CSDN通过智能技术生成

vue框架原理学习第一天

vue框架原理的学习

这是Szziyy 对vue框架原理学习的第一天

前期需要了解学习的方法

//获取对象的key
Object.keys(data).forEach(key=>{
	console.log('获取到对象里面的key值':key:data[key])
})

Object.defineProperty（对象，属性名称，{
	get:()=> 
	set:(new,old)=>{  },
	// 设置改属性对应值 
    // value:"",
    // 是否可被修改属性 true为可修改 false为不可修改
     // configurable:true,
     // 是否可以枚举  true 是否能获取到这个属性
   // enumerable:true,
      // 是否可以写入
    // writable:true
}）

简单的HTML使用vue的方式

我们通过引用vue.js 创建vue实例对象 通过设置绑定对象
实现MVVM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	// 通过vue实例对象绑定
    <div id="app">
    	// 插值显示data对应的msg值
        {{msg}}
    </div>
    // 引入vue文件
    <script src="./vue.js"></script>
    <script >
    	// 设置参数对象
        var option = {
        	// 绑定对象
            el:"#app",
            // 数据
            data:{
                msg:"helloVue"
            }
        };
        // 创建vue实例对象 
        var app = new Vue(option);
    </script>
</body>
</html>

接下来我们将根据这个例子做出一个自己简单的框架

  1. 首先创建出属于我们的自己vue框架的js文件
    sueVue.js
    在这里插入图片描述

2.根据前面简单的引入 创建出对应的实力对象
我们这个文件中需要定义一个class Vue 传入需要传入对应的参数属性 则如下

class Vue{
	// 构造器 需要传入跟vue参数一样的属性
	constructor(options){
	//  绑定实例对象的this
	var vm = this;
	// 绑定传过来的options
	this.$options = options;
	// 绑定传过来的options的data
	this.$data = options.data;
	// 因为 vue 创建的实例对象 属性也在实例对象上，我们需要创建一个方法将options上的data属性绑定到当前的实例对象上去
	// 通过获取Object.keys获取对应的属性值
	Oject.keys(this.$data).forEach(key=>{
		// 创建一个绑定对象的方法
		vm._proxy(key)
	})
	},
	_proxy(key){
		// 通过Object.defineProperty() 方法设置在实例对象上
		Object.defineProperty(vm,key,{
			// 是否枚举 显示出来
			 enumerable:true,
			 // 获取对象属性返回的方法
			 get:()=> this.$data[key],
			 // 设置属性的方法
			 set:(value)=> {this.$data[key] = value}
		})
	}
}

那么我们第一部分就做好创建实例对象，加上把参数上的属性绑定到们的实例对象上。那么我们接下来需要再构建一个能把页面对象进行获取，创建虚拟dom，获取对应的节点，重新生出渲染出来

// 创建一个能生成虚拟dom的类
class Compile{
	// 需要告诉要绑定页面的那个dom  生成的实例对象
	constructor(el,vm){
		// 绑定传过来的实例对象
		this.$vm = vm;
		// 获取页面对象dom
		this.$el = document.querySelector(el);
		// 判断对象是否存在
		if(this.$el){
			// 1.将元素节点取出
			this.$fragment = fragmentObj(this.$el);
			// 2.创建对应的虚拟dom对象
			// 3.将生成的虚拟dom重新渲染到页面上
		}
	},
	fragmentObj(el){
		// 创建虚拟dom
		let fragment = document.createDocumentFragment();
		// 创建一个子元素
		let child ;
		// 判断是否对象有第一个子节点
		while(child = el.first.childNode){
			// 降子节点存储到虚拟dom上
			fragment.appendChild(child) 
		}
		// 返回出去
		return fragment;
	}
}

到了这一步 我们就可以回去到页面对象并存储在我们创建的虚拟dom上了，接下来进行完善

// 创建一个能生成虚拟dom的类
class Compile{
	// 需要告诉要绑定页面的那个dom  生成的实例对象
	constructor(el,vm){
		// 绑定传过来的实例对象
		this.$vm = vm;
		// 获取页面对象dom
		this.$el = document.querySelector(el);
		// 判断对象是否存在
		if(this.$el){
			// 1.将元素节点取出
			this.$fragment = fragmentObj(this.$el);
			// 2.创建对应的虚拟dom对象
			this.createDom(this.$fragment)
			// 3.将生成的虚拟dom重新渲染到页面上
		}
	},
	fragmentObj(el){
		// 创建虚拟节点对象
		let fragment = document.createDocumentFragment();
		// 创建一个子元素
		let child ;
		// 判断是否对象有第一个子节点
		while(child = el.first.childNode){
			// 降子节点存储到虚拟节点对象上
			fragment.appendChild(child) 
		}
		// 返回出去
		return fragment;
	},
	createDom(fragment){
		// 获取虚拟节点对象的子节点
		let childNodes = fragment.childNodes;
		// 变成数组循环遍历
		Array.prototype.slice.forEach(childNode=>{
			// 1.提取文本节点
			let text = childNode.TextContent;
			// 2.设置正则
			let reg = /\{\{(.*)\}\}/
			// 3.根据节点进行编译
			if(childNode.contentType == 3 && reg.test(text)){
				// 根据类型的函数 RegExp.$1 为正则判断获取的（）里面的值
				this.compileText(childNode,RegExp.$1)
			}
		})
	},
	compileText(node,temp){
		// 创建一个dom更新函数
		this.updateDomVal(node,temp,"textContent",this.vm[temp]);
	},
	updateDomVal(node,temp,domType,domValue){
		// 通过传过来的值 对属性进行更新
		node[type] = value;
	}
	
}

到此 我们将页面的{{}} 里面的对我们data进行替换
我们就剩最后的重新渲染到页面上了

class Vue{
	// 构造器 需要传入跟vue参数一样的属性
	constructor(options){
	//  绑定实例对象的this
	var vm = this;
	// 绑定传过来的options
	this.$options = options;
	// 绑定传过来的options的data
	this.$data = options.data;
	// 因为 vue 创建的实例对象 属性也在实例对象上，我们需要创建一个方法将options上的data属性绑定到当前的实例对象上去
	// 通过获取Object.keys获取对应的属性值
	Oject.keys(this.$data).forEach(key=>{
		// 创建一个绑定对象的方法
		vm._proxy(key)
	})

	},
	_proxy(key){
		// 通过Object.defineProperty() 方法设置在实例对象上
		Object.defineProperty(vm,key,{
			// 是否枚举 显示出来
			 enumerable:true,
			 // 获取对象属性返回的方法
			 get:()=> this.$data[key],
			 // 设置属性的方法
			 set:(value)=> {this.$data[key] = value}
		})
	}
}

// 创建一个能生成虚拟dom的类
class Compile{
	// 需要告诉要绑定页面的那个dom  生成的实例对象
	constructor(el,vm){
		// 绑定传过来的实例对象
		this.$vm = vm;
		// 获取页面对象dom
		this.$el = document.querySelector(el);
		// 判断对象是否存在
		if(this.$el){
			// 1.将元素节点取出
			this.$fragment = fragmentObj(this.$el);
			// 2.创建对应的虚拟dom对象
			this.createDom(this.$fragment);
			// 3.将生成的虚拟dom重新渲染到页面上
			this.$el.appendChild(this.$fragment);
		}
	},
	fragmentObj(el){
		// 创建虚拟节点对象
		let fragment = document.createDocumentFragment();
		// 创建一个子元素
		let child ;
		// 判断是否对象有第一个子节点
		while(child = el.first.childNode){
			// 降子节点存储到虚拟节点对象上
			fragment.appendChild(child) 
		}
		// 返回出去
		return fragment;
	},
	createDom(fragment){
		// 获取虚拟节点对象的子节点
		let childNodes = fragment.childNodes;
		// 变成数组循环遍历
		Array.prototype.slice.forEach(childNode=>{
			// 1.提取文本节点
			let text = childNode.TextContent;
			// 2.设置正则
			let reg = /\{\{(.*)\}\}/
			// 3.根据节点进行编译
			if(childNode.contentType == 3 && reg.test(text)){
				// 根据类型的函数 RegExp.$1 为正则判断获取的（）里面的值
				this.compileText(childNode,RegExp.$1)
			}
		})
	},
	compileText(node,temp){
		// 创建一个dom更新函数
		this.updateDomVal(node,temp,"textContent",this.vm[temp]);
	},
	updateDomVal(node,temp,domType,domValue){
		// 通过传过来的值 对属性进行更新
		node[type] = value;
	}
	
}

至此 我们最简单的Vue框架创建完毕
第一天的学习到此结束

学习到 了 Object.defineProperty 和 Object.keys 的用法

Szziyy
关注
vue学习第一天
weixin_49239088的博客
06-22 549
<!--导入Vue.js --> <script src="js/vue.js"></script>
学习vue的第5天，v-for，v-model的原理以及用法等
qq_34176561的博客
05-26 459
购物车，循环遍历，v-for的 购物车价格的小数点 方法是vue自带的过滤器，filters 管道符号 | vue允许自定义过滤器， filters：{ showPrice(传价格){ let pricestr = price.toFixed(2) return `￥${pricestr}` } } 可以进行文本格式化 v-for 原理 <li v-for="item in name"></li> <li v-
Vue原理学习
tangem的博客
06-16 194
1jQuery和Vue和区别 （1）数据和视图的分离（解耦，软件的开放封闭原则） 注：开闭原则：软件实体（模块、类、函数等）应该可以扩展，但是不可以修改。也就是说软件对扩展开放，对修改关闭。需要说明的是，对修改关闭不是说软件设计不能做修改，只是尽量不要做不必要的修改。怎么才能做到呢？那就是有相应的扩展性。其实，软件有相应的扩展性是好处，但是不能说每个地方都有扩展。反而造成了代码的臃肿。所以这里...
Vue框架----原理汇总（纯收藏，方便单页查询）
weixin_53582738的博客
04-06 1909
一、阐述对MVC，MVP，MVVM的理解? mvc 和 mvvm 其实区别并不大。都是一种设计思想。 主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。 mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到 View 。 什么是MVVM？ MVVM 是 Model-View-ViewModel 的缩写。 ① Model-View-ViewModel的含义： .
Vue 原理学习总结
绿足 博客
11-07 384
Vue 如何实现双向绑定 Vue 将MVVM做为数据绑定的入口。 几个Vue源码关键核心概念： Observer 数据的观察者，监听自己的
【Vue】快速掌握Vue的基本使用
Daears的博客
09-23 410
Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式JavaScript框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合
VueUse学习
顺拐小乌龟的博客
11-22 3043
⚡️ VueUse 学习 VueUse学习什么是VueUse为什么用VueUse如何使用⏳Install????简单栗子????useFetchVueUse常用方法总结 什么是VueUse 如果你了解react的hook，那么VueUse可以看做是vue版的hook库。如果不太了解，简单概括的话，VueUse是基于Composition API的常用函数集合。功能类似于lodash，免去用户自己去重复写一些常见的函数，如：防抖、节流、fetch等。 目前，VueUseStar数已经达到6.5k，npm周下
vue实现点击div外部触发事件的封装方法，注：基于element（学习vue的第一个月零不知道几天）
01-08
Vue.js 是一个流行的前端框架，用于构建用户界面。在 Vue 中，有时我们需要监听用户是否点击了组件外部，例如关闭弹窗或菜单时。基于 Element UI，我们可以方便地实现这一功能，Element UI 提供了一个名为 `...
Vue11源码学习资料
05-27
本资料包"Vue11源码学习资料"显然是针对Vue 3的源码分析和学习资源，其中包含了一个名为"day11-vue3-demo"的文件，可能是第11天的学习示例或教程。 在Vue 3中，有多个关键知识点值得深入研究： 1. **Composition ...
Vue第7天-todos.zip
07-29
在本项目中，“Vue第7天-todos.zip”是一个关于Vue.js框架的实践教程，主要集中在构建一个待办事项（Todos）应用上。Vue.js是一个轻量级的前端JavaScript框架，以其易学易用、高性能和灵活性而广受欢迎。在这个教程...
Vue 新玩具 VueUse
qq_40994735的博客
01-11 1265
什么是 VueUse VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了基于 Composition API 的封装。让你在 vue3 中更加得心应手。 简单上手 1.安装 VueUse npm i @vueuse/core 2.使用 VueUse // 导入 import { useMouse, usePreferredDark, useLocalStorage }
【面试题】为什么有时用Vue.use()？及Vue.use()的作用及原理是什么？
LS_952754的博客
08-10 1472
为什么有时用Vue.use()？及Vue.use()的作用及原理是什么？
Vue工具库VueUse的具体用法
qq_40021015的博客
03-22 3万+
前言 上次在看前端早早聊大会中， 尤大大再一次提到了 VueUse 的一个库。 好奇了一下，点看看了看。好家伙啊， 我直接好家伙。这不就是曾经我也想自己写一个 vue 版的 hooks 库吗？（因为我觉得 vue3 和 hooks 太像了） 可是我还不太会， 你现在直接把我的梦想给破灭了，下面我们一起来看看吧！VueUse 作者 Anthony Fu 分享可组合的 Vue_哔哩哔哩_bilibili 什么是 VueUse VueUse不是Vue.use，它是为Vue 2和3服务的一套Vue Composi
VueUse中文文档/Vue官方工具库
热门推荐
BLUESKYHOST的博客
05-20 3万+
VueUse官网地址https://vueuse.org/ 这里就列举常用工具详情请去官网 查看所有API 浏览器 useFullscreen全屏展示 //isFullscreen 当前是否是全屏 //toggle 是函数直接调用即可 const { isFullscreen, toggle } = useFullscreen(); useClipboard粘贴功能 //text 粘贴的内容 //copy 是粘贴函数 const { text, copy, isSupported } = useCli
VUE框架 详解入门
晴天的博客
03-19 2万+
vue框架快速入门到实操
vue的框架原理
lyz_112233的博客
03-30 3059
1、vue数据双向绑定原理 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和
vue框架原理
Markfz的博客
01-23 758
vue框架基本使用
ES6 — Promise基础用法（resolve、reject、then、catch,all）
weixin_55932347的博客
09-24 482
创建一个 Promise： 使用 new Promise() 创建一个新的 Promise 对象，并传入一个函数作为参数。它返回一个新的 Promise 对象，当所有的 Promise 实例都成功时，这个新的 Promise 对象才会成功；如果有任何一个 Promise 实例失败，那么这个新的 Promise 对象也会失败。它返回一个新的 Promise 对象，当第一个 Promise 实例完成时，这个新的 Promise 对象就会完成，无论其是成功还是失败。它相当于只传入失败回调函数的 then 方法。
如何搭建Vue脚手架
最新发布
w6437286的博客
09-26 472
本文主要讲解如何搭建vue脚手架。
三十天精通vue 3 第一天
08-12
第一天开始学习Vue 3，首先要了解Vue的基本概念和核心功能。Vue是一个用于构建用户界面的渐进式JavaScript框架，它采用组件化的方式来开发应用程序。 在Vue 3中，有一些重要的变化和改进。首先，Vue 3引入了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值