vue是怎么实现mvvm的

vue是怎么实现mvvm的，它为何可以这么厉害，vue是怎么实现mvvm的，它为何可以这么厉害

不知道你这个问题是否已经解决, 如果还没有解决的话:

本文主要围绕几种实现双向绑定的做法、“实现数据监听器Observer”、“实现指令解析器Compile”、“实现订阅者Watcher”、“实现MVVM”这几个模块来阐述了双向绑定的原理和实现。

并根据思路流程渐进梳理讲解了一些细节思路和比较关键的内容点，以及通过展示部分关键代码讲述了怎样一步步实现一个双向绑定MVVM。

本文能帮你做什么?

  • 1、了解vue的双向数据绑定原理以及核心代码模块
  • 2、缓解好奇心的同时了解如何实现双向绑定

为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助

本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm

相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，下面先看一个本文最终实现的效果吧，和vue一样的语法，如果还不了解双向绑定，猛戳Google

<div id="mvvm-app">
    <input type="text" v-model="someStr">
    <input type="text" v-model="child.someStr">
    <p>{{ getHelloWord }}</p>
    <p v-html="htmlStr"></p>
    <button v-on:click="clickBtn">change model</button>
</div>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<!-- 打包压缩了上面四个js文件 -->
<!-- <script src="https://images.vrm.cn/2u/2020/09/01/self-mvvm.min.js"></script> -->
<script>
    var vm = new MVVM({
        el: '#mvvm-app',
        data: {
            someStr: 'hello ',
            htmlStr: '<span style="color: #f00;">red</span>',
            child: {
                someStr: 'World !'
            }
        },

        computed: {
            getHelloWord: function() {
                return this.someStr + this.child.someStr;
            }
        },

        methods: {
            clickBtn: function(e) {
                var randomStrArr = ['childOne', 'childTwo', 'childThree'];
                this.child.someStr = randomStrArr[parseInt(Math.random() * 3)];
            }
        }
    });

    vm.$watch('child.someStr', function() {
        console.log(arguments);
    });
</script>

类似下面效果：
在这里插入图片描述
点我体验效果


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^