web前端vue3.0之数据监听(watch、computed) - 文章

theme: juejin

前言

我们在做vue项目中，会存在这么两种情况，就是一个数据去影响多个数据，另一种就是一个数据受多个数据的影响，那么面临这样的情况，我们应该怎么去处理呢？

针对以上问题，那么vue给我们推出了两个属性来处理上述问题，那么接下来我们来看看这两个属性（watch、computed）

computed

1、计算属性，和onMounted一样，初始化就会执行一次（computed先执行），并且只有在依赖改变的时候触发，可以提升性能。

2、computed参数分为两种，第一种是回调函数的写法，第二种则是options对象的写法

3、计算属性的依赖是指vue里面双向绑定的变量

4、支持缓存，只有依赖的数据发生改变才真的重新计算

5、只能在同步场景中使用

6、支持 get set存储器方法

7、场景：一个数据受多个数据的影响

8、必须调用return

示例代码

<div class="hello">
  <input type="text" v-model="name">
  <input type="text" v-model="lname">
  <h2>{{fname}}</h2>
  <button @click="btn">点击</button>
</div>

写法一：参数为回调函数


<script setup>
import { ref, computed } from "vue";
const name = ref(0)
const lname = ref(0)
/**
 * 回调函数写法
 * 当任意一个input框中的发生改变都会影响数fname
 * 即computed的特性：
 * 一个数据受多个数据的影响
 */
const fname = computed(() => {
  return Number(name.value) + Number(lname.value)
})
</script>

写法二：参数为options对象


<script setup>
import { ref, computed } from "vue";
const name = ref(0)
const lname = ref(0)
/**
 * 写法二
 * options参数（get和set）
 * 使用get和set创建可写的ref对象
 * 当input的值发生改变时，走get函数函数，那么影响展示数据的变化
 * 当展示数据的值在事件中直接改变，那么会走set方法，set方法可以去修改input框的值
 */
const fname = computed({
  get: () => {
    return Number(name.value) + Number(lname.value)
  },
  set: val => {
    name.value =  Number(val) - Number(lname.value)
  }
})
const btn = function () {
  fname.value = 3
}
</script>

watch

1、数据监听，就是监听的某个数据发生了变化后，那么执行相对应的函数

2、数据不缓存

3、同步异步场景都可以使用，性能开销很大的场景也适合

4、场景：一个数据影响多个数据，主要做业务处理

5、不是必须return

示例代码 写法一：监听单一的源


/**
* 监听单一源
* watch参数：第一个参数为ref变量或者为data源返回的getter函数，第二个参数是回调函数
* 当前属于监听ref
* 可以访问先前值和当前值
* 当我们的值发生了改变，那么我们想要去做一些同步或者异步的操作都可以实现
* 如果监听单独的ref变量，那么只需要在第一个参数置去写上其变量名称即可
*/
<div class="hello">
  <input type="text" v-model="name">
</div>
<script setup>
import { ref, watch } from "vue";
const name = ref(0)
watch(name,(newValue, oldValue)=>{
  console.log(newValue, oldValue)
})
</script>

/**
* 监听单一源
* watch参数：第一个参数为ref变量或者为data源返的getter函数，第二个参数是回调函数
* 当前第一个参数属于监听data源返回的getter函数
* 第一个参数，通过监听源返回的getter函数的结果当结果发生改变，那么将会进入我们的watch，我们可以进行同步或者异步的操作
*/
<div class="hello">
  <input type="text" v-model="state.name">
</div>
<script setup>
import { reactive, watch } from "vue";
const state = reactive({name: ''})
watch(() => state.name,(newValue, oldValue)=>{
  console.log(newValue, oldValue)
})
</script>

写法二：监听多个源

/**
 * 监听多个源
 * watch参数：第一个为数组，数组中是多个源（ref定义变量、源返回的getter函数），第二个参数是回调函数
 * 在回调函数中，分为两个参数，第一个参数是当前值存放的数组，第二个参数是先前值存放的数组
 * 在监听多个源的watch中，我们想使用那个，只需去使用对应的数组中对应的值
*/
<div class="hello">
  <input type="text" v-model="name">
  <input type="text" v-model="state.name">
</div>
<script setup>
import { reactive, watch, ref } from "vue";
const state = reactive({name: ''})
const name = ref(0)
watch([name, () => state.name],([newName, stateName], [oldName, oldStateName])=>{
  console.log(newName, stateName)
  console.log(oldName, oldStateName)
})
</script>

写法三：监听对象


/**
 * watch监听对象，返回值得到一个响应式数据
 * 当监听对象时，watch参数有三个
 * 第一个参数可以时data源的getter函数也可以是应式数据
 * 第二个参数是回调函数（由于数据是响应式数据，新数据发生改变同时也会更改旧数据）
 * 第三个参数是一个options，options对象存在deep键值对，deep为boolen类型，
 * 当deep为true时，则是深度监听，当其中源中的对象的一个key值发生改变，那么就会进入watch中，完成需要的操作
*/
<div class="hello">
  <input type="text" v-model="state.name">
</div>
<script setup>
import { reactive, watch } from "vue";
const state = reactive({name: ''})
watch(state,(p1, p2)=>{
  console.log(p1, p2)
}, {deep: true})
</script>

以上就是前端vue3.2数据监听(computed和watch)的内容，希望对大家有所帮助.

本文出自微信公众号：前端资料号，欢迎大家关注。