ref()
ref创建的是基本类型的响应式数据。
作用:定义响应式变量
语法:let xxx = ref(初始值)
返回值:一个RefImpl的实例对象,ref对象的value属性是响应式的
eg: let name = ref('张三') , name不是响应式,name.value是响应式
口头理解:就是通过网站中点击按钮或者是其他,能够让其有反应,不只是控制台有反应,而在网站中也会响应,这大概就是响应式,但是初期就是比较基本的功能。
在组合式 API 中,推荐使用 ref() 函数来声明响应式状态:
import { ref } from 'vue' const count = ref(0)
ref()
接收参数,并将其包裹在一个带有.value
属性的 ref 对象中返回:const count = ref(0) console.log(count) // { value: 0 } console.log(count.value) // 0 count.value++ console.log(count.value) // 1
在组件模板中访问 ref,请从组件的
setup()
函数中声明并返回它们:import { ref } from 'vue' export default { // `setup` 是一个特殊的钩子,专门用于组合式 API。 setup() { const count = ref(0) // 将 ref 暴露给模板 return { count } } }
为什么我们需要使用带有 .value
的 ref,而不是普通的变量?当你在模板中使用了一个 ref,然后改变了这个 ref 的值时,Vue 会自动检测到这个变化,并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时,Vue 会追踪在渲染过程中使用的每一个 ref。然后,当一个 ref 被修改时,它会触发追踪它的组件的一次重新渲染。
练习例子
//person.vue 文件
<template>
<div class="Person">
<h1>姓名:{{name}}</h1>
<h2>年龄:{{age}}</h2>
<h3>联系方式:{{13012345678}}</h3>
<button @click="changeName"> 修改名字 </button>
<button @click="changeAge"> 修改年龄 </button>
<button @click="showTel"> 查看联系方式 </button>
</div>
</template>
<!-- setup是vue3中一个新的配置项,值是一个函数 -->
<script lang="ts" setup="person">
//数据 用let直接写的不是响应式的数据
import {ref} from 'vue'
let name = ref('小二')
let age = ref(18)
let tel = '13012345678'
function changeName (){
name.value = 'xaioer'
console.log(name)
}
function changeAge (){
age.value += 1
console.log(age)
}
function showTel (){
alert(tel)
}
</script>
<style scoped>
/* 样式 */
.Person{
background-color: yellowgreen;
box-shadow: 0 0 10px; /*盒子阴影 */
border-radius: 10px;
padding: 20px;
}
button{
margin: 0 8px;
}
</style>
//app.vue文件
<template>
<!-- <div class="app">
<h1></h1>
<Person/>
</template>
<script lang="ts">
// js/ts
import Person from './components/person.vue'
export default{
name:'App',//组件名
components:{Person} //注册组件
}
</script>
<style>
/* 样式 */
/* .app{
background-color: rgb(206, 231, 231);
box-shadow: 0 0 10px; /*盒子阴影 */
/* border-radius: 10px;
padding: 20px;
} */
</style>
可以手敲一下,不要直接复制粘贴,自己动手练习一下,我用的vscode,应该用什么软件都可以。具体的详细文档,可以看vue官方的。链接:响应式基础 | Vue.js (vuejs.org)https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html