vue 3 组合式API

安装

• 利用 Vite 创建 Vue3 项目

npm init vite-app project-name (or yarn create vite-app project-name)
cd project-name
npm install (or `yarn`)
npm run dev (or `yarn dev`)

组合式 API

当我们的组件变得更大时，用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有用到。然而，这可能会导致组件难以阅读和理解。如果我们能够将与同一个逻辑关注点相关的代码配置在一起会更好。而这正是组合式 API 使我们能够做到的。

setup 组件选项

在 Vue 组件中，使用组合式 API的位置为 setup。

Setup() 在 beforeCreated() 之前执行。因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性。

<template>
  <div>
    <p ref="p1">{{ obj }}</p>
    <p>{{ age }}</p>
    <button @click="myClick">按钮</button>
  </div>
</template>

<script>
import {ref} from "vue"

export default {
  name: "App",
  setup() {
    const obj = {name: 'zs', age: 18}
    const age = ref(18)

    function myClick() {
      age.value++
    }
    return {obj, age, myClick}
  }
}
</script>

setup内部生命周期钩子

这些函数接受在组件调用钩子时将执行的回调。让我们将其添加到 setup 函数中：

<script>
import {ref, onMounted} from "vue"

export default {
  name: "App",
  setup() {
    let p1 = ref(null)

    onMounted(() => {
      console.log('onMounted', p1.value) //<p>{"name": "zs", "age": 18}</p>
    })
    return { p1 }
  }
}
</script>

响应式变量

带 ref 的响应式变量

在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用，如下所示：

import {ref} from "vue"
const age = ref(18)
console.log(age) // { value: 18 }
console.log(age.value) // 18
// 更新数据
age.value = 20

带 reactive 的响应式变量

import {reactive} from "vue"

setup() {
  const state = reactive({
    time: new Date()
  })

  function myClick() {
    state.time?.setDate(state.time.getDate() + 1)
  }
}

ref 与 reactive 的区别：

• reactive 必须传递一个对象，ref 底层本质是 reactive。

  ref(xx) –> reactive({value: xx})

• 在 js 中 ref 的值必须通过 value 获取。

watch 响应式更改

import { ref, watch } from 'vue'

const counter = ref(0)
watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})

以下是等效的选项式 API：

export default {
  data() {
    return {
      counter: 0
    }
  },
  watch: {
    counter(newValue, oldValue) {
      console.log('The new counter value is: ' + this.counter)
    }
  }
}

独立的 computed 属性

与 ref 和 watch 类似，也可以使用从 Vue 导入的 computed 函数在 Vue 组件外部创建计算属性。让我们回到我们的 counter 例子：

import { ref, computed } from 'vue'

const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)

counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2