vue面试高频考题----computed和watch的区别❓

前言

金三银四,到了面试的白热化状态了,不知道各位友友都面的如何了。最近发现面试经常问VUE中的computedwatch的区别,正好写一篇文章来拿下这道小题。

computed

computed是vue中的计算属性,其可以组合现有的数据生成新的数据,且自动追踪依赖并缓存结构。

依赖机制
  1. 依赖追踪

Vue 会自动追踪 computed 属性中使用的响应式数据,并在计算属性访问时建立起依赖关系。这意味着,当计算属性的值被访问时,Vue 会知道这个计算属性依赖哪些响应式数据。Vue 会将这些依赖的数据与计算属性绑定在一起。

  1. 缓存机制

计算属性的一个关键特点是它具有缓存机制。Vue 会记住计算属性上次的计算结果以及它所依赖的数据。当这些依赖的数据发生变化时,计算属性会重新计算;如果没有发生变化,则 Vue 会直接返回上次计算的缓存值。

这种机制避免了不必要的计算,提高了性能,尤其是在计算过程较为复杂时。

  1. 计算属性依赖的更新

当计算属性依赖的数据发生变化时,Vue 会标记这些计算属性为"脏"(dirty)。下次访问时,Vue 会重新计算该计算属性并更新缓存。如果依赖的数据没有变化,Vue 就会直接返回缓存值。

computed的两种写法

选项式写法 在选项式写法中,computed 属性是一个对象,其中每个属性都是一个函数(getter),并且你可以通过传递 set 方法来定义一个setter,用于修改计算属性的值。

比如:

xml 复制代码
<template>
  <div>
    姓:<input  v-model="Name1" >
  </div>
  <div>
   名:<input v-model="Name2" >
  </div>
 <div>
    姓名:  {{fullName}}
    <button @click="change">修改</button>
 </div>
 
</template>

<script setup>
import { ref,computed } from 'vue'
let Name1 = ref('zhang')
let Name2 = ref('san')

 const fullName=computed({
  get(){
      return Name1.value +"-"+ Name2.value;
  },
  set(value){
      let names = value.split('-')
      Name1.value = names[0]
      Name2.value = names[1]
  }
 })
function change(){
    fullName.value = '李-四'
}
</script>

<style  scoped>

</style>          

在这个例子中,fullName 计算属性有一个 get 方法和一个 set 方法。get 方法是用来获取计算值的,而 set 方法则用于设置计算属性的值。在 set 方法中,我们将输入的值分割成 Name1Name2,从而实现修改计算属性的值。

函数式写法 在函数式写法中,computed 属性直接是一个函数,这种写法更加简洁,它只支持一个grtter函数,不允许修改值。

js 复制代码
 const fullName=computed(=>{
 Name1.value +"-"+ Name2.value;
 })

watch

在 Vue 中,watch 是一个强大的工具,用于观察数据变化并在数据变化时执行自定义操作。

watch的基本概念

watch 是 Vue 实例的一个选项,它可以监听一个或多个数据源的变化,并在变化发生时执行相应的回调函数。

watch 的基本语法

javascript 复制代码
new Vue({
  data() {
    return {
      searchQuery: '',
      results: []
    };
  },
  watch: {
    // 监听 searchQuery 的变化
    searchQuery(newValue, oldValue) {
      // 当 searchQuery 改变时执行的操作
      console.log(`searchQuery changed from "${oldValue}" to "${newValue}"`);
      this.fetchResults(newValue);
    }
  },
  methods: {
    fetchResults(query) {
      // 模拟 API 请求
      setTimeout(() => {
        this.results = [`Result for "${query}"`];
      }, 500);
    }
  }
});

案例: 比如我们在网站中进行商品搜索时,可以用watch来监听数据变化,防抖处理避免频繁请求。

ini 复制代码
import { ref, watch, onMounted, computed } from 'vue';
import axios from 'axios';
import { debounce } from 'lodash-es';

const searchQuery = ref('');
const priceRange = ref([0, 10000]);
const debouncedFetchProducts = debounce(fetchProducts, 500);
watch([searchQuery, priceRange], () => {
  debouncedFetchProducts();
}, { deep: true });

这里watch同时监视 searchQuery (搜索关键词)和 priceRange (价格范围)这两个响应式数据 ,当这两个值中的任何一个发生变化时,都会触发回调函数。

watch vs computed

  • computed 主要用于计算派生数据,且会根据依赖的响应式数据自动缓存,避免重复计算。
  • watch 则更多用于执行副作用操作,如异步请求、操作外部 API 或改变其他数据等,它不缓存数据,每次监听到变化都会执行回调。

总结:

  • watch 主要用于执行副作用操作,它监听数据的变化,并在变化时触发回调函数。

  • 可以通过 deep 来深度监听对象、数组的变化,通过 immediate 来使 watch 立即执行一次。

  • watch 的回调接收两个参数:newValueoldValue,用于比较数据前后的变化。

  • 它在处理异步操作时特别有用,比如发起 API 请求等。

相关推荐
Yvonne爱编码1 小时前
CSS- 1.1 css选择器
前端·css·状态模式·html5·hbuilder
山河故人1631 小时前
uniapp使用npm下载
前端·npm·uni-app
-曾牛1 小时前
基于微信小程序的在线聊天功能实现:WebSocket通信实战
前端·后端·websocket·网络协议·微信小程序·小程序·notepad++
一口一个橘子2 小时前
[ctfshow web入门] web72
前端·web安全·网络安全
Web极客码2 小时前
如何使用WordPress SEO检查器进行实时内容分析
前端·seo·wordpress
Stella25212 小时前
【Vue】CSS3实现关键帧动画
前端·vue.js·css3
junjun.chen06062 小时前
【在qiankun模式下el-dropdown点击,浏览器报Failed to execute ‘getComputedStyle‘ on ‘Window‘: parameter 1 is not o
前端·javascript·前端框架
Yvonne爱编码2 小时前
HTML-3.3 表格布局(学校官网简易布局实例)
前端·html·github·html5·hbuilder
素雪风华2 小时前
构建RAG混合开发---PythonAI+JavaEE+Vue.js前端的实践
java·vue.js·python·ai·语言模型·llms·qwen千问大模型
测试界萧萧3 小时前
15:00开始面试,15:06就出来了,问的问题有点变态。。。
自动化测试·软件测试·功能测试·程序人生·面试·职场和发展