持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情
一、获取节点（refs）
向vue2一样通过refs获取dom节点信息
<template>
<div class="container">
<!-- 节点上使用变量 -->
<h2 ref='refDom'>节点</h2>
</div>
</template>
<script>
import { ref,onMounted } from 'vue'
export default {
name: 'App',
setup() {
// 定义一个响应式变量
const refDom = ref(null)
onMounted()=>{
// 打印节点信息
console.log(refDom.value)
}
//抛出去
return { refDom }
}
}
二、ref
ref 用于定义基本数据类型响应式数据，同样返回一个具有响应式状态的副本(也可以定义复杂类型的响应式，即对象，但是获取也要.value)
获取数据值的时候需要加.value。
<div class="container">
<h2 >{{name}}-{{state.count}}</h2>
</div>
<script>
import { ref } from 'vue'
export default {
setup(){
// 为基本数据类型添加响应式状态
const name = ref('Neo')
// 打印name的值
console.log(name.value)
/// 为复杂数据类型添加响应式状态
const state = ref({
count: 0
})
// 打印count的值
console.log(state.value.count)
return {name,state}
}
}
</script>
三、reactive
reactive 用于定义响应式对象的,接收一个js对象作为参数，返回一个具有响应式状态的副本
获取数据值的时候直接获取，不需要加.value
参数只能传入对象类型
<div class="container">
<h2 >{{state.count}}</h2>
</div>
<script>
import { reactive } from 'vue'
export default {
setup(){
// 响应式状态
const state = reactive({
count: 0
})
// 打印count的值
console.log(state.count)
return {state}
}
}
</script>
四、toRef
toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。
接收两个参数：源响应式对象和属性名，返回一个ref数据。
获取数据值的时候需要加.value
<template>
<div class="container">
<h2>{{ name }}</h2>
</div>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
name: 'App',
setup() {
// 定义一个对象响应式
const obj = reactive({
name: 'ifer'
})
// 使用toRef,返回一个obj.name里面的响应式
const name = toRef(obj, 'name')
// 打印name, name.value==obj.name
console.log(name.value)
setTimeout(()=>{
name.value = 'xxx' // 或者修改 obj.name='xxx' 都会影响视图变化
// 所以 name.value 变化 obj.name也会变化 （是关联的）
},3000)
return { name }
}
}
五、toRefs
toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref
主要是用于结构reactive对象的，如果直接结果会破坏响应式
获取数据值的时候需要加.value
<template>
<div class="container">
<!-- 输出一： -->
<h2>{{ obj.name }}-{{obj.name1}}</h2>>
<!-- 输出二： -->
<h2>{{ name }}-{{name1}}</h2>>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: 'ifer',
name1: 'xsw'
})
// 解构对象
const { name } = toRefs(obj)
// 打印name
console.log(name.value)
//我们可以通过toRefs解构后输出和直接输出对象，这样就有两种方式了
// 输出一：
return { obj }
// 输出二：
return { ...toRefs(obj) }
}
}
</script>
