MVVM学习记录

使用Object.defineProperty方法，然后通过get和set方法设置对象属性，可以让我们知道对象什么时候被更改了，也就是说，别人对对象的操作，我们都可以知道，记住这句话

image.png

MVVM

M：指Model
V：值View
实现过程：当M变化时通知V，V变化时通知M；

一个简单的代码实现

  
  
  


  

    
姓名
    
年龄
    

  
  

var frank = {
  _data: {
    age: 18,
    name: 'frank'
  }
}
Object.defineProperty(frank, 'age', {
  get: function(){
    console.log('frank.age 被读取了')
    return frank._data.age
  },
  set: function(xxx){
    console.log('frank.age 被设置了')
    $('input[name="age"]').val(xxx)
    frank._data.age = xxx
    if(xxx>20){
      $('form').addClass('red')
    }
  }
})

Object.defineProperty(frank, 'name', {
  get: function(){
    console.log('frank.name 被读取了')
    return frank._data.name
  },
  set: function(xxx){
    console.log('frank.name 被设置了')
    $('input[name="name"]').val(xxx)
    frank._data.name = xxx
    

  }
})

$('form').on('input', 'input[name]', function(e){
  let $input = $(e.currentTarget)
  let name = $input.attr('name')
  let value = $input.val()
  frank[name] = value
})

$('input[name="name"]').val(frank.name)
$('input[name="age"]').val(frank.age)

$('form').on('submit', function(e){
  e.preventDefault()
  console.log(frank)
})

setInterval(function(){
  frank.age ++
},1000)

MVVM的缺点

• 因为M和V会相互影响，只要其中一方更改，必定对另一方有影响，他们是同步的
• DOM操作内存是很快的，而内存操作DOM，相对而言是比较慢的
• 我们做一个MVVM框架时要解决两个问题：
  • 第一个：如果用户频繁改动，能不能做到CPU消耗很小；
  • 第二个：如果用户频繁的进行多次改动，那么我们能不能将多次更改合并为一个。

image.png

Vue Tip

image.png

知识点

• input事件：当用户输入时就会触发，而chang事件，只有鼠标拿开才可以触发
• dom event是同步的过程，它是立即马上执行的

经验

• 学习框架，千万不要一开始就去研究它的具体实现，最开始只要会用就行，等熟练使用了它的所有特性之后，就可以考虑去研究它的源代码实现了；如果一开始就研究它的源代码，那就真的是从开始到放弃了