01-选项API和组合API

什么是选项API写法：Options ApI

• 咱们在vue2.x项目中使用的就是 选项API 写法

  • 代码风格：data选项写数据，methods选项写函数...，一个功能逻辑的代码分散。

• 优点：易于学习和使用，写代码的位置已经约定好

• 缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读。

• 补充：虽然提供mixins用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护。

什么是组合API写法：Compositon API

• 咱们在vue3.0项目中将会使用 组合API 写法

  • 代码风格：一个功能逻辑的代码组织在一起（包含数据，函数...）

• 优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护

• 缺点：需要有良好的代码组织能力和拆分逻辑能力，PS：大家没问题。

• 补充：为了能让大家较好的过渡到vue3.0的版本来，也支持vue2.x选项API写法 总结：

• 虽然说vue3.0也支持选项api的写法,但是既然都用了vue3.0我们就还是用组合api的写法。

02-组合API-setup函数

• setup 是一个新的组件选项,但同时他也是组合api的起点。
• setup可以理解为在vue2.x的beforeCreate钩子前执行(组件实例创建前)执行。
• 这就意味着在setup函数中不能使用this获取vue实例，this 此时是 undefined
• 模板中需要使用的数据和函数,必须要在setup中返回,返回时是一个对象(有点像vue2中的data)。

// 演示代码
export default {
  setup () {
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }
    // 返回数据和函数
    return { msg , say}
  }
}

03-组合API-生命周期

回顾vue2.x生命周期钩子函数：

• beforeCreate 创建前
• created 创建后
• beforeMount 挂载前
• mounted 挂载后
• beforeUpdate 更新前
• updated 更新后
• beforeDestroy 销毁前
• destroyed 销毁后

认识vue3.0生命周期钩子函数:

• setup  创建实例前
• onBeforeMount  挂载DOM前
• onMounted  挂载DOM后
• onBeforeUpdate  更新组件前
• onUpdated  更新组件后
• onBeforeUnmount 卸载销毁前
• onUnmounted  卸载销毁后

// 演示代码
// vue3.0中钩子函数使用前需要引入
import { onBeforeMount, onMounted } from 'vue'
export default {
  setup () {
    onBeforeMount(()=>{
      console.log('DOM渲染前',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后1',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后2',document.querySelector('.container'))
    })
  },
}

总结：  组合API的生命周期钩子有7个，并且可以多次使用同一个钩子，执行顺序和书写顺序相同。