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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
vue组件的写法汇总
Apr 12 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
vue实现户籍管理系统
May 29 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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,ajax实现分页
2008/03/27 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
Yii框架安装简明教程
2020/05/15 PHP
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
javascript基础知识讲解
2017/01/11 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中文编码那些事
2014/06/25 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python爬虫文件下载图文教程
2018/12/23 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
python几种常用功能实现代码实例
2019/12/25 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
促销活动总结范文
2014/04/30 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
百万英镑观后感
2015/06/09 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
python库sklearn常用操作
2021/08/23 Python