新星计划打卡学习:VUE3组合式API

目录

1、vue3组件页面的构成

2、setup选项

3、reactive

4、ref

最后


1、vue3组件页面的构成

从上到下依次是 逻辑、结构、样式

2、setup选项

经过语法糖的封装更简单的使用组合式api

TypeScript 复制代码
<script setup> 
// 经过语法糖的封装更简单的使用组合式api
const message = 'this is a message!';
const logmessage = () => {
  alert("666")
}
</script>

3、reactive

reactive:接受对象类型的数据,返回一个响应式的对象

TypeScript 复制代码
<script setup> 
//reactive:接受对象类型的数据,返回一个响应式的对象
import {reactive} from 'vue'
const state = reactive({
  count: 100
})

const setCount = () => {
  state.count++;
}
</script>

<template>
<div>{{state.count}}</div>
<div></div>
<button @click="setCount">按钮</button>
</template>

<style scoped>
</style>

4、ref

ref:可接受普通数据类型和对象数据类型,返回一个响应式的对象

TypeScript 复制代码
<script setup> 
//ref:可接受普通数据类型和对象数据类型,返回一个响应式的对象
import {ref} from 'vue'
const state = ref(0)

//ref封装了reactive,返回的还是一个对象,脚本中取值的时候需要加.value
const setCount = () => {
  state.value++;
  console.log(state);
  console.log(state.value);
}
</script>

<template>
<!-- 模板中取值的时候可以直接写变量 -->
<div>{{state}}</div>
<div></div>
<button @click="setCount">按钮</button>
</template>

<style scoped>
</style>

注意:在工作中更推荐使用ref,ref在脚本中使用时需要加.value,在模板中使用时可以直接拿来用,并且它既可以接收对象类型又可以接受普通数据类型,因此使用了ref,相当于统一了编程规范。

图解说明:

打印出来的ref是一个对象,对reactive进行了封装,它的值放在value里面,需要通过.value的方式拿出里面的值

最后

以上这篇文章就是我今天学习的全部内容了,通过学习,我简单了解了 Vue3 响应式的内容,通过自己编写实际案例也学习了 reactiveref 的用法。

相关推荐
小小小小宇29 分钟前
Vue.nextTick()笔记
前端
小约翰仓鼠2 小时前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in2 小时前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴2 小时前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼2 小时前
一篇文章实现Android图片拼接并保存至相册
android·java·前端
全职计算机毕业设计3 小时前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
你的人类朋友3 小时前
✍️Node.js CMS框架概述:Directus与Strapi详解
javascript·后端·node.js
啊~哈3 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
xiaogg36783 小时前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui