使用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指令，自定义指令解决开发痛点
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 最近博主我沉淀了几个月,或者说懒了几个月.然而大佬的指点总是一针见血,能够让人看到方向.所以我现在有觉得,一个好的 ...
随机推荐
- .net Mvc5Webapi接口接收参数为null的一种情况分享
同样的前后端项目,其他接口用post接收自定义对象形式的参数,是能成功接收的.在这个前提下,出现某个接口接收的参数为null或值全是默认值,可能的原因是这样: 前端定义的参数的字段比后台定义的dto对 ...
- FFmpeg开发笔记（二十三）使用OBS Studio开启RTMP直播推流
OBS是一个开源的直播录制软件,英文全称叫做Open Broadcaster Software,广泛用于视频录制.实时直播等领域.OBS不但开源,而且跨平台,兼容Windows.Mac OS.Lin ...
- 从源码的角度弄懂MyBatis动态代理开发原理
MyBatis提供了一种动态代理实现SQL调用的功能,使用者只需要在映射文件中配置SQL语句与映射规则即可完成SQL调用和结果集封装.下面代码展示了动态代理调用的基本步骤: public void t ...
- Django——启动项目时报错mysqlclient
报错内容如下: Watching for file changes with StatReloader Exception in thread django-main-thread: Tracebac ...
- WPF中 x:Name和Name的区别
x:Name 唯一地标识 XAML 定义的对象,以便于从代码隐藏或通用代码中访问对象图中实例化的对象.x:Name 一旦应用于支持编程模型,便可被视为与由构造函数返回的用于保存对象引用或实例的变量等效 ...
- 8.24考试总结(NOIP模拟47)[Prime·Sequence·Omeed]
时间带着明显的恶意,缓缓在我的头顶流逝. T1 Prime 解题思路 成功没有签上到... 一看数据范围 \(R-L+1\le 10^7,R\le 10^{14}\) ,这肯定是判断范围内的数字是否可 ...
- SQL练习之打卡记录数据统计类问题
最近老婆的公司,关闭了OA系统中,各类打卡时间数据统计的功能,为了不麻烦老婆手算,就做了一个简单的打卡系统,方便自动统计老婆想要知道的各类数据. 做的过程中就遇到了几个还挺有意思的SQL,这里写成一篇 ...
- Windows Server 2016 离线安装.NET Framework 3.5
Windows Server 2016 离线安装.NET Framework 3.5 1.双击Windows Server 2016的ISO,会自动挂载,比如F盘. 2.右键开始菜单- 命令提示符(管 ...
- 论文阅读 《Pingmesh: A Large-Scale System for Data Center Network Latency Measurement and Analysis》
背景 在我们内部产品中,一直有关于网络性能数据监控需求,我们之前是直接使用 ping 命令收集结果,每台服务器去 ping (N-1) 台,也就是 N^2 的复杂度,稳定性和性能都存在一些问题,最近打 ...
- star 最多的 Go 语言本地化库｜GitHub 2.8K
如果你是一位 Go 用户,可以在我开源的学习仓库中,找到针对各种往期归档文章,及学习资料. B站:白泽talk,公众号[白泽talk],回复"电子书",即可获得包含<100个 ...