Vue基础5

组件身上加原生组件必须加上native

虚拟DOM&&了解

• 掌握程度：了解

• 案例

  • 操作真实DOM越少越好，尽量去操作数据
  • 所以总结出来虚拟DOM
  • 所以Vue利用VDOM的对象模型来模拟就变的很复杂了，所以VUe使用了一个新的语法糖，叫做SX

• jsx

  • javascript+html 让我们可以在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>
  

• render

  • （createElement=>VNode）
  • 将jsx通过render方法解析为对象模型

• 流程

  • 第一次时
  • template模板使用jsx语法进行编辑
  • 通过render函数将jsx解析为vdom对象模型
  • 将VDOM对象模型渲染为真实DOM，然后挂载到页面中
  • 当我们的数据发生改变时
  • 重新生成VDOM
    

• 总结：

  • 为什么Vue中要使用VDOM？
  • VDOM为什么可以优化Vue？
  • VDOM渲染流程
  • JSX语法
  • render函数

生命周期【王者】

掌握程度
会写
会念
明白和了解每一个钩子函数的意义和作用
特别注意：
钩子函数不要写成箭头函数，箭头函数可能会改变this指向

1. 理解：为什么要有生命周期？
2. Vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能，方便我们更好的去控制组件
3. 类比：人
   • 出生 - 哭
   • 小学
   • 中学
   • 高中
   • 大学/专科
   • 工作
   • 。。。。
4. Vue的生命周期分为三个阶段，8个钩子函数
   • 初始化
     • beforeCreate
     • created
     • beforeMount
     • mounted
   • 运行中
     • beforeUpdate
     • updated
   • 销毁
     • beforeDestroy
     • destroyed