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 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
js实现div色块拖动录制
Jan 16 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
php 启动报错如何解决
2014/01/17 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
初识PHP中的Swoole
2016/04/05 PHP
cakephp常见知识点汇总
2017/02/24 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
webpack分离css单独打包的方法
2018/06/12 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
运动会广播稿150字
2014/02/19 职场文书
小学教师读书活动总结
2014/07/08 职场文书
服务行业演讲稿
2014/09/02 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
个人年终总结开头
2015/03/06 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers