Vue的数据双向绑定,vue 3 和 vue2 数据劫持

Vue的数据双向绑定,vue 3 和 vue2 数据劫持

1.Vue的数据双向绑定

Vue的数据双向绑定,其实就是通过数据劫持+发布者订阅者模式来实现的。

  • Observer 通过Object.definePropty进行数据劫持
  • Dep 发布者,添加订阅者以及在数据发生改变的时候通知所有的订阅者
  • Watcher 订阅者,对数据进行观察以及保存数据修改需要触发的回调
  • Compiler 模板编译器,对HTML模板进行编译,提取其中的变量并转化为数据(绑定更新Watcher 订阅者)

在这里插入图片描述
双向绑定:

<!DOCTYPE html>
 <head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
 </head>
 <body>

    <!-- 实现vue -->
    <div id="app">
        <input type="text" v-model="text">
        {
   {
    text }}
    </div>

  <script type="text/javascript">

    function defineReactive(obj, key, val){
   
        var dep = new Dep();
        Object.defineProperty(obj, key, {
   
            get: function(){
   
                if(Dep.target){
   
                    dep.addSub(Dep.target);
                }
                return val
            },
            set: function(newVal){
   
                if(newVal === val)
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值