06-Vue.js生命周期详解、cli安装和创建项目

一、生命周期

<1>初始化

• beforeCreate
  • 组件创建前
  • 为整个生命周期做准备工作，初始化事件和自身或是子组件的生命周期做准备
  • 数据拿不到
  • 真实DOM拿不到
  • 不常用
• created
  • 组件创建结束
  • 初始化注入其他选项和激活选项
  • 数据可以拿到（可做数据请求、修改数据）
  • 真实DOM拿不到
• beforeMount
  • 组件挂载前
  • 数据可以拿到（可做数据请求、修改数据）
  • 真实DOM拿不到
  • 建议不使用它，让它成为内部事务，不加负担
    内部完成事务
  • 判断el选项
    • 有el，继续判断是否有template选项，证明有子组件。
      • 有template，那么通过render函数将jsx解析为VDOM对象模型
      • 没有template，就要通过outerHTML手动渲染(outerHTML，元素外进行渲染，并 替代原来的容器，并且template在实例内会被解析，将来不会渲染到页面）
    • 没有el，则需要手动挂载：new Vue().$mount("#app")
• mounted
  • 组件挂载结束，已插入页码
  • 数据可以拿到
  • 真实DOM也能拿到
  • 用来修改数据、数据请求

---

<2>运行中

运行中的触发条件是：数据改变

• beforeUpdate
  • 组件更新前
  • 数据可以拿到更新后的数据
  • 也可以拿到更新后的真实DOM
  • 为再一次的更新做准备，生成Virtual DOM
  • 不常用
• updated
  • 组件更新结束
  • 可以拿到修改后的数据
  • 可以拿到真实DOM（可进行真实DOM操作、第三方库实例化）
  • 内部：
    • VDOM重新渲染，然后通过render函数解析为VDOM对象模型，在通过diff进行比对生成patch补丁对象，然后重新渲染为真实DOM
    • 只改变变化的部分，其他部分不变

---

<3>销毁
组件被删除

• beforeDestroy
• destroy
  • 外部开关被销毁
  • DOM和组件都被删除了
  • 内部调用$destroy()
  • DOM没有被删除，组件被删除了
  • DOM需要手动删除
  • 可用来做计时器、滚动事件的善后

二、cli

1、安装
npm/cnpm/yarn（推荐使用yarn）

$ cnpm install @vue/cli -g   这是cli3版本

$ cnpm i @vue/cli-init g     这是cli2的脚手架

vue create project_name      创建一个cli项目