JavaScript从低级往高等走系列————MVVM-Vue

2019年8月20日 215次阅读来源: FinGet

原文博客地址：https://finget.github.io/2018/05/31/mvvm-vue/

MVVM

怎样明白 MVVM
怎样完成 MVVM
是不是解读过 Vue 的源码

Jquery 与框架的区分

jquery 完成 todo-list

<div>
    <input type="text" name="" id="txt-title">
    <button id="btn-submit">submit</button>
</div>
<div>
    <ul id="ul-list"></ul>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    var $txtTitle = $('#txt-title');
    var $btnSubmit = $('#btn-submit');
    var $ulList = $('#ul-list');
    $btnSubmit.click(function () {
        var title = $txtTitle.val();
        if (!title) {
            return
        }
        var $li = $('<li>' + title + '</li>');
        $ulList.append($li);
        $txtTitle.val('');
    })
</script>

vue 完成 todo-list

<div id="app">
  <div>
    <input v-model="title">
    <button v-on:click="add">submit</button>
  </div>
  <div>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
</div>

<script type="text/javascript">
  // data 自力
  var data = {
      title: '',
      list: []
  }
  // 初始化 Vue 实例
  var vm = new Vue({
      el: '#app',
      data: data,
      methods: {
          add: function () {
              this.list.push(this.title);
              this.title = '';
          }
      }
    })
</script>

二者的区分

数据和视图的星散，解耦（开放关闭准绳，对扩大开放，对修正关闭）
在jQuery中在jQuery代码中操纵视图和数据，混在一块了
以数据驱动视图，只体贴数据变化，DOM操纵被封装
只改数据，视图自动更新

MVVM的明白

MVC （Model View Controller）
MVVM （Model View ViewModel）

《JavaScript从低级往高等走系列————MVVM-Vue》

View 经由过程
事宜绑定 (DOM Listeners) 操纵Model; Model经由过程
数据绑定 (Data Bindings)操纵View。

Vue 三要素

相应式： Vue 怎样监听到 data 的每一个属性变化？
模板引擎： Vue 的模板怎样被剖析，指令怎样处置惩罚？
衬着：Vue 的模板怎样被衬着成Html？

Vue中怎样完成相应式

什么是相应式

修正 data 属性以后， Vue 马上监听到
data 属性被代理到 vm上

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

Object.defineProperty，Vue中心函数

var obj = {
  name: 'zhangsan',
  age: 25
}
console.log(obj.name); // 猎取属性的时刻，怎样监听
obj.age = 26; // 赋值属性的时刻，怎样监听

上面是没法监听对象的属性的接见以及赋值操纵的，直接就产生了操纵的效果。

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
  }
})
console.log(obj.name); // 能够监听到
obj.name = 'lisi'; // 能够监听到

Vue 中何如剖析模板

模板是什么

<div id="app">
  <div>
    <input v-model="title">
    <button v-on:click="add">submit</button>
  </div>
  <div>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
</div>

实质：字符串
有逻辑，如 v-if v-for 等
与 html 标签花样很像，但有很大区分（html是静态的，模板是动态的）
终究还要转换为 html 来显现
- 模板终究必需转换成 JS 代码
- 有逻辑（v-if v-for 等），必需用JS才完成（图灵完整）
- 因而，模板最主要转成一个JS函数（render函数）

render函数

with — 现实开发不引荐用

var obj = {
  name: 'zhangsan',
  age: 20,
  getAddress: function () {
    alert('beijing')
  }
}
// 不运用with
function fn() {
  alert(obj.name)
  alert(obj.age)
  obj.getAddress()
}
fn()

// 运用with
function fn1() {
  with(obj) {
    alert(age)
    alert(name)
    getAddress()
  }
}
fn1()

render

<div id="app">
  <p>{{price}}</p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      price: 100
    }
  })
</script>

模板将变成下面这个模样：

function render() {
  with(this) {  // this 就是 vm
    return _c(
      'div',
      {
        attrs: {'id': 'app'}
      },
      [
        _c('p', [_v(_s(price))])
      ]
    )
  }
}

《JavaScript从低级往高等走系列————MVVM-Vue》

看todo-list的render

在vue源码里alert render 函数

《JavaScript从低级往高等走系列————MVVM-Vue》

以上面vue完成的todolist为例：

with(this){  // this 就是 vm
    return _c( // _c建立一个标签
        'div',
        {
            attrs:{"id":"app"}
        },
        [
            _c(
                'div',
                [
                    _c(
                        'input',
                        {
                            directives:[
                                {
                                    name:"model",
                                    rawName:"v-model",
                                    value:(title),
                                    expression:"title"
                                }
                            ],
                            domProps:{
                                "value":(title)
                            },
                            on:{
                                "input":function($event){
                                    if($event.target.composing)return;
                                    title=$event.target.value
                                }
                            }
                        }
                    ),
                    _v(" "),
                    _c(
                        'button',
                        {
                            on:{
                                "click":add
                            }
                        },
                        [_v("submit")]
                    )
                ]
            ),
            _v(" "),
            _c('div',
               [
                _c(
                    'ul',
                    _l((list),function(item){return _c('li',[_v(_s(item))])}) // _l 剖析 v-for 轮回
                )
            ]
          )
        ]
    )
}