一步一步看Vue原理

在了解 Vue 之前，我们可能会对Wacher & Dep, 有个大概的认识，下面我通过一个简单的例子来看看我们的vue是怎么走的。

<head>
    <title>Vue testing</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./lib/vue.js">
    </script>
</head>
<body>
    <div id='app'>
        <p>
            {{a}}
        </p>
        <br>
        <input type="submit" @click='click'>

    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                a: '0000'
            }
            , methods: {
                click() {

                    this.a = '1111'
                }
            }
        })
    </script>
</body>
</html>

下面的图主要介绍了一些收集原理，有些无关的代码我直接忽略掉，因为以前我自己看些博客总数感觉 Dep 和 Watcher 连不起来。

大概有以下几个问题:

Dep.target 的值是什么时机赋值的?
在Object.defineProperty 中的 get方法中触发收集, 什么时候会触发 get ?
插值变量{{a}}, 是怎么样更新数据的 ?
下面的图片慢慢的剖析 Vue 的运行原理

Vue原理.png

Array 的监测

监听Array.png

最后编辑于：2019.05.30 14:37:46

一步一步看Vue原理

推荐阅读更多精彩内容