Vue中watch、computed、updated三者的区别及用法


Posted in Javascript onJuly 27, 2020

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三者的区别及用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
Element Backtop回到顶部的具体使用
Jul 27 #Javascript
解决vue中的无限循环问题
Jul 27 #Javascript
Element MessageBox弹框的具体使用
Jul 27 #Javascript
Vue 组件复用多次自定义参数操作
Jul 27 #Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 #Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 #Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 #Javascript
You might like
php设计模式之命令模式的应用详解
2013/05/21 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
jquery中的过滤操作详细解析
2013/12/02 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python实现的质因式分解算法示例
2018/05/03 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
对Python中plt的画图函数详解
2018/11/07 Python
python生成随机红包的实例写法
2019/09/02 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
广州一家公司的.NET面试题
2016/06/11 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
税务专业毕业生自荐信
2013/11/10 职场文书
美术专业个人自我评价
2014/01/18 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python