Vue3 Study
reactive 响应式状态
reactive() 函数可以创建一个响应式对象或数组
reactive() 返回的是一个源对象的 Proxy 。
只有代理是响应式的，更改原始的对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是 仅使用代理作为状态。
当使用单文件组件（SFC）时，我们可以使用
<script setup> 来简化大量样板代码。 不需要手动 暴露状态和方法 。
<script setup lang="ts">
import { reactive } from 'vue'
const objData = reactive({
name: '海军',
age:24,
income: 2400000
})
function addIncome(){
objData.income = objData.income + 1000000
}
</script>reactive() 限制：
reactive() API 有两条限制：
- 仅对对象类型有效（对象、数组和
Map、Set这样的集合类型），而对string、number和boolean这样的 基础类型 无效。 - 因为 Vue 的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的引用。这意味着我们不可以随意地 “替换” 一个响应式对象
ref 响应式变量
ref() 方法来帮我们创建响应式的 变量，它可以装载任何值类型。
<script setup lang="ts">
import { ref } from 'vue'
const info = ref({
title: "海军喜提 特斯拉一辆",
price: "售价为： 39万"
})
const str = ref("测试显示内容")
</script>ref() 从参数中获取到值，将其包装为一个带 .value 属性的对象
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0ref 解包
ref 在模板中作为顶层 property 被访问时，它们会被自动“解包” 。
- 访问
深层级的 ref对象 不会被解包 . - 只有当嵌套在一个深层反应式对象内时，才会发生 ref 解包。当起作为 浅层响应式对象 的属性被访问时不会解套。
<script setup lang="ts">
import { ref } from 'vue'
const info = ref({
carInfo:{
title: '特斯拉',
price: 320000
},
onwer:{
name: "海军"
}
})
const str = "海军" //页面使用时，不需要str.value ,自动解包了
const {carInfo, owner} = info.value // 使用ES6 解构.
function changeInfo() {
carInfo.price = carInfo.price+1000000
}
</script>
computed 计算属性
计算属性来描述依赖响应式状态的复杂逻辑
- 计算属性值会基于其响应式依赖被缓存
一个计算属性仅会在其响应式依赖更新时才重新计算。
const computedNum = computed(() => {
if(num.value > 0 ) {
return "奥里给 🐷"
} else {
return "🌜🌛"
}
})计算属性 - 可写
只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建
const computedNum1 = computed({
set(newValue){
},
get(){
}
})类与样式绑定
类
绑定对象
<div :class="{ active: isActive }"></div>
isActive 为true时，渲染为下面
<div class="active"></div>
绑定数组
const activeClass = ref('active')
const errorClass = ref('text-danger')
<div :class="[activeClass, errorClass]"></div>
渲染为
<div class="active text-danger"></div>内联样式
绑定对象
#reactive
const styleObject = reactive({
color: 'red',
fontSize: '13px'
})
<div :style="styleObject"></div>
#ref
const activeColor = ref('red')
const fontSize = ref(30)
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>绑定数组
<div :style="[baseStyles, overridingStyles]"></div>
