Vue双向绑定实现原理
2023-06-13 09:15:55 时间
实现双向绑定需要Object.defineProperty,需要了解劫持对象的属性后获取对象的属性会触发get函数,更改对象属性值会触发set函数
<div id="demo"></div>
<input type="text" id="inp">
let obj = {}
let demo = document.getElementById("demo")
let inp = document.getElementById("inp")
Object.defineProperty(obj, 'name', {
get() {
console.log('已获取')
return val
},
set(val) {
console.log('已赋值')
demo.innerHTML = val
}
})
inp.addEventListener('input', e => {
obj.name = e.target.value
})
以上代码在input框输入内容时会给obj.name赋值就会触发set函数
在读取name属性例如let a=obj.name就会触发get函数并将return的值赋给a
相关文章
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- vue中新增属性视图问题
- vue 深入响应式原理 注意事项
- Vue响应式实现原理[通俗易懂]
- 自己实现一个Vue Router -- Vue Router原理解析
- Vue router原理
- html使用vue axios,使用 Vue和axios
- VUE双向绑定原理_vue的数据绑定怎么实现
- 每日一题之Vue数据劫持原理是什么?
- 每日一题之Vue的异步更新实现原理是怎样的?
- vue这些原理你都知道吗?(面试版)
- vue源码分析-插槽原理
- Vue响应式系统原理并实现一个双向绑定
- Vue响应式依赖收集原理分析-vue高级必备
- 「后端小伙伴来学前端了」Vue中全局事件总线(GlobalEventBus)原理及探究过程
- vue的双向绑定原理及实现_vue的数据绑定怎么实现
- vue的双向绑定原理_vue2双向绑定原理
- vue的双向绑定原理_vue的双向绑定原理及实现
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- VUE组件封装_vue组件内部双向绑定
- Vue和Springboot实现SM4加密和解密(前端可加密,后端可加解密,MD5同理)
- vue-router实现路由懒加载( 动态加载路由 )_前端懒加载原理
- vue的双向绑定原理_数据双向绑定原理
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- vue的那些原理题?(面试版)
- 写过vue自定义指令吗,原理是什么
- linux下快速部署Vue项目(linux部署vue)
- vue main.js中app绑定的是index.html还是App.vue中详解编程语言
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue用Redis储存获取数据(vue获取redis)
- Vue实时监测Redis变化(vue监控redis变化)
- 使用Vue从Redis获取数据(vue去redis取数据)