MVVM 和 VUE 详解

说一下使用Jquery和使用框架的区别

• 数据和视图的分离，解耦（开放封闭原则）
• 以数据驱动视图，只关心数据变化，DOM操作被封装

说一下对MVVM的理解

• Model(模型、数据) View（DOM、视图、模板） ViewModel ViewModel是链接Model和View的一个桥
• view可以通过事件绑定的方式影响model
• model可以通过数据绑定影响view

VUE、MVVM框架的三要素

• 响应式：vue如何监听到data的每个属性变化？
• 模板引擎：vue的模板如何被解析，指令如何处理？
• 渲染：vue的模板如何被渲染成html？以及渲染过程

vue中如何实现响应式

• 什么是响应式
  • 修改data属性后，vue立刻监听到
  • data属性被代理到vm上
• Object.defineProperty(obj, prop, desc) 实现响应式的核心函数

Object.defineProperty(obj, prop, desc)的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
模板中没有的数据，不会走get监听，所以也不会走set监听，Object.defineProperty的原则是走get才会走set,防止无用的数据重复渲染。

• 问题解答
  • 关键是理解Object.defineProperty
  • 将data的属性代理到vm上

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

var key, value
for (key in data) {
    (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)
}

vue中如何解析模板

• 模板是什么？
  • 本质：字符串
  • 有逻辑，如v-if v-for等
  • 与html很像，但有很大区别
  • 最终还要转化成html来显示
  • 模板最终要装换成js代码（render函数）

//模板
    <div id="app">
        <p>{{price}}</p>
    </div>
//render函数
        function render() {
            with(this) {  // this 就是 vm
                return _c(
                    'div',
                    {
                        attrs: {'id': 'app'}
                    },
                    [
                        _c('p', [_v(_s(price))])
                    ]
                )
            }
        }
//在vue源码中搜索code.render，然后alert(code.render)可以看render函数

问题解答

• h函数生成vdom
• patch函数渲染成dom

vue的整个实现流程

1. 解析模板成render函数
2. 响应式开始监听
3. 首次渲染，显示页面，且绑定依赖
4. data属性变化，触发rerender