这是我参与「第五届青训营」笔记创作活动的第12天。

一、重点内容

MVVM、MVP、MVC
conputed、watch、methods

二、详细知识点介绍

MVVM、MVP、MVC

像是在开发单页面应用时，一个路由页面对应一个所有页面逻辑都在里面的脚本文件，混杂了页面渲染、数据获取、事件的响应，不利于项目的开发和维护。MVVM、MVP、MVC是三种软件架构设计模式，分类分工来构造代码结构，优化开发效率。

1.MVVM

分为Model(定义数据模型，数据和业务逻辑）、View（展示数据即UI视图）、ViewModel（监听Model中数据的改变，处理交互，控制视图的更新）。 Model和ViewModel双向数据绑定，又因为上述分工导致ViewModel天然的有中介性质，使得Model和View的数据能够实现自动同步。开发者不需要操作DOM，只需要维护数据。

2.MVC

分为Model（存储业务数据和对数据的操作）、View（展示数据即UI视图）、Controller（用户和应用的响应操作）。 View和Model应用观察者模式，当Model发生变化时会通知有关View层更新页面。当用户和页面交互，Controller中事件触发器会调用Model层，修改使得Model发生变化，进而再由Model通知有关View层更新页面。

3.MVP

区别于MVC的是通过使用Presenter实现View和Model层解耦。由于View层接口暴露给Presenter，要实现同步更新可以在Presenter中将View的和Model的变化绑定在一起。

computed、watch、methods

1.computed

computed：若是有频繁的计算，在模板中频繁计算会使得模板过重，难以维护。那么可以写在methods里的options，但会导致所有data的使用过程都变成了一个方法的调用。因此可以使用计算属性computed。computed的优势（相较于methods）：

简洁，见名知意
计算属性有缓存（对于任何包含响应式数据的复杂逻辑，都应该用computed。）

2.method

和computed的比较：method中函数被调用一次就会执行一次，而computed因为基于依赖进行缓存，所以只在依赖改变时才会执行。

3.watch

watch的默认监听不是深度监听。

//深度监听
watch:{
  message:{
    handler(newValue,oldvalue){
      console.log("message数据发生了改变")
    }，
  deep:true
   //第一次也要监听的话 immediate:true
  "message.name":function(oldValue,newValue){console.log("名字发生了改变")}
  }
}

默认有两个参数：newValue, oldValue

watch:{
message(newValue,oldValue){
console.log("message数据发生了变化",newValue,oldValue)
},
info(){}
}

如果是对象的话返回给到的是proxy（代理对象）。

要是要通过代理对象拿到原始对象，方法有：

展开输出：console.log({...newValue})
Vue方法：console.log(Vue.toRow(newValue))

三、个人总结

开始学习vue的时候是因为想要上手做项目，能够快速看到成效，但过了一段时间会有些遗忘，所以写这篇文章也是在记录一些复习的知识点，一边学习新知识的同时不能忘记复习旧知识。

Vue知识点|青训营笔记