vue,基本思路 MVVM设计模式 生命周期函数

vue

 MVVM设计模式
 传统前端划分: 
  HTML: 专门保存网页内容和结构的文档
  CSS: 专门定义网页样式的文档
  JS: 为网页添加交互行为
 问题: HTML和CSS太蠢了！不会动态变化
      一切交互都只能靠JS添加。
      导致JS中大量重复的代码和重复的步骤。
 MVVM模式: 
  1. 界面View: 增强版的HTML和CSS，可跟据数据自动变化
  2. 模型数据Model:集中存储一个页面内的所有变化的数据。
  3. 视图模型ViewModel: 将View界面和Model模型数据包裹起来，统一管理，自动同步修改。
    ViewModel中(new Vue()对象)
      包含两大子系统: 
        1. 响应系统: 将模型数据包裹起来，为每个模型变量自动添加get()和set()保镖。
            今后只要修改任何模型变量，都自动经过set()，set()中会触发通知: xx变量变为xx新值
            通知会发给虚拟DOM树
        2. 虚拟DOM树
           什么是: 创建new Vue时，通过扫描完整DOM树，仅提取可能变化的元素和属性，组成的一颗及精简的虚拟DOM树。
           优点: 1. 查找元素快
                 2. 封装了重复性的增删改查DOM操作
           虚拟DOM树接到通知，快速找到受影响的元素。调用已经封装好的DOM函数，仅更新受影响的元素的受影响的属性。

//网页的页面应该包在一个父元素内，起一个id
<div id="app">
   <button @click="add">click me {{i}}</button>
</div>

<script>
  var data={
    i:0;
  }
  //至少两个成员  参数解构
  new Vue({
    el:'',//通过选择器，找到界面div,
    data, //data:data, 将数据装入VUE
    methods:{
      //所有的函数都要放到methods中
      //add:function(){}  //es6中直接  对象中的函数可以省略:function
      add(){
        this.i++;
      }   
    }
  })
</script>

//1：做网页界面
//2：将页面中可能变化的数据保存在data对象中统一管理
//3：创建VUE对象；

new Vue的生命周期: 
    什么是: 一个new Vue()的加载过程: 
    何时: 如果希望在加载过程某个阶段，自动执行一项任务时。
    如何: new Vue()的声明周期包括4个阶段，8个函数
        钩子函数——其实就是在不同阶段自动执行的回调函数
        前: beforeCreate(){ ... }
    1. 创建(create)阶段:创建new Vue()对象和data()对象
        已经有data对象了，但是没有虚拟DOM树
        可以发送ajax请求
        因为没有虚拟DOM树，所以暂时不能用DOM操作
        后: created(){ ... }
        前: beforeMount(){ ... }
    2. 挂载(mount)阶段: 创建虚拟DOM树，将data中的变量值开始向DOM树上绑定
        即有data对象，又有虚拟DOM树
        即可发送ajax请求，又可执行DOM操作
        后: mounted(){ ... }
    //后两个阶段不是必须: 
        前: beforeUpdate(){ ... }
    3. 更新(update)阶段:当data中的变量值被改变时才触发
        后: updated(){ ...}
        前: beforeDestroy(){ ... }
    4. 销毁(destroy)阶段: 当调用专门的$destroy函数销毁一个组件时，才触发
        后: destroyed(){ ... }