01-Vue.js历史、概念、深入响应式原理

1、Vue官网

Vue官网

---

2、后端架构思想

M Model 数据层
V View 视图层
VM ViewModel 视图模型（ 业务逻辑 VM 是 由 P 改名得来的）
P Presenter 提出者（ Controller 改名得来的 ）
C Controller 控制器 (业务逻辑 )

---

3、前端的重要年份

2016年

• es6
• vue2.0
• angular2.0x
• 微信小程序/小游戏

---

4、Vue的一些特点

• vue.js是一个渐进式框架
• 也是一种MVVM框架，
• 也是一种单向数据流框架

---

5、第一个Vue案例

• 当第一次通过script标签对引vue.js时，就会产生一个全局的vue，vue是一个构造器函数
• 语法：Vue(options)

  • this._init(options)//在初始化执行vue
    参数options：“选项”，是一个对象

  • options/el：称之为自动挂载，即将页面一个已存在的dom作为整个实例的作用范围，出了整个范围vue的实例就没有作用了。（注意：body不能作为el的挂载目标）

  • options/data：new类型中data选项是一个对象

    • 使用形式：在实例范围内相当于全局变量，我们要将这个变量放在一个模板 语法中才能解析，这个语法叫mustache，也叫双大括号{{ }}
    • 适用范围：el确定的范围

M：data选项
V：el挂载的实例

---

6、根组件

• 通过new Vue中el选项确定的实例范围，这个dom结构称之为“Root组件/根组件”

---

7、Vue中双向数据绑定通过v-model指令实现

---

8、数据驱动

• 改变vm中的data，视图也跟着改变，这种模式称之为数据驱动
• 数据驱动视图改变
• Vue官方称这种模式为：深入响应式原理
  

---

9、如何理解深入式响应式原理？

• vue是通过数据劫持和事件的订阅发布来实现的，数据劫持指的是vue通过observer观察者对象对data选项中的数据进行setter和getter设置（ Object.defineProperty ），事件的订阅发布指的是vue通过事件来监听，通知vue进行视图更新
• 监听：options/watch

---

10、底层原理

  // Vue 底层原理 
  // 目的： 使用原生js来实现Vue深入响应式 

  var box = document.querySelector('.box')

  var button = document.querySelector('button')

  var data = {
    name: 'Jick'
  }

  // 观察者对象

  var observer = {...data} 

  // es5提供的api方法,这个方法不兼容ie8以及以下
  // Object.defineProperty(对象，对象的属性，对象属性的修饰符 )

  Object.defineProperty(  data,'name',{
    // get/set  统称为: '存储器'
    get () {
      return  observer.name // 初始化赋值一个值给name属性
    },
    set ( val ) {
      console.log( val )
      box.innerHTML = val
    }
  })

  button.onclick = function () {
    data.name = "Rose"
  }

  box.innerHTML = data.name