又是干货！vue的响应式基础

阿达西
64 阅读4分钟

我在上一篇文章里面介绍了一下vue的一些基础指令，今天我将再给大家介绍一下vue的新核心属性——响应式。vue的响应式是指当Vue中的数据发生变化时，他能自动检测到这种变化，并更新相关的视图。也就是说这样就无需手动的去操作DOM来更新视图了

vue的响应式基础

vue的响应式主要可以通过ref，reactive，computed，watch这些API实现

ref的使用，即适用范围

ref可以将 基本的数据类型和复杂数据类型 变为响应式数据。ref函数接受一个初始值作为参数，并返回一个响应式的引用对象。如果我们想让一个数据变成响应式的，我们就需要在将其用ref()包裹起来，例如

const count = ref(0)  //这样我们就将count设置为响应式了。
const items = ref([1, 2, 3])  
const userInfo = ref({
      name: '张三',
      age: 28
   });

console.log(count.value)  //但是我们在或许使用的过程中要使用count.value
console.log(items.value[1])
console.log(userInfo.value.name)

注意：要在组件模板中使用 ref首先要导入ref import { ref } from 'vue'。

为了让大家有个更深刻的印象，我们直接来看一个实例：

image.png 我们给count设置为响应式，当我们点击+1按钮时，我们可以看到旁边的数字也在跟着增加。

reactive的使用

reactive的作用与ref类似，也是将一个数据变成响应式的，但是与ref不同的是，他只能监听复杂的数据类型，不能监听基本数据类型。为什么只能监听复杂的数据类型？这就需要提到前置知识里的Proxy。实际上，reactive底层是通过Proxy来实现数据劫持的。我们在这里也不做过多的解释。我们使用reactive时就不用使用.value了。它的使用方法与ref相似，如下：

<script setup>
import { reactive } from 'vue'

const userInfo = reactive({
      name: '张三',
      age: 28
    });
    userInfo.name = '李四'
    console.log(userInfo.name)
</script>

<template> 
  <span>{{userInfo.name}}</span>
</template>

大家可以观察发现，我们使用reactive时，使用数据就不用再加.value了,所以我们在平时使用时，如果是简单的数据类型我们通常使用ref，但如果是复杂数据类型，我们就更常用的是reactive。

watch的使用

监听一个或多个响应式数据源，并且在其改变时，调用所给的回调函数，回调函数的接受两个参数，分别为改变后的值和改变前的值。watch可以接受两个或三个参数（如果只接受两个参数的话就是监听的数据源），第三个参数是一个对象，可选择为immediate，deep，flush，once。

  • immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
  • deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。cn.vuejs.org/guide/essen…
  • flush：调整回调函数的刷新时机。
  • once：回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止。

为了使大家有个更直观地印象，大家可以看看以下代码

<script setup>
import { ref,watch } from 'vue';

let temp = ref(30)
let suggest = ref('建议穿夹克')
watch(temp,(newVal,oldVal)=>{
    if(newVal>=30){
        suggest.value = '建议穿短袖'
    }else if(newVal>=20){
        suggest.value = '建议穿夹克'
    }else if(newVal>=10){
        suggest.value = '建议棉袄'
    }else{
        suggest.value = '建议羽绒服'
    }
 })

大家看看这个最后的打印出来的结果是什么？如果我在后面再加一个{immediate:true},打印出来的又是什么呢？

结果是不加的话，刚开始suggest的值是建议穿夹克，加了之后就会变成建议穿短袖。所以从这里我们就知道了，watch不会自动执行一次。

computed的使用

computed 是实现响应式系统的关键特性之一，它用于定义“计算属性”。计算属性是基于Vue实例中其他数据属性（通常是响应式的）的值进行计算得到的新值，并且这个计算过程是自动跟踪依赖的，当依赖发生变化时，计算属性的值会自动更新，进而触发依赖它的DOM更新。 computed他是会返回一个值的。

const suggest = computed(()=>{
    if(temp.value>=30){
        return '建议穿短袖'
    }else if(temp.value>=20){
        return '建议穿夹克'
    }else if(temp.value>=10){
        return '建议棉袄'
    }else{
        return '建议羽绒服'
    }
})

我们在开始就定义一个suggest接受computed返回的值。

上次讲到的指令中双向绑定

要实现双向绑定就需要使用到响应式的特性了。双向绑定主要通过v-model指令来完成。v-model是一个语法糖，它结合了数据绑定和事件监听，让表单控件与Vue实例的数据双向同步。例如我们在表单中输入一个数据的话，我们可以立即在外面拿到这个数据。

<template>
 <input type="text" v-model="val">
 <h3>{{val}}<h3>
</template>

<script setup>
import {ref} from 'vue'
let name = ref('')
</script>

a128f619-082a-4c79-a660-83910ecbd090.gif

总结

今天主要在这里介绍了一下ref，reactive，watch，computed的用法，讲的还是比较基础的。不过今天自己梳理了一下，自己的一些不理解的地方也清晰了不少。对于简单的状态管理，我们用ref和reactive足够；处理衍生状态时优选computed；需要执行额外操作时考虑watch。

avatar
文章
阅读
粉丝