vue计算属性与监听器的区别

计算属性（computed）	监听器（watch）
监听data中没有的值	监听data中有的值
使用时触发	使用不会触发
值有变化就触发	值有变化就触发
没有settter，要手动实现	可以获取新的和旧的值
会缓存计算结果，重新使用不会触发该方法

计算属性 eg:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="libs/vue.js"></script></head><body><div id="app"><input type="text" v-model="n1" />+<input type="text" v-model="n2" /><input type="text" v-model="sum" /><button type="button" @click="getSum">{{msg}}</button></div><script>const app = new Vue({el: '#app',data: {n1: 1,n2: 2,msg:"使用缓存的sum"},methods:{getSum(){this.msg=this.sum;}},computed: {sum: {set: function() {console.log('触发了计算属性的set')},get: function() {console.log('触发了计算属性的get')return Number(this.n1) + Number(this.n2);}}}})</script></body>
</html>

监听器 eg:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="libs/vue.js"></script></head><body><div id="app"><input type="text" v-model="sum" /><button type="button" @click="add">sum++</button></div><script>const app = new Vue({el: '#app',data: {sum: 0},methods:{add(){this.sum=parseInt(this.sum)+1;}},watch: {sum: function(newVal, oldVal) {console.log('触发了监听器方法,',oldVal,' -> ',newVal);}}})</script></body>
</html>

vue计算属性与监听器的区别相关推荐

vue 计算属性和监听器区别
上海疫情还没过去,裁员的噩耗又来了,,,快卷不动了!最近火急火燎的搞面试,趁复习面试题,总结一下.关于计算属性和监听器vue官方文档写的很简单,博客上也大相径庭.(我也只记的大概,哈哈)懒得查来查去所 ...
vue计算属性和监听器区别
区别计算属性可以简化差值表达式写法计算属性变量定义在computed中,可以直接使用在{}中的,跟methods中函数类似,只不过有利于缓存,性能更好计算属性可以防止监听属性的滥用,但一些异步请 ...
Vue计算属性和函数的区别
1.计算属性有缓存,有且仅有计算属性内部的属性值发生变化时才会被调用: 函数没有缓存,每次执行都会被调用. 2.计算属性默认只有get函数,没有set只支持单向,若想使用双向可进行手动添加: 函数只有 ...
vue计算属性和方法的区别
1.methods方法: 控制台打印: 当修改其中一个属性时,其他属性的值都没改变,但会发现methods里的方法都被执行 2.computed计算属性控制台打印: 会发现当修改其中一个值的时候, ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
vue计算属性computed和侦听属性watch的用法和区别
计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用.注意:计算属性里面必须要ruturn,否则无法拿到结果.计算属性 ...
Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性函数什么情况下调用、案例）
目录计算属性(面试) 1.计算属性简介 2.计算属性和方法的区别:(面试) 3.关于计算属性函数什么情况下调用 4.案例:购物车页面计算总价计算属性(面试) 1.计算属性简介把c ...
计算属性|| 计算属性与方法的区别：计算属性是基于它们的依赖进行缓存的；方法不存在缓存||侦听器
计算属性 1. 为何需要计算属性? 表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁 2. 计算属性的用法 <!DOCTYPE html> <html lang=& ...
vue 计算属性和data_Vue:计算属性
一.为什么要使用计算属性 1.什么是计算属性计算属性:可以理解为能够在里面写一些计算逻辑的属性.具有如下的作用: 减少模板中的计算逻辑. 数据缓存.当我们的数据没有变化的时候,不会再次执行计算的过程 ...

vue计算属性与监听器的区别

vue计算属性与监听器的区别

vue计算属性与监听器的区别相关推荐

最新文章

热门文章