使用JavaScript编写vue指令v-model，v-model原理实现
首先先要知道的是v-model的作用是实现数据的双向绑定，即：
数据在视图层的双向响应。
实现思路主要分为两步：
第一步：数据层到视图层的响应
将数据响应到视图层的方式，在vue2使用的是Object.defineProperty()来实现，需要劫持到数据的变化，在数据变化的时候将其渲染到视图上：
A,首先需要遍历data的数据，获取到每个data的属性
B,其次，获取到data的每个属性之后，对属性进行拦截。
C，在拦截时，需要将其值反映到对应的视图标签上。
第C步中又可以分为：
a，获取到视图中每个节点的DOM对象，
b，遍历DOM对象，获取到每个DOM对象对应的node对象（节点对象）。
c，遍历node对象，获取到node对象中含有v-model属性的节点
d，将对应的data的属性值赋值给node节点的value值上
代码实现为：
<body>
<div id="app">
名字：<input type="text" v-model="name" value="12"><br>
年龄：<input type="text" v-model="age" value="2323">
<div class="sjkx">
<h1 class="name">模拟v-model</h1>
</div>
</div>
<script>
let data = {
name: '',
age: '',
}
let view = document.getElementById('app')
// 数据反映到视图方法
function getVmodelNode(view, data) {
// a,获取到视图中每个节点的DOM对象，
let allDom = view.getElementsByTagName("*")
let allDomArray = Array.from(allDom)//将伪数组转化成数组
let attributeArray = []
// b，遍历DOM对象，获取到每个DOM对象对应的node对象。
allDomArray.forEach(nodeItem => {
//c, 遍历node对象，过滤获取到node对象中含有v-model的节点
Array.from(nodeItem.attributes).forEach(item => {
if (item.nodeName === 'v-model') {
//d,将对应的data的属性值赋值给node节点的value值上
nodeItem.value = data[item.nodeValue]
}
})
})
}
// A,首先需要遍历data的数据，获取到每个data的属性
Object.keys(data).forEach(key => {
// B,其次，获取到data的每个属性之后，对属性进行拦截。
debugger
WebServer(data,key,data[key])
})
function WebServer(data, key, value) {
Object.defineProperty(data, key, {
get() {
return value
},
set(newValue) {
value= newValue
// C，在拦截时，需要将其值反映到对应的视图标签上。
getVmodelNode(view,data)
}
})
}
</script>
</body>第二步：视图层到数据层的响应。
视图层响应到数据层的思路：当输入框的数据发生变化的时候，调用函数，将输入框的值赋值给data对应的属性上。
实际上就是在第一步的第C步多加了一步：为对应的node对象绑定一个input事件，并将node的value赋值给data对应的属性上。
<body>
<div id="app">
名字：<input type="text" v-model="name" value="12"><br>
年龄：<input type="text" v-model="age" value="2323">
<div class="sjkx">
<h1 class="name">模拟v-model</h1>
</div>
</div>
<script>
let data = {
name: '',
age: '',
}
let view = document.getElementById('app')
// 数据反映到视图方法
function getVmodelNode(view, data) {
// a,获取到视图中每个节点的DOM对象，
let allDom = view.getElementsByTagName("*")
let allDomArray = Array.from(allDom)//将伪数组转化成数组
let attributeArray = []
// b，遍历DOM对象，获取到每个DOM对象对应的node对象。
allDomArray.forEach(nodeItem => {
//c, 遍历node对象，过滤获取到node对象中含有v-model的节点
Array.from(nodeItem.attributes).forEach(item => {
if (item.nodeName === 'v-model') {
//d,将对应的data的属性值赋值给node节点的value值上
nodeItem.value = data[item.nodeValue]
//视图层反映到数据层上，
nodeItem.addEventListener('input',(e)=>{
data[item.nodeValue]=e.target.value
})
}
})
})
}
// A,首先需要遍历data的数据，获取到每个data的属性
Object.keys(data).forEach(key => {
// B,其次，获取到data的每个属性之后，对属性进行拦截。
WebServer(data,key,data[key])
})
function WebServer(data, key, value) {
Object.defineProperty(data, key, {
get() {
return value
},
set(newValue) {
value= newValue
// C，在拦截时，需要将其值反映到对应的视图标签上。
getVmodelNode(view,data)
}
})
}
getVmodelNode(view, data)
</script>
</body>这就是完整的模拟v-model的代码了。
关于优化，可移步到：
https://blog.csdn.net/qq_31539817/article/details/119992938
这边文章，通过定义发布者模式来实现精确更新。
顺着这个思路，vue中全部的指令源码都可以自己搞定，什么bind呀，什么v-text呀，甚至ref都可以自己搞定！！！！！！
使用JavaScript编写vue指令v-model，v-model原理实现的更多相关文章
- 深入浅出 JavaScript 变量、作用域和内存 v 0.5
本文主要从原理入手分享变量和作用域的相关知识,最后结合本文所分享知识,再次深入了解下闭包的运行原理. 主要参考<JS高级程序设计> <JS权威指南> <高性能 JS> ...
- vue学习-day01（vue指令）
目录: 1.什么是vue.js 2.为什么要学习前端的流行框架 3.框架和库的区别 4.后端MVC和前端的MVVM的区别 5.vue.js的基本代码--hollo world代 ...
- Vue 指令篇 案例(输入提交显示 提交数据_列表)
一.文本操作指令 //1.v-text <p v-text="msg"></p> 等价于 <p>{{msg}}</p> //2.v- ...
- (尚016)Vue指令(11个自带指令+自定义指令)
1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果 ...
- [Vue] : Vue指令
Vue指令之 v-cloak v-cloak是解决解决插值表达式的闪烁问题 . 给插值表达式的元素加上v-cloak <p v-cloak>{{ msg }}</p> 为v-c ...
- Vue学习笔记【7】——Vue指令之v-model和双向数据绑定
v-model是唯一可以实现双向数据绑定的vue指令 单向数据绑定:修改内存中的数据,页面上同步更改.v-bind <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法 ...
- 第三篇：Vue指令
Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...
- 02 Vue指令
Vue指令 1.文本相关指令 <div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> < ...
- vue学习笔记（一） ---- vue指令（总体大纲）
一.什么是Vue 官方文档:https://cn.vuejs.org/v2/guide/ 关键字: 渐进式框架 自底向上增量开发 视图层 单文件组件 复杂的单页应用 复杂的单页应用: 顾名思义,单页应 ...
- 【vuejs深入一】深入学习vue指令，自定义指令解决开发痛点
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 最近博主我沉淀了几个月,或者说懒了几个月.然而大佬的指点总是一针见血,能够让人看到方向.所以我现在有觉得,一个好的 ...
随机推荐
- .eslintrc.js 文件语法规则定义
添加某个全局变量: globals: { 'ActiveXObject': true },
- 【c++】函数模板
语法: template<class & T1,class &T2> auto Add(T1 t,T2 t2) ->decltype(t+t2); 函数定义: t ...
- Python ipset iptables 实现蜜罐 自动封堵扫描者IP
Python ipset iptables 实现蜜罐 自动封堵扫描者IP 蜜罐可以诱捕入侵者,但无法实时封堵入侵者,必须在事后通过日志进行手工封堵. 有没有什么办法可以实现自动封堵入侵者IP? ipt ...
- Android OpenMAX（三）高通OMX组件实现基础
上一节了解了OMX组件实现的基础内容,这一节我们以高通OMX实现为例,简单看看如何实现一个OMX组件.本节代码参考自: omx_core_cmp.cpp qc_omx_component.h omx_ ...
- WPF显示网络图片的几种方法
1.利用数据流 1 Image img; 2 byte[] btyarray = GetImageFromResponse(imageUrl); 3 4 //字节数据转流 5 MemoryStream ...
- RHEL7.9安装Podman4.1.1并部署Redis集群
原文链接:RHEL7.9安装Podman4.1.1并部署Redis集群-语雀 环境 操作系统 cat /etc/redhat-release Red Hat Enterprise Linux Serv ...
- CentOS7的一些常规操作
1.启动或者重启sshd服务: systemctl stop sshd.service systemctl start sshd.service systemctl restart sshd.serv ...
- 深入剖析C++多态的实现与原理-详解
目录 多态基础 虚函数 虚函数的继承 虚类/虚基类 重写/覆盖 条件: 概念: 多态的条件 其他的多态行为 多态中子类可以不写virtual 协变 代码举例 继承遗留问题解决 析构函数 具体解决方式: ...
- Python使用.NET开发的类库来提高你的程序执行效率
Python由于本身的特性原因,执行程序期间可能效率并不是很理想.在某些需要自己提高一些代码的执行效率的时候,可以考虑使用C#.C++.Rust等语言开发的库来提高python本身的执行效率.接下来, ...
- InvalidOperationException Cannot modify ServiceCollection after application is built .Net6 异常
背景 我用了一个叫Unchase.Swashbuckle.AspNetCore.Extensions的库来加强Swagger的文档,我一般写法是这样的: builder.Services.AddSwa ...