Vue3 组合式API

1. Vue3相对于Vue2优势

• 性能提升

  • 首次渲染更快

  • diff算法更快

  • 内存占用更少

  • 打包体积更小

• 更好的Typescript支持

• Composition API （重点）组合式API

2. Vue3的一些破坏性语法更新

1. 实例方法$on移除 （eventBus现有实现模式不再支持 可以使用三方插件替代）

2. 过滤器filter移除 （插值表达式里不能再使用过滤器 可以使用methods替代）

3. .sync语法移除 （和v-model语法合并）

3. 组合式API

1. setup()函数

• setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）

• setup 中不能使用 this， this 指向 undefined

• setup函数只会在组件初始化的时候执行一次

• setup函数在beforeCreate生命周期钩子执行之前执行

export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}

2. reactive 函数

作用：reactive是一个函数，接收一个普通的对象传入，把对象数据转化为响应式对象并返回

1. 从vue框架中导入reactive函数

2. 在setup函数中调用reactive函数并将对象数据传入

3. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去

<template>
  <div>{
  { state.name }}</div>
  <div>{
  { state.age }}</div>
  <button @click="state.name = 'dashuai'">改值</button>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup () {
    const state = reactive({
      name: 'cp',
      age: 18
    })
    return {
      state
    }
  }
}
</script>

3. ref 函数

作用：ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象

1. 从vue框架中导出ref函数

2. 在setup函数中调用ref函数并传入数据（简单类型或者复杂类型）

3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去

4. 注意：在setup函数中使用ref结果，需要通过.value 访问，模板中使用不需要加.value

<template>
  <div>{
  { money }}</div>
  <button @click="changeMondy">改值</button>
</template>

<