用JS简单实现Vue的双向绑定
2023-09-11 14:21:46 时间
Vue实现数据双向绑定原理:
采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty() 将它们转为 getter/setter。
这里来简单模拟一下双向绑定。
特点
1.比如input被监视,当输入发送改变时,会将数据推送到模型中。
2.当模型中的数据发生改变时,会映射到视图上。
思路
1.用defineProperty 劫持对象,添加好getter/setter方法,对劫持对象进行赋值时会执行setter,取值时执行getter。
2.页面监视很容易想到事件监听,输入框用addEventListener 添加 input事件,输入发生改变时,触发事件回调,将值赋值给劫持的对象,触发劫持对象的setter,在setter中把新数据写到模型中、同时更新到页面上。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
输入:<input type='text' id='inputText'/><br>
动态值:<span id="show"></span>
</body>
<script>
var inputText = document.getElementById("inputText");
var show = document.getElementById("show");
//输入框添加 input事件
inputText.addEventListener("input",function(e){
//给劫持对象设置为输入后的值
defineObj.value = e.target.value;
})
//劫持对象
var defineObj = {};
//defineProperty进行劫持
Object.defineProperty(defineObj, 'value', {
configurable: true,
enumerable: true,
get:function() {
return val;
},
set: function(newVal){
val = newVal;
//设置输入值跟随变化
inputText.value = val;
//设置显示值跟随变化
show.innerHTML = val;
}
})
</script>
</html>
最终效果
在文本输入框输入值,会同步展示出来,内存中也同样发生了改变;
改变内存中的数据值,直接映射到页面上。
关注下方公众号,有更多资料、实例代码、面试技巧奉上!
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue.js快速介绍-超级马里奥像素艺术
- 使用 Vuex + Vue.js 构建单页应用【新篇】
- JS框架_(JQuery.js)文章全屏动画切换
- JS框架_(Vue.js)带有星期日期的数字时钟
- vue-cli 3.0 index.html引入第三方js文件
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue.js 3.2.20: 用photoswipe实现图片的浏览:增加切换动画和自动播放(photoswipe@4.1.3)
- vue.js 3.2.20: 用rem实现移动端和pc的兼容
- springboot+vue实现前后端分离之后端spring部分(spring boot 2.5.4/vue.js 3.2.4)
- Vue.js 入门指南
- Vue.js
- [Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt
- vue.js3: js下载图片的两种方式:url和canvas(vue@3.2.37)
- vue.js 3.2.22:用useIntersectionObserver监控多行数据的可见性(@vueuse/core@7.0.3)
- springboot+vue实现前后端分离之前端vue部分(spring boot 2.5.4/vue.js 3.2.4)
- 原生js实现随机验证码HTMl-JS
- Stimulsoft Dashboards.JS 2022.2.3 Crack
- vue - chunk-vendors.js文件太大,实现拆分打包的具体配置
- js 事件循环中宏任务和微任务执行顺序
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- Vue(八)vue 脚手架、脚手架创建项目示例
- js金额价格四舍五入保留2位小数demo效果(整理)
- js、jq知识点文档
- Vue.js起步
- vue.js