计算属性(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 ...
随机推荐
- selenium+iframe 如何定位元素(实战)
场景: 在同一界面,需定位iframe里面的元素, 就需要切换至Iframe块,然后定位元素,验证完成后,再切换出来. 如果不切换至iframe ,会发现不管采取什么定位,都会报元素不存在.
- 洛谷P2303 [SDOi2012] Longge的问题 数论
看懂了题解,太妙了TT但是想解释的话可能要很多数学公式打起来太麻烦了TT所以我就先只放代码具体推演的过程我先写在纸上然后拍下来做成图片放上来算辣quq 好的那我先滚去做题了做完这题就把题解放上来.因为 ...
- MVVM软件设计模式(转)
add by zhj: MVVM是一种软件设计模式,这里要说一下设计模式,我们通常所的设计模式是指面向对象中的设计模式,用在面向对象编程语言中.但软件设计模式是更高一个级别的设计模式,两者不是同一个东 ...
- jenkins 下载和安装
jenkins 下载和安装 地址:http://jenkins.io/download/ 下载完成后,点击安装,安装完会发现电脑里多了个jenkins文件夹,打开发现 jenkins.war, 然后点 ...
- 内核ipc机制
内核版本:linux2.6.22.6 硬件平台:JZ2440 驱动源码 block_ipc_poll_key_int_drv.c : #include <linux/module.h> # ...
- SpringBoot-Jar打包方式
发布打包 Jar类型打包方式 1.使用mvn celan package 打包 2.使用java –jar 包名 war类型打包方式 1.使用mvn celan package 打包 2.使用jav ...
- iOS 允许po打印frame等内容
终端: 1. touch ~/.lldbinit 2. echo display @import UIKit >> ~/.lldbinit 3. echo target stop-hook ...
- 原生js可视加载图片、延迟加载、懒加载
<script> //既视加载//var oBtn = document.getElementsByTagName('button')[0];var aImages = document. ...
- HttpUrlConneciton上传JSON数据
try { //创建连接 URL url = new URL(url); HttpURLConnection connection = (HttpURLConnection) url.openConn ...
- LNMP安装目录及配置文件
LNMP安装目录及配置文件位置 LNMP相关软件安装目录Nginx 目录: /usr/local/nginx/MySQL 目录 : /usr/local/mysql/MySQL数据库所在目录:/usr ...