vue数据双向绑定源码分析

最新推荐文章于 2024-03-19 20:18:30 发布

Lumbago～

最新推荐文章于 2024-03-19 20:18:30 发布

阅读量300

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_55690702/article/details/116299269

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先说一下数据双向绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

实现一个简单的数据双向绑定的html页面需要引入四个重要的js（四个步骤）来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM</title>
</head>
<body>
<div id="app">
    <p>{{msg}}</p><!--w0==> dep0  -->
    <p v-text="msg"></p><!--w1 ==> dep0-->
    <p v-html="msg"></p><!--w2 ==> dep0-->
    <!--dep0 ==>[w0,w1,w2]-->


    <p>{{friend.name}}</p><!--w3 ==> {dep1,dep2}-->
    <!--dep1==>[w3]-->
    <!--dep2==>[w3]-->
    <button v-on:click="update">更新</button>
</div>
<script src="./mvvm-master/js/observer.js"></script>
<script src="./mvvm-master/js/compile.js"></script>
<script src="./mvvm-master/js/watcher.js"></script>
<script src="./mvvm-master/js/mvvm.js"></script>
<script>
    const vm = new MVVM({
        el: "#app",
        data: {
            msg: "aa",//dep0
            friend:{//dep1
                name:"cc"//dep2
            }
        },
        methods:{
            update(){
//                this.msg = "cc";
                this.friend.name = "dd";
            }
        }
    });

    console.log(vm.name)

</script>
</body>
</html>

具体步骤：
第一步：
observer.js源码分析

第二步：
compile.js源码分析

第三步：
watcher.js源码分析

第四步：
mvvm.js源码分析

Lumbago～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue数据双向绑定源码分析

首先说一下数据双向绑定原理vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。实现一个简单的数据双向绑定的html页面需要引入四个重要的js（四个步骤）来实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