计算属性(computed)、方法(methods)和侦听属性(watch)的区别与使用场景
1,computed 能实现的,methods 肯定也能够实现。
2,不同之处在于,computed 是基于他的依赖进行缓存的,computed 只有在他的的相关依赖发生改变的时候才会重新计算。
如果他的相关依赖并没有发生改变,每次访问都是返回他的缓存的值。
methods,则是每次触发重新渲染之后,调用方法会再次执行函数。
总结:当我们不希望有缓存的时候,就使用methods
3,computed 和 watch 的相同和不同之处
相同点:computed 和 watch 都是以vue的依赖追踪为基础的,都是希望当依赖发生改变的时候,被依赖的数据根据预定好的函数发生改变。
不同点:watch 监听,一般是监听一个数据,从而影响多个数据
computed 计算属性, 一般是计算一个属性,这个属性受多个数据影响
总结:一般使用computed,但是如果需要异步,或者数据开销太大的情况下,使用watch.
计算属性(computed)、方法(methods)和侦听属性(watch)的区别与使用场景的更多相关文章
- [vue]计算和侦听属性(computed&watch)
先看一下计算属性 vue只有data区的数据才具备响应式的功能. 计算和侦听属性 - v-text里可以写一些逻辑 <div id="example"> {{ mess ...
- 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...
- vue计算属性VS侦听属性
原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- VUE 计算属性 vs 侦听属性
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...
- 浅谈vue中的计算属性和侦听属性
计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
- 六、vue侦听属性
$watch 实际上无论是 $watch 方法还是 watch 选项,他们的实现都是基于 Watcher 的封装.首先我们来看一下 $watch 方法,它定义在 src/core/instance/s ...
- Vue 侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性 <!DOCTYPE html> <html> <head> <meta cha ...
- vue计算属性computed和methods的区别
computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...
随机推荐
- Dubbo服务化框架使用整理
一.垂直应用架构拆分 在应用架构的演进过程中,垂直应用架构因为开发便捷,学习成本低,对于实现业务功能的增删改查提供了高效的开发支持,有利于前期业务高速发展的的快速实现.但是随着系统业务功能的不断扩展和 ...
- 数据库使用:sql server/mysql/sqlite
本科学过sql server数据库,上研刚开始在做研究时自己想点子自己做,为了简便使用了论文中看到的一个简易数据库sqlite存储使用数据.后来随着数据量的增长,以及数据处理的需求sqlite速度明显 ...
- es6学习一 promise上
简单来说promise在异步操作上提供可读性.(原来es5的异步操作可读性实在太糟糕了,如下图) 瞬间眼前百万只奔腾的马,只不过这种马有个别名,羊驼. 一.创建形式 1. 使用的基本形式: let p ...
- python中的一些用法总结
用python写了一个测试Demo,其中涉及到一些常用的用法,现在记录在这里,方便后续查阅: 1 python中全局变量的使用: 引用全局变量,不需要golbal声明,修改全局变量,需要使用globa ...
- Windows系统重装工具 WinToHDD Enterprise v2.8 企业破解版
WinToHDD 是一款实用的 Windows 系统硬盘安装工具,有点类似于NT6 HDD Installer,它能不依靠光驱和U盘,让你直接通过本机硬盘来新装.重装和克隆 Windows 系统,支持 ...
- RN-系列
8081端口被占用,McAfee Agent关不掉 sudo lsof -n -i4TCP:8081 sudo launchctl list | grep 5693 sudo launchctl re ...
- spring boot 启动类一定要放置到包的根目录下,也就是和所有包含java文件的包在同一级目录。如果不放置在根目录下,将会提示 no mybatis mapper was found
spring boot 启动类一定要放置到包的根目录下,也就是和所有包含java文件的包在同一级目录.将会将同一目录下的包扫描成bean. 如果不放置在根目录下,将会提示 no mybatis map ...
- lua加载函数require和dofile
lua加载函数require和dofile Lua提供高级的require函数来加载运行库.粗略的说require和dofile完成同样的功能但有两点不同: 1. require会搜索目录加载文件; ...
- Mongodb 基础 复制集原理和搭建
数据复制原理 开启复制集后,主节点会在local库下生成一个集合叫 oplog.rs,这是一个有限的集合,即大小固定.这个集合记入了整个mongod实例一段时间内数据库的所有变更操作(如:增/删/改) ...
- JS 8-1 OOP概念与继承
function Foo(){ this.y=2; } typeof Foo.prototype; Foo.prototype.x = 1; var obj3= new Foo(); obj3.x; ...