Vue中computed,methods,watch用法上的异同
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方法
- 计算属性会缓存结果,只要原属性不发生改变,计算属性就不会重新计算;
- 但是每当出发重新渲染之后使用‘方法‘都会重新计算,无论原属性是否发生变化。
- 如果不需要缓存则使用方法,方法还有一个好处是可以传参,可以把方法执行过程中的临时变量的值传进方法体进行计算,而计算属性做不到,因为他的实现是通过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用法上的异同相关推荐
- vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想 在Vue的 ...
- 「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、 可用于更新数据到视图
夜晚有明月,梦里有佳人 前言 最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...
- Vue中computed分析
Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
- vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
- 详解Vue中watch的高级用法
转载自 详解Vue中watch的高级用法 我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...
- 在Vue中自制视频播放器(上)
在Vue中自制视频播放器(上) 前言 初始化组件 开始/暂停按钮 停止按钮 静音按钮 视频播放时间 全屏按钮 源代码 前言 平时大家在浏览视频网站时,会发现各大视频网站都有自己的视频控制组件,虽然浏览 ...
- 深究vue中computed顺序、watch顺序、响应次数
文章目录 前言 深究步骤 1.代码 2.输出结果 3.分析过程 总结 前言 深究vue中computed顺序.watch顺序.响应次数 深究步骤 1.代码 <template><di ...
- vue中computed的详细讲解
vue中computed的详细讲解 1.定义 2.用法 3.computed的响应式依赖(缓存) 4.应用场景 1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相 ...
- vue中解决时间在ios上显示NAN的问题
vue中解决时间在ios上显示NAN的问题 参考文章: (1)vue中解决时间在ios上显示NAN的问题 (2)https://www.cnblogs.com/wzs5800/p/9580785.ht ...
- vue中如何点击返回上一页,vue判断没有上页返回首页
vue中如何点击返回上一页,vue判断没有上页返回首页 vue中返回上一页 // 返回 returnBtn(){this.$router.go(-1); }, 返回上一页,先判断是否有上一页,没有则返 ...
最新文章
- Atomic Integer 原理分析-getAndIncrement
- 如果计算机用户有密码 待机,电脑待机密码怎么设置
- USACO / Factorials (简单模拟)
- J2ME程序员容易遇到的问题!不断更新中_2008.05.17
- 楷书和草书哪幅更具有艺术性?
- 【初学者必读】—PowerShell 基础详解及设置
- ipad文件管理怎么添加服务器,ipad怎样建文件夹
- Shell脚本 小程序演示
- java VM option
- arcgis加载经纬度信息并导入91地图
- java抖音字符视频_代码生成抖音文字视频
- linux沙箱隔离_360隔离沙箱在WINDOWS 10 的WSL下的沙箱逃逸
- 维特比译码算法(Viterbi decoding algorithm)
- 个人微信开发协议sdk接口API分享
- android 阿拉伯语下的光标,android – 在EditText中的游标提示不是从右边开始的阿拉伯语...
- SIMD 单指令,多数据
- 机器人快跑!伯克利和CMU联合开发两足机器人,两条细腿,一马平川
- 用Annchain,加分
- Unity射线检测的用法总结
- 北京大学08级计算机本科,从学分绩点1.08到成功逆袭北大,8000多张草稿纸诉说着他的燕园梦!...
热门文章
- 让《强化学习(第2版)》架起一座通往强化学习经典知识宝库的桥梁
- Linux学习笔记(一):Win10上用VMware虚拟机安装Linux-CentOS
- 深度学习:词嵌入Embedding
- win7 下安装python用的dlib库
- 力扣-5 最长回文子串
- 力扣-509 裴波那契数
- Linux的Sysfs文件系统简要说明
- python的shelve库
- Codeforces Round #568 (Div. 2)网卡垫底记
- (转)收集 Spring Boot 相关的学习资料,Spring Cloud点这里 重点推荐:Spring Boot 中文索引...