组合API

组合式API和选项式API

组合式API是vue3中提供的新的写代码的方式

vue2的选项式API(option Api)和vue3的组合式API(composition api)的大概差别

vue2中的写法

vue3来实现

小结

Vue2选项式API
优点：简单，各司其职 缺点：不方便功能复用，功能代码分散维护代码横跳
Vue3组合式API
优点：功能代码组合维护

组合API

1 setup函数

作用

1.setup是一个新的组件选项，作为组件中使用组合API的起点
2.setup中不能使用this,this指向undefined
3.只会在组件初始化的时候使用一次
4.在生命周期钩子函数之前执行

参数

setup (props,context) {
  ...
  // props:为一个对象，内部包含了父组件传递过来的所有prop数据
  // context:context对象包含了attrs,slots,emit属性
}

返回值

返回值是一个对象，在模板中需要使用的数据和函数，需要在这个对象中声明 如果在data()中也定义了同名数据，则以setup()中为准

2 生命周期

vue2中的8个

{
  beforeCreate(){ console.log('beforeCreate')},  
  created(){ console.log('created')},
  beforeMount(){ console.log('beforeMount')},
  mounted(){ console.log('mounted')},
  beforeUpdate(){ console.log('beforeUpdate')},
  updated(){ console.log('updated')},
  beforeDestroy(){ console.log('beforeDestroy')},
  destroyed(){ console.log('destroyed')}
}

vue3中的7个

setup (props,context) {
  console.log('创建实例前',props,context);
  onBeforeMount(()=>{
    console.log('挂载DOM前')
  })
  onMounted(()=>{
    console.log('挂载DOM后');
  })
  onBeforeUpdate(()=>{
    console.log('更新组件前');
  })
  onUpdate(()=>{
    console.log('更新组件后');
  })
  onBeforeUnmount(()=>{
    console.log('卸载销毁前');
  })
  onUnmounted(()=>{
    console.log('卸载销毁后');
  })
}

不建议vue2和vue3混合使用

3 ref函数

作用

定义响应式数据

步骤

1.从vue框架中导入
2.在setup函数中调用并传入数据
3.在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去

4 ref属性

vue3步骤

1.导入
2.使用ref函数传入null创建ref对象
3.setup导出
4.模板中通过定义ref属性等于1创建的ref对象名称建立关联

<template>
  <div class="container">
    <div ref="dom">我是box</div>
    <button @click="hClick">hello</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. 获取单个元素
    const dom = ref(null)
    function hClick () {
      console.log(dom.value)
    }
    return {dom, hClick}
  }
}
</script>

5 reactive函数

作用

将复杂数据定义成为响应式数据

步骤

1.导入 2.调用 3.导出

6 toRefs函数

作用

定义转换响应式中所有属性为响应式数据，通常用于解构展开reactive定义对象，简化在模板中的使用

格式

// 响应式数据：{ 属性1, 属性2 }
let { 属性1, 属性2 } = toRefs(响应式数据)

演示

7 ref和reactive

定义响应式数据的两个方式

• ref函数(可以处理简单数据，也可以处理复杂数据),常用于将简单数据类型定义为响应式数据，在代码中修改或者获取值时，需要补上.value 在模板中可以省略
• reactive函数，常用于将复杂数据类型定义为响应式数据
• 推荐用法
  • 优先使用ref
  • 如果明确知道对象中有什么属性，就使用reactive，例如：表单数据