vue响应式核心API(1)

饺子不放糖
116 阅读1分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情

ref()

响应式API，接受一个值会返回一个响应式且可更改的ref对象，该对象只有一个指向其内部值的属性.value

在js中需要使用.value来获取或者更改，在模版中使用使用ref对象名即可。 目前有一个实验性功能，可以使用$()显示开启简化代码

<script setup>

import { ref } from 'vue'
let num = ref(0);
console.log(num.value) //0
setTimeout(() => {
    num.value = 9;
    console.log(num.value) // 9
}, 1000)

</script>

reactive()

reactive 对复杂数据进行响应式处理，它的返回值是一个 proxy 对象，在 setup 函数中返回时，可以用 toRefs 对 proxy 对象进行解构，方便在 template 中使用。

<script setup>

import { reactive ,toRefs} from 'vue'
let personal = reactive({age:10})

console.log(personal.age)//10

setTimeout(()=>{
    personal.age = 20;
  const { age } =toRefs(personal);
  console.log(age) //20
},1000)
</script>

computed()

computed接收一个回调函数或者对象，并返回一个通过其它属性经过计算的新值，主要是通过getter函数返回一个对象，该对象可通过.value属性访问值。同时会使用setter函数进行赋值操作。

<script setup>

import { ref,reactive ,toRefs,computed} from 'vue'
let num = ref(1);
let newNum = computed({
     get:()=>{
        return num.value*4
     },
     set:(val)=>{
       num.value = val;
     }
})
console.log(newNum.value) // 4
setTimeout(()=>{
   newNum.value = 20;
   console.log(newNum.value) //80
},1000)

</script>

watch()

提到computed就不得不说watch了，都是数据发生变化时会被触发。watch会在数据发生变化调用对应的回调函数。

<script setup>

import { ref, reactive, toRefs, computed, watch } from 'vue'
let num = ref(1);
console.log(num.value) // 1
watch(num,(newValue,oldValue)=>{
    console.log(newValue,oldValue) //5,1
})

let personal = reactive({ age: 10 })

console.log(personal.age)//10
watch(() => personal.age, (newValue, oldValue) => {
    console.log(newValue, oldValue) // 20,10
})


setTimeout(() => {
    personal.age = 20;
    num.value = 5;
}, 1000)


</script>

上述代码有两个，第一个是侦听基础类型： 侦听基础类型的第一个参数就是需要侦听的值的名称，第二个参数是回调函数。

第二个是侦听复杂类型的某个属性。 监听personal 对象的 age 属性，那么只有当 personal 对象的 age 属性发生变更时，才会触发 watch 方法，其它属性变更不会触发 watch 方法。注意，此时的第一个参数是一个箭头函数。

avatar
文章
阅读
粉丝