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

猫与故巷0214

于 2021-08-16 11:10:30 发布

阅读量457

点赞数 1

文章标签： vue js proxy javascript ecmascript

本文链接：https://blog.csdn.net/qq_44827845/article/details/119728438

版权

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

1.Vue的数据双向绑定
2.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)

最低0.47元/天解锁文章

猫与故巷0214

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue的数据双向绑定，vue 3 和 vue2 数据劫持

Vue的数据双向绑定，vue 3 和 vue2 数据劫持1.Vue的数据双向绑定2.vue 3 和 vue2 数据劫持区别1.Vue的数据双向绑定Vue的数据双向绑定，其实就是通过数据劫持+发布者订阅者模式来实现的。Observer 通过Object.definePropty进行数据劫持Dep 发布者，添加订阅者以及在数据发生改变的时候通知所有的订阅者Watcher 订阅者，对数据进行观察以及保存数据修改需要触发的回调Compiler 模板编译器，对HTML模板进行编译，提取其中的变量并转化为
复制链接

扫一扫