vue实现原理，原生代码

最新推荐文章于 2022-10-30 22:15:49 发布
最新推荐文章于 2022-10-30 22:15:49 发布
阅读量436 收藏 1
点赞数
分类专栏： vue 文章标签： css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46092900/article/details/109710785
版权

vue实现原理，实现数据的双向绑定

<!DOCTYPE html>
<!-- 数据的双向绑定 -->
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg">
			<h1>{{msg}}</h1>
			<!-- v-html绑定的时h1对象上的innerhtml-->
			<h1 v-html="msg"></h1>
			<button type="button" @click="changeEvent">修改MSG</button>
		</div>
		
		<script type="text/javascript">
			class Vue{
				constructor(options) {
					//通过选择获取根对象
				    this.$el = document.querySelector(options.el);
					
					
					
					//数据创造之前
					if(typeof options.beforeCreate == 'function'){
						options.beforeCreate.bind(this)()
					}
					
					this.$options= options
					
					
					this.$watchEvent = {}
					//this.$watchEvent[key] = [event,event,event]
					//设置1个对象专门保存修改更新的事件
					//代理options的data数据
					
					this.proxyData()
					
					//劫持设置事件
					
					this.observe()
					
					
					
					//数据创造之后
					if(typeof options.createcd == 'function'){
						options.createcd .bind(this)()
					}
					
					
					//console.log(options.data)
					//挂载前
					if(typeof options.beforeMount == 'function'){
						options.beforeMount .bind(this)()
					}
					
					//把view的数据喝事件进行绑定
					this.compile(this.$el)
					
					//挂载后
					if(typeof options.mounted == 'function'){
						options.mounted.bind(this)()
					}
					
					}
					proxyData(){
						//循环通过set,get方法来实现代理数据
						for(let key in this.$options.data){
							//console.log(key)
							Object.defineProperty(this,key,{
								configurable:false,
								enumerable:true,//迭代，默认false
								//value:"定义值"
								//writeable:true,false"是否能够更改"
								get(){
									//获取this[key]时,即返回options的data[]
									return this.$options.data[key]
								},
								set(val){
									
									this.$options.data[key] = val
								},
							})
							
						}
					}
					observe(){
						//劫持事件
						for(let key in this.$options.data){
							//获取此处value保存
							let value = this.$options.data[key]
							let that = this
							Object.defineProperty(this.$options.data,key,{
								configurable:false,
								enumerable:true,//迭代，默认false
								//value:"定义值"
								//writeable:true,false"是否能够更改"
								get(){
									//获取this[key]时,即返回options的data[]
									//console.log("触发获取内容事件")
									return value
								},
								set(val){
									value = val
									//console.log("触发设置事件")
									//触发以这个key值的更新事件
									if(that.$watchEvent[key]){
										//console/log(that.$watchEvent[key])
										that.$watchEvent[key].forEach((item,index)=>{
											item.updata()//通过updata更新
										})
									}
								},
							})
						}
					}
					compile(cNode){
						//console.log([this.$el])
						cNode.childNodes.forEach((node,index)=>{
							if(node.nodeType == 1){
								//元素类型,getAttribute,hasAttribute
								if(node.hasAttribute('v-html')){
									//console.log(vmKey)
									let vmKey = node.getAttribute('v-html').trim();
									if(this.hasOwnProperty(vmKey)){
										node.innerHTML = this[vmKey]
										let watcher = new Watch(this,vmKey,node,'innerHTML')
										if(this.$watchEvent[vmKey]){
											this.$watchEvent[vmKey].push(watcher)
										}else{
											this.$watchEvent[vmKey] = [];
											this.$watchEvent[vmKey].push(watcher)
										}
										//删除属性
										node.removeAttribute('v-html')
									}
									
								}
								
								//判断是否由v-model属性
								if(node.hasAttribute('v-model')){
									let vmKey = node.getAttribute('v-model').trim();
									if(this.hasOwnProperty(vmKey)){
										node.value = this[vmKey];
										let watcher = new Watch(this,vmKey,node,'value')v
										if(this.$watchEvent[vmKey]){
											this.$watchEvent[vmKey].push(watcher)
										}else{
											this.$watchEvent[vmKey] = [];
											this.$watchEvent[vmKey].push(watcher)
										}
										
									}
									//节点input事件监听
									node.addEventListener('input',(event)=>{
										this[vmKey] = node.value;
										
									})
									//删除属性
									node.removeAttribute('v-model')
								}
								
								//判断是否有数据绑定@click属性
								if(node.hasAttribute('@click')){
									let vmKey = node.getAttribute('@click').trim();
									node.addEventListener('click',(event)=>{
										this.eventFn= this.$options.methods[vmKey].bind(this)
										this.eventFn(event)
									})
								}
								
								if(node.childNodes.length>0){
									this.compile(node)//将节点放进去继续编译
								}
							}
							if(node.nodeType == 3){
								//文本类型
								let reg = /\{\{(.*?)\}\}/g;  //.*?就是需要匹配的内容,g全局配置
								//console.log()
								let text = node.textConent;
								//console.log('xxxxx')
								node.textContent = node.textContent.replace(reg,(match,vmKey)=>{
									//console.log(match)
									//console.log(vmKey)
									//去除空格
									vmKey = vmKey.trim()
									if(this.hasOwnProperty(vmKey)){
										node.value = this[vmKey];
										let watcher = new Watch(this,vmKey,node,'textConent')
										if(this.$watchEvent[vmKey]){
											this.$watchEvent[vmKey].push(watcher)
										}else{
											this.$watchEvent[vmKey] = [];
											this.$watchEvent[vmKey].push(watcher)
										}
										
									}
									
									return this[vmKey]
									
									
								}) //返回替换的字符串
							}
						})
					}
				}
			
			
			
				class Watch{
					constructor(vm,Key,node,attr,nType){
						this.vm = vm;
						//vm实例化的app对象
						this.key = Key;
						//key即绑定的vm触发的属性
						this.node = node;
						//node即，此vm[key]数据绑定的html节点
						//this.property = property;
						//property即vm数据所绑定的属性的名称
						this.attr = attr;
					}
					updata(){
						//更新之前
						if(typeof options.beforeUpdata == 'function'){
							options.beforeUpdata.bind(this)()
						}
						this.node[this.attr] = this.vm[this.key];
						//数据更新之后
						if(typeof options.updatad == 'function'){
							options.updatad.bind(this)()
						}
					}
				}
		</script>
		
		<script type="text/javascript">
			let options = {
				el:"#app",
				data:{
					msg:"hello vue",
					username:"小明",
				},
				methods:{
					changeEvent:function(){
						this.msg="hello laoli"
					}
				},
				beforeMount(){
					//挂载前
					console.log("挂载前")
				},
				mounted(){
					console.log('挂载后')
				}
				
			}
			let app = new Vue(options)
			//app.msg == options.data
			//app.msg = 'abc'
			//options.data.msg = 'abc'
			console.log(app)
		</script>
	</body>
	
