博客

在vue2.0项目中使用的是

选项API

写法

• 代码风格：data选项写数据，methods选项写函数…，一个功能逻辑的代码分散。
• 优点：易于学习和使用，写代码的位置已经约定好
• 缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读。

什么是组合API写法

Compositon API?


• 代码风格：一个功能逻辑的代码组织在一起（包含数据，函数…）
• 优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护
• 缺点：需要有良好的代码组织能力和拆分逻辑能力。

组合API-setup函数

使用细节：

• 
setup

  是一个新的组件选项，作为组件中使用组合API的起点。
• 从组件生命周期来看，它的执行在组件实例创建之前
  
vue2.x的beforeCreate

  执行。
• 这就意味着在
  
setup

  函数中
  
this

  还不是组件实例，
  
this

  此时是
  
undefined

• 在模版中需要使用的数据和函数，需要在
  
setup

  返回。

<template>
  <div class="container">
    <h1 @click="say()">{{msg}}</h1>
  </div>
</template>
<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }

    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}
</script>

组合API-生命周期

• 
setup

  创建实例前
• 
onBeforeMount

  挂载DOM前
• 
onMounted

  挂载DOM后
• 
onBeforeUpdate

  更新组件前
• 
onUpdated

  更新组件后
• 
onBeforeUnmount

  卸载销毁前
• 
onUnmounted

  卸载销毁后

总结：

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

组合API-reactive函数

• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

组合API-toRef函数

• toRef是函数，转换
  
  响应式对象
  
  中
  
  某个
  
  属性为单独响应式数据，并且
  
  值是关联的
  
  。

使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。

组合API-toRefs函数

• toRefs是函数，转换
  
  响应式对象
  
  中所有属性为单独响应式数据，对象成为普通对象，并且
  
  值是关联的
  

使用场景：剥离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。

组合API-ref函数

• ref函数，常用于简单数据类型定义为响应式数据
  • 再修改值，获取值的时候，需要.value
  • 在模板中使用ref申明的响应式数据，可以省略.value

使用场景：当你明确知道需要的是一个响应式数据

对象

那么就使用 reactive 即可，

其他情况使用ref。

<template>
  <div class="container">
    <div>{{name}}</div>
    <div>{{age}}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. 响应式数据对象
    const obj = reactive({
      name: 'ls',
      age: 10
    })
    console.log(obj)
    // 2. 解构或者展开响应式数据对象
    // const {name,age} = obj
    // console.log(name,age)
    // const obj2 = {...obj}
    // console.log(obj2)
    // 以上方式导致数据就不是响应式数据了
    const obj3 = toRefs(obj)
    console.log(obj3)

    const updateName = () => {
      // obj3.name.value = 'zs'
      obj.name = 'zs'
    }

    return {...obj3, updateName}
  }
}
</script>
<style scoped lang="less"></style>