Vue3 Study

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) // 0

ref 解包

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>