一步一步看Vue原理

作者: LeeDev | 来源:发表于2019-05-29 14:39 被阅读13次

    在了解 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

    相关文章

      网友评论

        本文标题:一步一步看Vue原理

        本文链接:https://www.haomeiwen.com/subject/dgaetctx.html