Vue面试之watch与computed的区别

Vue中watch与computed的区别

最近在整理一些前端面试中经常被问到的问题,分为vue相关、react相关、js相关、react相关等等专题,可持续关注后续内容,会不断进行整理~

watch与computed作为Vue中两个处理响应式数据的选项,都用来监听数据变化并执行相应的逻辑,在具体使用时会存在区别:

watch

watch用于监听指定的数据变化并执行相应的回调函数,它有两种写法:

对象形式

javascript 复制代码
watch: {
    shops: {
      handler(oldValue, newValue) {
        // 写一些逻辑,当shops参数发生变化时就会执行
      }
    },
    visible: {
      handler(oldValue, newValue) {
        // 写一些逻辑,当visible参数发生变化时就会执行
      }
    }
  },

当需要设置深层监视时(如要监视一个对象时),则需要开启deep属性:

javascript 复制代码
watch: {
    shops: {
      handler(oldValue, newValue) {
        // 写一些逻辑,当shops参数发生变化时就会执行
      },
      deep: true
    }
  }

当需要在初始时立即执行监听回调函数时,需要设置immediate属性:

javascript 复制代码
watch: {
    shops: {
      handler(oldValue, newValue) {
        // 写一些逻辑,当shops参数发生变化时就会执行
      },
      immediate: true
    }
  }

当不需要深层监视或立即监听时,就可以通过如下简单方式:

javascript 复制代码
  watch: {
    shops(oldValue, newValue) {
      // 写一些逻辑,当shops参数发生变化时就会执行
    },
    visible(oldValue, newValue) {
      // 写一些逻辑,当visible参数发生变化时就会执行
    }
  },

vm.$watch方式

该种方式适合对Vue实例进行监听,语法如下:

javascript 复制代码
vm.$watch(
  expression, // 被观察的表达式,可以是一个函数或者一个字符串
  callback,   // 数据变化时的回调函数
  options     // 选项,可选
);
  1. expression为要观察的表达式,它可以是一个函数,也可以是一个字符串。如果是一个函数,则该函数的返回值将被用作观察的对象,如果是一个字符串,则用于访问实例上的属性;
  2. callback即回调函数,接收两个参数:oldValue和newValue;
  3. options为配置对象,可用于设置是否深度监视(deep)和是否立即监视(immediate);
javascript 复制代码
const vm = new Vue({
// vm 即为创建的vue实例
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    // 使用 $watch 监视 message 的变化
    vm.$watch(
      'message',
      (newVal, oldVal) => {
        console.log(`message 发生变化:${oldVal} -> ${newVal}`);
      },
      {
        deep: true,
        immediate: true
      }
    );

    // 修改 message,触发回调函数
    this.message = 'Updated Message';
    // 控制台输出:message 发生变化:Hello, Vue! -> Updated Message
  }
});

computed

computed用于创建 基于响应式数据计算而来的属性 ,该属性可以在模板中直接使用,只有当相关响应式数据发生变化 时才会重新计算,computed选项相当于对数据的一种加工

javascript 复制代码
computed: {
  // 基于data中的属性计算得到
  fullName() {
  // 在firstName或lastName发生变化时会自动计算
    return this.firstName + ' ' + this.lastName;
  },
  // 基于其他computed属性计算得到
  // 在fullName发生变化时会自动计算
  reversedFullName() {
    return this.fullName.split('').reverse().join('');
  }
}

二者区别

相同点

① 二者都是基于Vue的依赖收集机制

② 都是由被依赖的变化触发,从而进行处理计算

不同点

① 时机上,computed从首次被赋值时就被计算 ,而watch不会,需要设置immediate: true才能立即监听

② 性能上,computed会自动进行diff计算,若所依赖项未发生变化,则会从缓存中取值;而watch在每次监听的值发生变化的时候都会执行回调。computed的性能会高

从源码看计算属性:

computed会创建一个计算属性watcher,这个watcher(lazy:true)不会立即执行;通过Object.defineProperty将计算属性定义到实例上;当用户取值时会触发getter,拿到计算属性对应的watcher,看dirty是否为true,如果为true则求值;并且让计算属性watcher中依赖的属性收集最外层的渲染watcher,可以做到依赖的属性变化了,触发计算属性更新dirty并且触发页面更新;如果依赖的值没有发生变化,则采用缓存。

③ 写法上,computed必须要有返回值 ,而watch不用;

④ 异步上,computed不支持异步,watch支持异步 ,支持在回调函数上引入异步方法

⑤ 是否能与data中的属性命名重复, watch必须要监视在data中定义过的属性,computed则不能与data中的属性命名重复

在具体的应用场景下,一般而言,当一个属性受多个属性影响的时候,使用computed,当需要监测一个属性的变化对其它属性的影响时,使用watch

相关推荐
计算机毕设指导62 分钟前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
前端拾光者37 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge