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中watch、computed、updated三者的区别以及使用方法相关推荐
- 面试题: Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
- Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
- Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法 父子组件之间的通信方法 父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
- Vue中的computed属性
1.前言 本篇是Vue中最常用到的API之一computed属性,转载信息如下: 作者:gunelark 链接:https://www.cnblogs.com/gunelark/p/8492468.h ...
- Vue中的computed是什么?怎么用?
提示:前端查漏补缺,仅代表个人观点,不接受任何批评 文章目录 一.computed是什么? 二.使用注意事项 1.计算属性的结果会被缓存 2.computed和method的区别 总结 1. 使用场景 ...
- Vue中的computed 和 watch
computed 和 watch Vue2 options文档 响应式原理options.data 1.data会被Vue监听 2.会被Vue实例代理,vm就是data的代理 3.每次对data的读写 ...
- 面试官:Vue中组件和插件有什么区别?
一.组件是什么 回顾一下对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件 组件的优势 降低整个系统的耦合度 ...
- Vue中的computed计算属性
文章目录 computed与watch的异同 不同点 相同点 示例 源码 结果 分析 computed与watch的异同 不同点 触发条件不同 computed计算属性会依赖于使用它的data属性 ...
- vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
最新文章
- YOLOv5在建筑工地中安全帽佩戴检测的应用
- win mysql 最大连接_常用的三种修改mysql最大连接数的方法
- 干货:MySQL 索引原理及慢查询优化
- 懂程序员的产品经理是什么样子?
- python模块(4)-Collections
- 打造×××互连无极限,多WAN口×××防火墙
- 虚拟机以前能上网,突然上不了网
- powershell / ps脚本ps1中.exe(可执行文件)没反应
- 编程语言 - 脚本编程 - JavaScript/Jquery/Ajax/XML/JSON/ActionScript3
- Android 自定义View关于measure流程的基本思路整理
- Access2010中文版入门与实例教程(奋斗的小鸟)_PDF 电子书
- Cisco 防火墙 ASA DHCP 配置
- 命令执行专题总结突破
- C++编程 杨辉三角
- JavaScript设置显示video第一帧
- 通过人工智能实现内容智能审核及在世界杯的实战
- StellarWP 收购 LearnDash 学习管理系统
- stlink-opencd-gdb调试程序
- 和别人发生矛盾怎么办?一个故事醒悟
- mysql命令大全(订正版)