Vue.生命周期

为什么生命周期呢？

---

Vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能，方便更好的去控制组件。

Vue的生命周期分为三个阶段 ， 8个钩子函数

---

注意：钩子函数不要写成箭头函数，箭头函数可能会改变this 指向

1. 初始化
   • beforeCreate
   • created
   • beforeMount
   • mounted|
2. 运行中
   • beforeUpdate
   • updated
3. 销毁
   • beforeDestroy
   • destroyed

虚拟DOM & DIff 算法

---

1. 案例
   • 操作真实DOM越少越好，尽量的去操作数据
   • 所以有了虚拟dom
   • 所以Vue利用VDOM 的对象模型来模拟DOM结构
   • 但是当一个页面很复杂式，DOM结构的模拟就变的很复杂了，所以Vue使用了一个新的语法糖 ，叫做 JSX
2. JSX
   • javascript + xml 可以在js中书写dom 结构

 <template id="mask">
    <div class="mask-box">
      <div class="mask-bg"></div>
      <div class="mask-content">
        <p> 您确定要离开吗？ </p>
        <button 
          class="button button-warning button-fill pull-right"
          @click = "removeItem( activeIndex )"
        > 确定 </button>
      </div>
    </div>
  </template>

3. render
   • ( createElement => VNode)
   • 将jsx 通过 render 方法解析为对象模型
4. 流程
   • 第一次时
   • template 模版使用jsx 语法进行编辑
   • 通过render函数将jsx解析为vdom 对象模型
   • 将VDOM对象模型渲染为真实DOM ，然后挂载到页面中
   • 当我们数据发生改变时
   • 重新生成VDOM