Vue中watch、computed、updated三者的区别及用法
1、watch
理解: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作
1、监听值类型(简单类型)数据
//在一个vue实例中 new Vue({ el:"#myApp", data:{ num1:1, num2:2 }, methods:{}, watch:{ //这里两个属性,第一个值是变化后最新的值,第二个是变化前 num1(after,before){ this.num2 = after +1 } immediate:true //页面首次加载的时候做一次监听。 //这里的意思就是,监听num1的变化,当num1的数据发生变化的时候,来操作num2的值 } })
2、监听引用(复杂)类型的数据
new Vue({ el:"#myApp", data:{ obj:{ userName:"caicai" } }, watch:{ obj:{ handler(newValue,oldValue){ // handler函数是当你的obj发生变化的时候你要做什么 console.log(newValue.userName,oldValue.userName); }, deep:true //是否深度侦听,true开启,false关闭,默认false //加了deep之后相当于在对象obj每一层的属性都加上了handler侦听器。否则的话侦听到的只是引用地址,不会执行handler函数 } } });
2、computed
理解: 计算属性,顾名思义就是通过某个属性(数据)来计算得到某个属性,这个重点在于计算,我们希望的是拿到data数据后处理一下,得到计算的结果。
在原vue中的template模板,作者初衷只是进行一些简单的运算,那么比较复杂的计算就可用computed来进行操作
<div id="myApp"> <input type="text" v-model="str"> 1、第一种操作,写在模板里,导致模板过重,难于维护 <p>{{str.split("").reverse().join("")}}</p> 2、第二种,使用一个方法来调用,若多处使用,就执行多次,降低运行速度,性能减少 <p>{{fn(str)}}</p> 3、第三种,使用过滤器,具有缓存,只要str不发生变化,就不会再次进行运算 <p>{{reverseStr}}</p> </div> <script type="text/javascript"> new Vue({ el:"#myApp", data:{ str:"abcd" }, methods:{ fn(v){ //若多出调用,就执行多次 return v.split("").reverse().join("")//炸开--反转--组合 } }, computed:{ reverseStr(){ //str不发生变化的话,我只执行一次,具有缓存 return this.str.split("").reverse().join("") } } }) </script>
到这里我先略微总结一下这两者的区别,以及使用场景
computed:
1、监控自己定义的变量,不用再data里面声明,函数名就是变量名
2、适合多个变量或对象进行处理后返回一个值(结果)。若这多个变量发生只要有一个发生变化,结果都会变化。
3、计算的结果具有缓存,依赖响应式属性变化,响应式属性没有变化,直接从缓存中读取结果。
4、在内部函数调用的时候不用加()。
5、必须用return返回
6、不要在computed 中对data中的数据进行赋值操作,这会形成一个死循环。
watch:
1、watch 函数是不需要调用的。
2、重点在于监控,监控数据发生变化的时候,执行回调函数操作。
3、当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch
4、函数名就是你要监听的数据名字
使用场景:
computed:
1、一个需要的结果受多个数据影响的时候,比如购物车结算金额(受到很多处的价格结算)。
2、操作某个属性,执行一些复杂的逻辑,并在多处使用这个结果。
3、内部函数中多处要使用到这个结果的。
watch :
1、监控一些input框值的特殊处理,适合一个数据影响多个数据。
2、数据变化时,执行一些异步操作,或开销比较大的操作
3、updated
理解: 是vue生命周期里面的一个钩子函数—data数据更新后触发视图更新。这里是视图更新之后的操作可以在这里执行。
触发条件:
1、当data中定义的数据有变化时就会加载updated方法。
2、任何数据的更新,如果要做统一的业务逻辑处理
3、在大多数情况下,此期间避免更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
特点:
1.执行到它的时候时候是数据发生变化且界面更新完毕
2.不能监听到路由数据(例如网址中的参数)
3.所有的数据发生变化都会调用(消耗性能)
4.只要数据发生变化,每次触发的代码都是同一个
补充知识:vue中渲染数据可能有一个无限更新循环--You may have an infinite update loop in a component render function.
今天在在工作中碰到个问题,在此记录下。
今天在接接口数据时发现数据搞反了,于是想着把数据倒叙一下
<row-list v-if="dataList.rules" :canSelect="!isClose" :dataList="dataList.rules[0].subLotteryRule[0].subLotteryRule.reverse()" @selectRow="selectRow"></row-list>
结果报了个错
找了好久发现问题就在于reverse()这个方法
vue的响应式原理中对于数组的更新检测包含了一组观察数组的编译方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
而我在呈现的数据中调用了reverse()这个方法,这样就会导致无限的更新循环。
解决办法也很简单,可以在vue实例的数据对象赋值之前调用reverse()就可以了
以上这篇Vue中watch、computed、updated三者的区别及用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了.NET/C# 使用Stopwatch测量运行时间,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23
- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01