Computed属性实现本质

computed实际上是利用getter属性建立了计算属性与原属性之间的绑定关系,所以是没有任何副作用的。能通过computed解决的问题应该优先使用computed。 
计算属性默认只有getter,不过在需要的时候也可以提供一个setter:

// ...
computed: {fullName: {// getterget: function () {return this.firstName + ' ' + this.lastName},// setterset: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}
}
// ...

计算属性VS方法

  1. 计算属性会缓存结果,只要原属性不发生改变,计算属性就不会重新计算;
  2. 但是每当出发重新渲染之后使用‘方法‘都会重新计算,无论原属性是否发生变化。
  3. 如果不需要缓存则使用方法,方法还有一个好处是可以传参,可以把方法执行过程中的临时变量的值传进方法体进行计算,而计算属性做不到,因为他的实现是通过getter属性而非一个方法。
<ul v-for='item in obj'><li>{{addHandle(item)}}</li>
</ul>

methods: {addHandle(item) {return item++}
}

方法更加灵活的实现了对v-for中的item进行处理。

计算属性VS侦听属性

var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}}
})

var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName}}
})

计算属性和监听属性的区别,监听属性一次只能监听一个属性,无法一次对多个属性的变化做出响应,而计算属性可以做到。

侦听器的使用场景

watch用于处理较为复杂的场景,当需要在数据变化的时候进行异步或者开销比较大的操作的时候,这个方法是最有用的。

<div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p>
</div>

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',answer: 'I cannot give you an answer until you ask a question!'},watch: {// 如果 `question` 发生改变,这个函数就会运行question: function (newQuestion) {this.answer = 'Waiting for you to stop typing...'this.getAnswer()}},methods: {// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。// 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,// 请参考:https://lodash.com/docs#debounce
    getAnswer: _.debounce(function () {if (this.question.indexOf('?') === -1) {this.answer = 'Questions usually contain a question mark. ;-)'return}this.answer = 'Thinking...'var vm = thisaxios.get('https://yesno.wtf/api').then(function (response) {vm.answer = _.capitalize(response.data.answer)}).catch(function (error) {vm.answer = 'Error! Could not reach the API. ' + error})},// 这是我们为判定用户停止输入等待的毫秒数500)}
})
</script>

转载于:https://www.cnblogs.com/catbrother/p/9400963.html

Vue中computed,methods,watch用法上的异同相关推荐

  1. vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别

    思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想 在Vue的 ...

  2. 「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、 可用于更新数据到视图

    夜晚有明月,梦里有佳人 前言 最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...

  3. Vue中computed分析

    Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...

  4. vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分

    vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...

  5. 详解Vue中watch的高级用法

    转载自  详解Vue中watch的高级用法 我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...

  6. 在Vue中自制视频播放器(上)

    在Vue中自制视频播放器(上) 前言 初始化组件 开始/暂停按钮 停止按钮 静音按钮 视频播放时间 全屏按钮 源代码 前言 平时大家在浏览视频网站时,会发现各大视频网站都有自己的视频控制组件,虽然浏览 ...

  7. 深究vue中computed顺序、watch顺序、响应次数

    文章目录 前言 深究步骤 1.代码 2.输出结果 3.分析过程 总结 前言 深究vue中computed顺序.watch顺序.响应次数 深究步骤 1.代码 <template><di ...

  8. vue中computed的详细讲解

    vue中computed的详细讲解 1.定义 2.用法 3.computed的响应式依赖(缓存) 4.应用场景 1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相 ...

  9. vue中解决时间在ios上显示NAN的问题

    vue中解决时间在ios上显示NAN的问题 参考文章: (1)vue中解决时间在ios上显示NAN的问题 (2)https://www.cnblogs.com/wzs5800/p/9580785.ht ...

  10. vue中如何点击返回上一页,vue判断没有上页返回首页

    vue中如何点击返回上一页,vue判断没有上页返回首页 vue中返回上一页 // 返回 returnBtn(){this.$router.go(-1); }, 返回上一页,先判断是否有上一页,没有则返 ...

最新文章

  1. Atomic Integer 原理分析-getAndIncrement
  2. 如果计算机用户有密码 待机,电脑待机密码怎么设置
  3. USACO / Factorials (简单模拟)
  4. J2ME程序员容易遇到的问题!不断更新中_2008.05.17
  5. 楷书和草书哪幅更具有艺术性?
  6. 【初学者必读】—PowerShell 基础详解及设置
  7. ipad文件管理怎么添加服务器,ipad怎样建文件夹
  8. Shell脚本 小程序演示
  9. java VM option
  10. arcgis加载经纬度信息并导入91地图
  11. java抖音字符视频_代码生成抖音文字视频
  12. linux沙箱隔离_360隔离沙箱在WINDOWS 10 的WSL下的沙箱逃逸
  13. 维特比译码算法(Viterbi decoding algorithm)
  14. 个人微信开发协议sdk接口API分享
  15. android 阿拉伯语下的光标,android – 在EditText中的游标提示不是从右边开始的阿拉伯语...
  16. SIMD 单指令,多数据
  17. 机器人快跑!伯克利和CMU联合开发两足机器人,两条细腿,一马平川
  18. 用Annchain,加分
  19. Unity射线检测的用法总结
  20. 北京大学08级计算机本科,从学分绩点1.08到成功逆袭北大,8000多张草稿纸诉说着他的燕园梦!...

热门文章

  1. 让《强化学习(第2版)》架起一座通往强化学习经典知识宝库的桥梁
  2. Linux学习笔记(一):Win10上用VMware虚拟机安装Linux-CentOS
  3. 深度学习:词嵌入Embedding
  4. win7 下安装python用的dlib库
  5. 力扣-5 最长回文子串
  6. 力扣-509 裴波那契数
  7. Linux的Sysfs文件系统简要说明
  8. python的shelve库
  9. Codeforces Round #568 (Div. 2)网卡垫底记
  10. (转)收集 Spring Boot 相关的学习资料,Spring Cloud点这里 重点推荐:Spring Boot 中文索引...