一文学会使用vue3组合式api

·  阅读 380

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第29天,点击查看活动详情

官宣:Vue 3 将于 2022 年 2 月 7 日成为新的默认版本!

vue3的核心库其实开发出来已经近一年了,但是直到2月7日,vue3文档才正式出现在官网。 这意味着vue3已经可以正式用于商业项目开发了。

vue3最大的语法更新就是组合式api了,都快2022年五一小长假了,作为一个使用vue的web前端,再不会使用vue3的组合式api,你就太过时了。

组合式api需要了解的语法

ref

ref的意思是引用,reference。 pass-by-reference-vs-pass-by-value-animation.gif

将值封装在一个对象中,看似没有必要,但为了保持 JavaScript 中不同数据类型的行为统一,这是必须的。这是因为在 JavaScript 中,Number 或 String 等基本类型是通过值而非引用传递的

onMounted,watch,computed

在vue2中,我们使用data函数让数据变为响应式的。我们可以直接写类似下面的代码:

data() {
    return {
        count:0
    }
}

vue2特意强调,要使用函数。

vue3组合式api定义响应式,则是使用ref函数。

看起来,都经过了一道中间处理。

笔者还没有认真阅读vue3源码,还不知道ref函数和data函数到底有何不同。

另外,数组不是一个引用类型吗?为何文档说需要使用ref包裹起来。

import {watch, onMounted, computed } from 'vue'

这些vue3新暴露的api都会在特定的时机调用回调函数。

vue2mounted,computed是一样的调用时机,可以说,这些api就是为了setup定制的。

组合式api所做的

组合式api所实现就是将业务流程集中化,而不是碎片化,业务流程随着时间滚动。形成一个时间流式的业务流。

使用组合式api封装一个表单控件

<template>
  <input v-model:value="value" style="width: 100%" @input="valueChange" :placeholder="placeholder" />
</template>
<script setup>
import { ref, defineProps, watch, defineEmits} from 'vue'

const props = defineProps({
  placeholder: {
    type: Object,
    default: {}
  }
})
const emit = defineEmits([
  'update:modelValue'
])
const value = ref(undefined)
const valueChange =(e) => {
 emit('update:modelValue', e.target.value)
}
</script>
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改