vue.js中methods watch和computed的区别示例详解

目录
  • 前言
  • 介绍
    • 一、作用机制上
    • 二、从性质上
    • 三、watch和computed的对比
    • 四、methods不处理数据逻辑关系,只提供可调用的函数
    • 五、从功能的互补上看待methods,watch和computed的关系
    • 六、利用computed处理watch在特定情况下代码冗余的现象,简化代码
  • 总结
    • computed
    • watch

前言

这篇文章主要简述vue中的watch和computer区别,还有methods

首先,先说一下这几个不同在哪里,那当然是长得不一样啦~~~,

哈哈哈哈哈不开玩笑了,截下来进入正题。

介绍

methods : 挂载在对象上的函数,通常是 Vue 示例本身 或 Vue 组件

computer:属性看起来像一个方法,但其实不是,在 Vue 中我们一般使用 data 来跟踪对特性属性的更改。计算属性允许我们定义一个与数据使用相同方式的属性,但也可以有一些基于其依赖关系的自定义逻辑。你可以考虑计算属性的另一个视图到你的数据。

watch:这些可以让你了解反应系统(Reactivity System)。我们提供了一些钩子来观察Vue存储的任何属性。如果我们想在每次发生变化时添加一些功能,或者响应某个特定的变化,我们可以观察一个属性并应用一些逻辑。这意味着观察者的名字必须与我们所观察到的相符。

仅凭这几句话不能讲清楚这三者之间的区别,接下来我们上例子:

一、作用机制上

computed\watch:watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。

methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和computed那样,“自动执行”预先定义的函数。

【小结】:·methods·里面定义的函数,是需要主动调用的,而和watch和computed相关的函数,会自动调用,完成我们希望完成的作用。

二、从性质上

1、methods里面定义的是函数,你显然需要像"fuc()"这样去调用它(假设函数为fuc)。

2、computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上)

例如:

computed:{
   fullName: function () { return  this.firstName + lastName }
}

你在取用的时候,用this.fullName去取用,就和取data一样(不要当成函数调用!!)

3、watch:类似于监听机制+事件机制

例如:

watch: {
   firstName: function (val) {  this.fullName = val + this.lastName }
}

firstName的改变是这个特殊“事件”被触发的条件,而firstName对应的函数就相当于监听到事件发生后执行的方法。

三、watch和computed的对比

watch computed
一个数据影响多个数据 一个数据受多个数据影响

watchcomputed一个数据影响多个数据一个数据受多个数据影响

四、methods不处理数据逻辑关系,只提供可调用的函数

相比于watch/computed,methods不处理数据逻辑关系,只提供可调用的函数

new Vue({
  el: '#app',
  template: '<div ><p>{{ say() }}</p></div>',
  methods: {
    say: function () {
      return '我在他乡挺好的'
    }
  }
})

五、从功能的互补上看待methods,watch和computed的关系

在很多时候,computed是用来处理你使用watch和methods的时候无法处理,或者是处理起来并不太恰当的情况的
利用computed处理methods存在的重复计算情况

1.methods里面的函数就是一群“耿直Boy”,如果有其他父函数调用它,它会每一次都“乖乖”地执行并返回结果,即使这些结果很可能是相同的,是不需要的

2.而computed是一个“心机Boy”,它会以Vue提供的依赖追踪系统为基础,只要依赖数据没有发生变化,computed就不会再度进行计算

六、利用computed处理watch在特定情况下代码冗余的现象,简化代码

总结

computed

  1. computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过的数据通过计算得到的
  2. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
  3. 如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
  4. computed计算属性是根据依赖关系进行缓存的计算,并且只在需要的时候进行更新。

watch

监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;

computed(计算属性) watch(侦听属性)
支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持缓存,数据变,直接会触发相应的操作;
不支持异步,当computed内有异步操作时无效,无法监听数据的变化 watch支持异步;

