Vue.js的双向绑定原理

Vue的双向绑定

vue双向绑定是其最重要的核心亮点,其原理也很简单,这里做个简单总结

  • vue2的双向绑定是利用的Object.defineProperty
  • vue3的双向绑定是利用的
    ES6Porxy中的defineProperty(target, propKey, propDesc
    其作用类似于Object.defineProperty

下面写一下两种原理的简单代码

  • 用于直观展示双向绑定的视图层(view) html代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body>

    </body> </html>
  • vue2的双向绑定

    let obj={
    message:"12"
    }
    Object.defineProperty(obj,"message",{
    get:function(){
    return this._message
    },
    set:function(newValue){
    this._message=newValue
    document.getElementById("output").innerHTML=newValue
    }

    })

    document.getElementById("input").addEventListener('input',(event)=>{
    obj.message=event.target.value
    })

代码主要对对象的set过程进行劫持,将其与view层绑定

  • vue3的双向绑定

    let obj={
    message:"12"
    }
    const newObj=new Proxy(obj,{
    get:function(target,propKey,rev){
    return Reflect.get(target,propKey)
    },
    set:function(target,propKey,value){
    Reflect.set(target,propKey,value)
    document.getElementById("output").innerHTML=value
    }
    })

    document.getElementById("input").addEventListener('input',(event)=>{
    newObj.message=event.target.value
    })

  • 效果
    !

相关推荐
可触的未来,发芽的智生1 小时前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理
努力写代码的熊大2 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER2 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh2 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒2 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端
m0_748233643 小时前
C++开发中的常用设计模式:深入解析与应用场景
javascript·c++·设计模式
fruge3 小时前
TypeScript 基础类型与接口详解
javascript·ubuntu·typescript
今天没有盐3 小时前
💕CSS 基础入门指南💕:选择器与文本样式
前端·html·响应式设计
AAA阿giao3 小时前
JavaScript 中的变量声明:var、let 与 const 深度解析
javascript·笔记
云枫晖3 小时前
Webpack系列-Entry入口
前端·webpack