MVVM与Vue

发表于 | 分类于

MVM与Vue

MVVM与MVC的区别

MVC

MVVM

总结

MVVM-Model View ViewModel

三者之间的联系，以及对应的代码

ViewModel的理解，联系View与Model

MVVM-Vue

Vue实现三要素

响应式

vue如何监听到data的每个属性变化

响应式定义

Vue实现主要依赖于Object.defineProperty

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>Object.defineProperty test</p>
    <p>响应式</p>

    <script type="text/javascript">
        var obj = {
            name: 'zhangsan',
            age: 25
        }
        console.log(obj)

        var obj = {}
        var _name = 'shangsan'
        Object.defineProperty(obj, 'name', {
            get: function () {
                console.log('get', _name) // 监听
                return _name
            },
            set: function (newVal) {
                console.log('set', newVal)  // 监听
                _name = newVal
            }
        })
    </script>
</body>
</html>

模拟

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>Object.defineProperty test</p>
    <p>模拟</p>

    <script type="text/javascript">

    ////Vue
    // var vm = new Vue({
    //     el: '#app',
    //     data: {
    //         name: 'zhangsan',
    //         age: 20
    //     }
    // })

    //模拟Vue监听name和age

    var vm = {}
    var data = {
        name: 'zhangsan',
        age: 20
    }

    var key, value
    for (key in data) {
        //命中闭包 新建一个函数 保证key的独立的作用域
        (function (key) {
            Object.defineProperty(vm, key, {
                get: function () {
                    console.log('get', data[key]) // 监听
                    return data[key]
                },
                set: function (newVal) {
                    console.log('set', newVal) // 监听
                    data[key] = newVal
                }
            })
        })(key)
    }
    </script>
</body>
</html>

模板引擎

vue的模板如何被解析，指令如何处理

模板

本质：字符串

有逻辑 v-if v-for

与html格式很像，但是有很大区别/Vue动态 html静态

最终转换为html显示

模板最终转换为JS代码：

有逻辑，必须用JS实现（图灵完备）

转换为html渲染页面，必须用JS实现

模板最后转换成一个JS函数（render函数）

模板字符串——>变成成js渲染函数——>渲染成HTML

render函数

render函数与vdom

渲染

vue的模板如何被渲染成html，以及渲染过程

源码

todolist.html