</html>

实现代码视频链接：https://www.bilibili.com/video/BV1m741137Q5?p=32

是千千千熠啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 原理整理
gxll499294075的博客
03-22 1万+
1. 组件化基础=>（MVVM模型） 传统组件，知识静态渲染，更新依赖于操作DOM。 Vue的核心理念是数据驱动的理念，所谓的数据驱动的理念：当数据发生变化的时候，用户界面也会发生相应的变化，开发者并不需要手动的去修改dom。 优点： 不需要在代码中去频繁的操作dom了，这样提高了开发的效率，同时也避免了在操作Dom的时候出现的错误。 Vue.js的数据驱动是通过MVVM这种框架来实现的，MVVM 框架主要包含三部分：Model, View, ViewMode 数据驱动视图...
原型Html转Vue（详细步骤）
最新发布
qq_20236937的博客
05-06 1067
原型Html转Vue（详细步骤）html的页面构成vue的页面构成开始转 前言：ui原型交互后切图给开发程序员，开发程序员嵌入改造 本文是html页面转vue页面 html的页面构成 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <tit
20180305-button
qq_27898053的博客
03-05 260
&lt;div&gt; &lt;el-button&gt;默认按钮&lt;/el-button&gt; &lt;el-button type="primary"&gt;主要按钮&lt;/el-button&gt; &lt;el-button type="success"&gt;成功按钮&lt;/el-button&gt; &lt;el
Vue源码学习之代码实现生成原理及render函数执行准备
军火库
10-30 416
创造力响应式数据将模板转换成ast语法树将ast语法树转化成render函数后续每次数据更新可以只执行render函数，无需再次执行ast转化过程render函数会去产生虚拟节点(使用响应式数据)根据生成的虚拟节点创造真实的DOM最后就是调用render函数产生虚拟节点变成真实DOM,这个放到下一篇写,持续学习，加油！
Vue源码篇
深夜代码酒神
06-27 1644
Vue源码篇
Vue的实现原理（数据双向绑定）
计算机硕士的博客
04-26 2588
Vue数据双向绑定的原理： 1、实例化一个app对象——定义一个Vue类（类的参数是一个对象，包括id属性、数据和方法等） id属性：为了获取原生DOM对象 2、循环通过set，get方法实现app对象的数据代理 3、观察数据动态，对更新的数据进行管理——设置一个劫持事件 4、设置一个观察对象，对节点的内容进行更新——定义一个watch类 5、把view的数据和事件进行...
vue 实现走马灯效果
12-30
Part.1 问题 在写一个H5页面时遇到一个需求，头部公告需要滚动变换，需要实现一个走马灯效果 Part.2 实现 我的做法：利用 定时器 + CSS3 变换公告...Part.3 代码 HTML <ul class=marquee_list
Vue 表情包输入组件的实现代码
12-08
Emotion 一个用于vue的表情输入组件 ...实现原理是根据字段对在线表情包图片进行匹配替换 代码中 img 标签的地址即为表情图片地址，可自己根据需求替换 mounted () { const name = this.$el[removed] con
vue移动端实现下拉刷新
08-27
本篇文章将深入探讨如何使用Vue实现这一功能，并通过实际的代码示例帮助你理解其工作原理。 首先，我们需要了解移动端下拉刷新涉及的核心事件，即`touchstart`、`touchmove`和`touchend`。这些是移动设备上的触摸...
vue,原生js左右无缝滚动
09-03
在本文中，我们将深入探讨如何使用原生JavaScript实现Vue组件中的左右无缝滚动效果，并结合CSS进行样式设计。Vue.js是一个流行的前端框架，它允许开发者构建可复用、可维护的组件，而原生JavaScript则是其背后的基石...
vue实现Input输入框模糊查询方法
12-13
本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码，供大家参考，具体内容如下 原理：原生js的indexOf() 方法，该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或...
vue实现原理浅析
08-10
vue是一个非常典型的MVVM框架，它的核心功能一是双向数据绑定系统，二是组件化开发系统。那么本文是以一种通俗易懂的的角度来实现一个简单 的双向数据绑定系统，如果你用过vue却对vue的实现原理不太清楚，或者没用过vue想学习vue那我相信看完本文你会的vue的实现有一个比较简单明确的了解。
深入理解vue
热门推荐
如是说的博客
02-24 2万+
一 　理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话: Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。 这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句...
Vue 源码之Vue 响应式原理【完整版】
weixin_42524603的博客
03-27 1587
写在前面 由于昨天写的文章 【面试官: 连 Vue 视图更新都不会写？（Vue视图更新原理【一】）】与今天的内容代码有些相关联，所以开头先进行简单的回顾阐述，也方便对内容进行完整的阅读。 Vue 视图更新原理 Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用，它的作用是为对象的某个属性对外提供 get、set 方法，从而实现外部对该属性的读和写操作时能够被内部监听，实现后续的同步视图更新功能 一、实现响应式的核心API：Object.defineProp
Vue基础（Vue的原生指令）
weixin_45368324的博客
04-16 496
逻辑处理 v-show 根据表达式的值（布尔值），切换元素的显示与隐藏（display 属性） 适用于状态切换比较频繁的情况 v-if 根据表达式的值（布尔值），创建或销毁元素 适用于状态切换不频繁的情况 v-else / v-else-if 与 v-else 配合 循环与列表 v-for 根据数据循环渲染 v-for 指令所在的元素及其子元素 可以循环的数据：Array | Obj...
什么是Vue？Vue的工作原理是什么？
xiaoxijinger的博客
03-17 5910
Vue(读音/Vju:/，类似于View)是一套用于构建用户界面的渐进式框架，与其他大型框架相比，Vue被设计为可以自底向上逐层应用。其他大型框架往往一-开始就对项 目的技术方案进行强制性的要求，而Vue更加灵活，开发者既可以选择使用Vue来开发一个全新项目，也可以将Vue引入到一个现有的项目中。 另一方面，当Vue与现代化的工具链以及各种支持类库结合使用时，也完全能够为复杂的单页应用提供驱动。工具链是指在前端开发过程中用到的一系列工具，例如，使用脚手架工具创建应用，使用依赖管理工具安装依赖包，以及使用构建
在vue里面使用原生的js内置函数
echo_Ae的博客
05-27 4791
如：setTimeoutsetTimeout(function() { this.$toast.show('请先下载支付宝App') }, 3000)应该写成var self = this // 解决setTimeout不能直接使用this setTimeout(function() { self.$toast.show('请先下载支付宝App') }, 3000)...
浅析vuejs原理
iiichigo的博客
11-01 3662
MVVM 说到vuejs就不得不说mvvm， vue也可以叫做mvvm框架，mvvm分为三个层M（model），V( view)，MV（viewmodel）。 mvvm采用的是数据驱动模式，即视图的变化都取决于数据的更改 其实mvvm和mvp层很相似，唯一的不同是mvvm的v和vm层是同步的，就是说不需要相互通知实现了交互（这就是vuejs在内部在做的事情）使用者只需要绑定数据和视图层后 ...
vue实现原理解析及一步步实现vue框架
weixin_33889665的博客
03-23 1313
深入解析vue 1实现原理，并实现vue双向数据绑定模型vueImitate，此模型(vueImitate)只适用于学习和了解vue实现原理；无法作为项目中使用，没有进行任何异常错误处理及各种使用场景的兼容；但通过此项目，可以让你： 深入了解vue实现原理 亲手一步一步自己实现vue相应功能，包括双向绑定、指令如v-model、v-sh...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值