计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
https://cn.vuejs.org/v2/guide/computed.html#基础例子
计算属性 vs 侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch
——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch
回调。细想一下这个例子:
<div id="demo">{{ fullName }}</div> |
var vm = new Vue({ |
上面代码是命令式且重复的。将它与计算属性的版本进行比较:
var vm = new Vue({ |
好得多了,不是吗?
侦听器
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch
选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
例如:
<div id="watch-example"> |
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 --> |
结果:
Ask a yes/no question:
Error! Could not reach the API. Error: timeout of 0ms exceeded
在这个示例中,使用 watch
选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
除了 watch
选项之外,您还可以使用命令式的 vm.$watch API。
计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的的更多相关文章
- vue计算属性VS侦听属性
原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...
- VUE 计算属性 vs 侦听属性
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...
- 浅谈vue中的计算属性和侦听属性
计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- Vue-计算属性和侦听属性
复杂逻辑应使用计算属性而不应写在插值表达式{{ }}里 <div id="app"> 原值:{{ msg }} <br> 翻转后的值:{{ reverseM ...
- [Web 前端] 034 计算属性,侦听属性
目录 0. 方便起见,定个轮廓 1. 过滤器 2. 计算属性 2.1 2.2 3. 监听属性 0. 方便起见,定个轮廓 不妨记下方的程序为 code1 <!DOCTYPE html> &l ...
- vue中计算属性和侦听属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VueJs(7)---计算属性和侦听器
计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
随机推荐
- 用箭头函数精简Vue 模块
https://www.zcfy.cc/article/clean-up-your-vue-modules-with-es6-arrow-functions-dotdev 使用箭头函数,this指向v ...
- Linux信号(signal) 机制分析(转)
[摘要]本文分析了Linux内核对于信号的实现机制和应用层的相关处理.首先介绍了软中断信号的本质及信号的两种不同分类方法尤其是不可靠信号的原理.接着分析了内核对于信号的处理流程包括信号的触发/注册/执 ...
- JavaScript | 基础(变量/引用/转换/函数)
———————————————————————————————————————————— 变量 全局变量:在函数体外声明,全局可以使用 局部变量:通过关键字var来声明 变量类型 <script ...
- bootstrap资料链接
别人的博客,写的还不错 http://www.cnblogs.com/hnnydxgjj/category/879277.html
- 自定义通用dialogFragment
代码地址如下:http://www.demodashi.com/demo/12844.html 前言 之前写过一篇dialogFragmnet封装默认dialog的文章 DialogFragment创 ...
- AIDL调用指南
近期有需求要实现两个apk之间的通信,想到用AIDL来实现,现写一个demo学习下AIDL怎样使用. 这里我要实现一个apk(client端)调用还有一个apk(server端)的方法. 先实现ser ...
- java类反射
http://www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html
- Eclipse下Java Build Path下Libraies中添加 Maven dependencies 失败解决方案
当maven 仓库有jar时,tomcat生成时总是报javaclassno..........无这个文件:用一下方法 转载:http://bugyun.iteye.com/blog/2311848 ...
- Android内存优化大全(中)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 写在最前: 本文的思路主要借鉴了2014年AnDevCon开发者大会的一个演讲PPT,加上 ...
- ST股福音:涨停潮开始! 最全ST摘帽股汇总!
本周ST股摘帽行情提前预演,ST股上演涨停潮,部分ST股甚至出现连续涨停.云财经在三季报披露之前曾经做过一期ST股摘帽分析,在三季报正式披 露完毕后,以及部分ST公司公布了2015年年报预告,ST股能 ...