好了,到此这篇关于vue.js中methods watch和computed区别的文章就介绍到这了,更多相关vue中methods watch和computed区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue中的methods、watch、computed的区别

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景,也很难用好它们,希望接下来的介绍为你答疑解惑. computed 我们先来看计算属性:computed,光看名字也知道是用来干什么的,计算属性当然是用来计算的,但是是怎么计算的呢?计算属性有两个显著的特点: 计算属性计算时所依赖的属性一定是响应式依赖,否则计算属性不会执行 计算属性是基于依赖进行缓

  • Vue中computed、methods与watch的区别总结

    前言 对于那些开始学习Vue的人来说,对于方法.计算属性和观察者之间的区别有点混淆. 尽管通常可以使用它们中的每一个来完成或多或少相同的事情,但了解每个人在哪里胜过其他人还是很重要的. 在这个快速提示中,我们将了解Vue应用程序的这三个重要方面及其用例.我们将通过使用这三种方法中的每一种构建相同的搜索组件来实现这一点. Methods 在一个方法中,或多或少是您所期望的--一个对象属性的函数.您可以使用方法对发生在DOM中的事件作出反应,或者可以从组件中的其他位置调用它们,例如,从计算属性或观察

  • vue中计算属性(computed)、methods和watched之间的区别

    前言 本文主要给大家介绍了关于vue中计算属性(computed).methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是同样的. 不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职.只要相关依赖未改变,只会返回之前的结果,不再执行函

  • vue.js中methods watch和computed的区别示例详解

    目录 前言 介绍 一.作用机制上 二.从性质上 三.watch和computed的对比 四.methods不处理数据逻辑关系,只提供可调用的函数 五.从功能的互补上看待methods,watch和computed的关系 六.利用computed处理watch在特定情况下代码冗余的现象,简化代码 总结 computed watch 前言 这篇文章主要简述vue中的watch和computer区别,还有methods 首先,先说一下这几个不同在哪里,那当然是长得不一样啦~~~, 哈哈哈哈哈不开玩笑了

  • 浅析Vue.js中v-bind v-model的使用和区别

    v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据 最基础的就是实现一个联动的效果 <body> <div class="app"> <span>Multiline message is:</span> <p>{{message}}</p> <br> &l

  • 在vue项目中优雅的使用SVG的方法实例详解

    1.基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标. 本文以vue项目为例,当然在react中的使用原理基本相似. svg图标可以直接通过img标签来使用,也可当做icon来使用. 本文是参考了鑫旭大佬的文章:SVG Sprite技术介绍. 2.配置 安装svg-sprite-loader.通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,所以需要处理下: { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, l

  • vue.js表单验证插件(vee-validate)的使用教程详解

    综述 名称:vee-validate 用途:简单的 Vue.js 表单验证插件 官网:地址 github:地址 特别提示 配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面,通用性强 安装 单页安装 npm install vee-validate --save 浏览器安装 <!-- unpkg --> <script src="https://unpkg.com/vee-validate@2.0.0-rc.

  • vue+three.js实现炫酷的3D登陆页面示例详解

    目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什

  • JS中的Replace()传入函数时的用法详解

    replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串.. 废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> var str = "a1ba2b"; var reg = /a.b/g; str = str.replace(reg,func

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • Node.js 中的 fs 模块与Path模块方法详解

    概述: 文件系统模块是一个简单包装的标准 POSIX 文件 I/O 操作方法集.可以通过调用 require("fs") 来获取该模块.文件系统模块中的所有方法均有异步和同步版本. 文件系统模块中的异步方法需要一个完成时的回调函数作为最后一个传入形参. 回调函数的构成由调用的异步方法所决定,通常情况下回调函数的第一个形参为返回的错误信息. 如果异步操作执行正确并返回,该错误形参则为null或者undefined.如果使用的是同步版本的操作方法,一旦出现错误,会以通常的抛出错误的形式返回

  • vue实现鼠标滑动预览视频封面组件示例详解

    目录 组件效果 组件设计 1.视频截取关键帧 2.鼠标移入封面时显示对应关键帧 3.视频和封面的状态切换 功能实现 1.视频截取关键帧图片列表 1.1 截取指定帧 1.2 截取stepNums张关键帧图片 2.鼠标移入封面时显示对应关键帧 2.1 鼠标移动事件监听 2.2 鼠标移出事件监听 3.视频和封面的状态切换 3.1 播放视频 3.2 视频暂停 组件使用 组件库引用 组件效果 https://www.jb51.net/Special/926.htm 组件设计 我们首先应该要对组件进行一个简

  • Vue.js3.2的vnode部分优化升级使用示例详解

    目录 背景 什么是 vnode 普通元素 vnode 组件 vnode vnode 的优势 如何创建 vnode 创建 vnode 过程的优化 总结 背景 上一篇文章,分析了 Vue.js 3.2 关于响应式部分的优化,此外,在这次优化升级中,还有一个运行时的优化: ~200% faster creation of plain element VNodes 即针对普通元素类型 vnode 的创建,提升了约 200% 的性能.这也是一个非常伟大的优化,是 Vue 的官方核心开发者 HcySunYa

随机推荐