vue3组合式Composition API之ref函数的具体用法

ref函数

作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
- JS中操作数据： xxx.value
- 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
备注：
- 接收的数据可以是：基本类型、也可以是对象类型。
- 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
- 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

基本类型：

对象类型：

代码：

<template><h1>一个人的信息</h1><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h3>工作种类：{{ job.type }}</h3><h3>工作薪水：{{ job.salary }}</h3><button @click="changeInfo">修改人的信息</button>
</template><script>
import { ref } from 'vue'
export default {name: 'a2ref',setup() {//数据let name = ref('张三')let age = ref(18)let job = ref({type: '前端工程师',salary: '30K'})//方法function changeInfo() {// name.value = '李四'// age.value = 48console.log(job.value)// job.value.type = 'UI设计师'// job.value.salary = '60K'// console.log(name,age)}//返回一个对象（常用）return {name,age,job,changeInfo}}
}
</script>

vue3组合式Composition API之ref函数的具体用法相关推荐

vue3组合式Composition API之setup函数的具体用法
vue3拉开序幕的setup 理解:Vue3.0中一个新的配置项,值为一个函数. setup是所有Composition API(组合API)" 表演的舞台 ". 组件中所用到的: ...
Vue3.0 Composition API与Vue2.x 使用的 Options API
Vue3.0 所采用的 Composition API 与 Vue2.x 使用的 Options API 有什么不同开始之前 Composition API 可以说是Vue3最大的特点,那么为什么要 ...
vue3.0 - Composition API
一. 介绍 >使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高,代码量会不断的加大:由于相关业务的代码需要遵循option的配置写到特定的区域,导致后续维护非常的复杂,同时 ...
vue3.0 Composition API 上手初体验使用 vue-router 构建多页面应用
vue3.0 Composition API 上手初体验使用 vue-router 构建多页面应用前两讲,我们已经顺利的使用 vue3.0 将项目跑起来了.但是实在是过于简陋,目前我们几乎不可能开 ...
探秘 Vue3.0 - Composition API 在真实业务中的尝鲜姿势
前言 2019年2月6号,React 发布 16.8.0 版本,新增 Hooks 特性.随即,Vue 在 2019 的各大 JSConf 中也宣告了 Vue3.0 最重要的 RFC,即 Functio ...
为什么vue3 需要 Composition API？
文章目录什么是 Composition API? 什么是可组合? Composables 和 Mixin 解决的类似问题组合物 vs Mixin 数据/方法来源的清晰度命名冲突来自组件的变异模 ...
vue3 响应式 API 之 ref
ref 是最常用的一个响应式 API,它可以用来定义所有类型的数据,包括 Node 节点和组件. 没错,在 Vue 2 常用的 this.$refs.xxx 来取代 document.querySel ...
Vue3笔记_02setup与常用的Composition API(组合式API)
目录 setup setup的执行时机 [1]定义数据和方法 vue2中定义数据和方法 vue3中定义数据和方法语法示例-返回值为一个对象示例-返回值为一个渲染函数注意点数据-响应式数据 r ...
vue3学习笔记 Composition API setup
一.Composition API优势相对于vue2的option API Vue3的Composition API设计更有优势 Composition(组合式)Api 功能分组 Compositi ...
Vue3 -- 组合式API
组合式API 组合式api(Composition API)算是vue3对我们开发者来说非常有价值的一个api更新,我们先不关注具体语法,先对它有一个大的感知 1. composition vs op ...

vue3组合式Composition API之ref函数的具体用法

ref函数

基本类型：

对象类型：

vue3组合式Composition API之ref函数的具体用法相关推荐

最新文章

热门文章