1,computed 能实现的,methods 肯定也能够实现。

2,不同之处在于,computed 是基于他的依赖进行缓存的,computed 只有在他的的相关依赖发生改变的时候才会重新计算。

如果他的相关依赖并没有发生改变,每次访问都是返回他的缓存的值。

methods,则是每次触发重新渲染之后,调用方法会再次执行函数。

总结:当我们不希望有缓存的时候,就使用methods

3,computed 和 watch 的相同和不同之处

相同点:computed 和 watch 都是以vue的依赖追踪为基础的,都是希望当依赖发生改变的时候,被依赖的数据根据预定好的函数发生改变。

不同点:watch 监听,一般是监听一个数据,从而影响多个数据

computed 计算属性, 一般是计算一个属性,这个属性受多个数据影响

总结:一般使用computed,但是如果需要异步,或者数据开销太大的情况下,使用watch.

计算属性(computed)、方法(methods)和侦听属性(watch)的区别与使用场景的更多相关文章

  1. [vue]计算和侦听属性(computed&watch)

    先看一下计算属性 vue只有data区的数据才具备响应式的功能. 计算和侦听属性 - v-text里可以写一些逻辑 <div id="example"> {{ mess ...

  2. 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

    https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...

  3. vue计算属性VS侦听属性

    原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...

  4. 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽

    今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...

  5. vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面

    3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...

  6. VUE 计算属性 vs 侦听属性

    计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...

  7. 浅谈vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...

  8. 六、vue侦听属性

    $watch 实际上无论是 $watch 方法还是 watch 选项,他们的实现都是基于 Watcher 的封装.首先我们来看一下 $watch 方法,它定义在 src/core/instance/s ...

  9. Vue 侦听属性

    Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性 <!DOCTYPE html> <html> <head> <meta cha ...

  10. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

随机推荐

  1. iOS APP 在前台时弹出本地通知

    iOS10 之后使用才有效果 1.在 AppDelegate.m 文件里面添加下面的方法. - (void)userNotificationCenter:(UNUserNotificationCent ...

  2. Code once, debug everywhere.

    1.通常语言调用一个函数会出exception的情况,在javascript里面返回的是undefined.等到程序运行不正常的时候,你看到数据结构的有些地方为什么是undefined,只能哭了. 2 ...

  3. inet超级服务器和守护进程

    inetd是监视一些网络请求的守护进程,其根据网络请求来调用相应的服务进程来处理连接请求.它可以为多种服务管理连接,当 inetd接到连接时,它能够确定连接所需的程序,启动相应的进程,并把 socke ...

  4. WordPress禁用插件另类方法不用进后台

    刚刚一小美女说她在WordPress后台启用了一个插件后出现了问题,网站前端和后端都不能打开了,ytkah查看了一下是有个插件api和另一个插件冲突了,但要怎么禁用呢?有两个办法可以解决 1.直接删除 ...

  5. wamp设置本地访问路径为a.com

    我们在用wamp进行本地建站时经常会碰到页面样式无法正常加载,这是因为没有正确加载css路径,那我们就用wamp设置本地访问路径为a.com指向本地的一个虚拟空间,如何操作呢?下面就跟随ytkah一起 ...

  6. OpenFace的一些了解

    1.OpenFace内4个样例代码 配置学习了两个 其一: Ubantu 基本命令 Docker 安装方式.发布网站方式.查看验证安装结果命令 Openface 基本demo 实现方式.和基本原理 其 ...

  7. Redis入门到高可用(一)——初识Redis

    一.Redis是什么 * 开源 * 基于键值的存储服务系统 * 支持多种数据结构 * 高性能,功能丰富 二.Redis特性 ♦️ 概述 * 速度快 * 支持持久化 * 支持多种数据结构 * 支持多种编 ...

  8. WebStrom2018注册码

    2RRJMBXW33-eyJsaWNlbnNlSWQiOiIyUlJKTUJYVzMzIiwibGljZW5zZWVOYW1lIjoi5b285bK4IHNvZnR3YXJlMiIsImFzc2lnb ...

  9. 多线程——Executor、ExecutorService、Executors三者的区别

    Executor.ExecutorService.Executors三者的区别: 层次关系: public interface ExecutorService extends Executor {} ...

  10. 高并发负载均衡——nginx与lvs

    一.企业级web项目架构 一.企业级web项目架构图 二.架构分析 客户端通过企业防火墙发送请求 在App服务器如tomcat接收客户端请求前,面对高并发大数据量访问的企业架构,会通过加入负载均衡主备 ...