计算属性(面试)

1、计算属性简介

把computed中的方法当做属性使用,会返回一个数据供使用:

new Vue({el:"",//关联界面元素data:{},//vm的数据源methods:{},//方法   自己传参数进来filters:{qq(){}},//过滤器   computed:{xx(){}} //xx就是一个计算属性   自己去取值，不用传参数})

<div id="app"><p>{{msg}}</p><p>方法获取的年龄:{{getAge()}}</p><p>计算属性获取的年龄:{{getAge_computed}}</p><button @click="change">改变birth的值看看年龄变不变</button></div>
new Vue({el: "#app",data: {msg: "hello",birth: "1995-02-03"},methods: {getAge() {var age = new Date().getFullYear() - new Date(this.birth).getFullYear()return age + "岁"},change() {this.birth = "1996-02-03"this.xx=200   //方法中的函数可以使用下面的computed中的属性}},computed:{//计算属性第一种用法，会先去判断使用的数据源，变了没有，没有变就不会重新运行getAge_computed(){  //函数方法var age = new Date().getFullYear() - new Date(this.birth).getFullYear()return age + "岁"}//计算属性第二种用法xx:{   //属性set(oldvalue){},   //设置get(){}  //获取   只有当里面的数据改变了，才会执行get}}})

2、计算属性和方法的区别:(面试)

计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算，
提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性

methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍
方法常常是作用的事件使用,计算属性常常是动态计算结果时使用

（刷新页面：模板重新渲染、重新取值）

3、关于计算属性函数什么情况下调用

计算属性使用时当做属性使用
计算属性设计时当做函数设计(就像es6中的属性)
当计算属性的函数中使用到的data中的数据发生变化时,计算属性就会重新执行并刷新UI

1.如果是修改了data中监听的某个的属性值计算属性就会运行

2.如果是修改了data中监听的某个属性值内部的数据,计算属性就不会重新运行
比如:计算属性使用的是data中的一个数组,某个交互把数组内部的某个下标的值改了,但是这个数组没有改变,就不会触发计算属性

3.解决2的办法1:把修改后的数组重新赋值给data,让引用发生变化,来触发计算属性
3.解决2的办法2:赋值 JSON.parse(JSON.stringfy(data))

（计算属性就是处理数据源中的数据，然后用于渲染，而且会监听计算属性中使用到的数据源，然后把计算的结果，缓存

如果监听的数据源发生了变化，才会重新计算，否则直接使用缓存的数据）

缺点：如果简单的运算也用计算属性，反而会增加资源消耗（计算属性会监听计算的值，而且会缓存计算的结果），比如：生日转年龄的时候，可以用过滤器
methods:{ change(arg,index1){this.arr[index1]=argthis.arr=[...this.arr]}
}
computed:{total(){//eval(this.arr.join("+"))//  eval("100+200+88")==>把字符串当做代码运行 产生运算结果return  eval(this.arr.join("+"))}}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>     </head><body><div id="app"><h1>{{birth}}   </h1><p>methods---{{age1(birth)}}</p><p>computed---{{age}}</p><p>{{x}}</p><button @click="change1">change1--{{msg}}</button></div><script>//刷新页面==>模板重新渲染 重新取值var vm=new Vue({el:"#app",                //关联模板的选择器data:{                //数据源birth:"1996-02-03",msg:"hello"},methods:{              //方法change1(){this.msg="6666"this.birth=this.birththis.x=30},age1(str){console.log("方法")return new Date().getFullYear()- new Date(str).getFullYear()}},filters:{},               //过滤器computed:{             // 计算属性age(){console.log("计算属性")return new Date().getFullYear()- new Date(this.birth).getFullYear()},x:{get(){console.log(this,11111)return new Date().getFullYear()- new Date(this.birth).getFullYear()+"岁"},set(v){console.log(v)this.birth=`${2022-v}-02-03`}}}})</script></body>
</html>

4、案例：购物车页面计算总价

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script></head><body><style type="text/css">img {width: 30px;height: 30px;}</style><div id="app"><div v-for="(el,index) in arr" :key="el.id"><img :src="el.url">菜名：<span>{{el.title}}</span>---单价：{{el.price}}---<button @click="subbtn(index)">-</button><span>{{el.count}}</span><button @click="addbtn(index)">+</button></div><button @click="changemsg">changemsg--{{msg}}</button><button>结算({{total}})元</button></div><script>new Vue({el: "#app",methods:{changemsg(){this.msg="666"},subbtn(index){console.log(index,this.arr[index])this.arr[index].count--if(this.arr[index].count==-1){// console.log(111,index,this.arr.length)console.log(123)this.arr.splice(index,1)if(this.arr.length==0){this.arr=[]return }}// console.log(123,index,this.arr.length)Vue.set(this.arr,0,this.arr[0])},addbtn(index){this.arr[index].count++Vue.set(this.arr,0,this.arr[0])}},computed:{total(){console.log("computed计算了总价")let n=this.arr.reduce((n1,n2)=>{return n1+n2.price*n2.count},0)return n}},data: {msg:"hello",arr: [{id: 12123,title: "鱼香肉丝",price: 18,count: 2,url: "./img/3.jpg"},{id: 12124,title: "鱼香肉丝2",price: 15,count: 1,url: "./img/4.jpg"},{id: 12126,title: "鱼香肉丝3",price: 123,count: 2,url: "./img/5.jpg"},{id: 12128,title: "鱼香肉丝4",price: 15,count: 3,url: "./img/9.jpg"},{id: 12120,title: "鱼香肉丝5",price: 12,count: 5,url: "./img/10.jpg"}]}})</script></body>
</html>

Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性函数什么情况下调用、案例）相关推荐

怎样用才c语言定义一个三位数,怎样编写一个c语言程序计算任意输入一个3位数的整数的各位数字之和。要求主函数包括输入输出和调用该函数。...
点击查看怎样编写一个c语言程序计算任意输入一个3位数的整数的各位数字之和.要求主函数包括输入输出和调用该函数.具体信息答:#include void main(){ int a,sum=0; pri ...
递归——函数在内部自己调用自己，那么该函数是递归函数作用和循环效果一样要加推出条件return，否则发生栈溢出，导致死循环递归给数组中对象添加属性 toString()和随机数
递归--函数在内部自己调用自己,那么该函数是递归函数 & 作用和循环效果一样 & 要加推出条件return,否则发生栈溢出,导致死循环 & 递归给数组中对象添加属性 & ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
计算属性|| 计算属性与方法的区别：计算属性是基于它们的依赖进行缓存的；方法不存在缓存||侦听器
计算属性 1. 为何需要计算属性? 表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁 2. 计算属性的用法 <!DOCTYPE html> <html lang=& ...
【Android 属性动画】属性动画 Property Animation 工作原理 ( 线性插值动画 | 非线性插值动画 | 动画计算 | 经过分数 | 插值分数 | 类型估值器)
文章目录一.线性插值动画示例二.非线性插值动画示例三.动画计算方式四.时间经过分数 ( Elapsed Fraction ) 五.插值分数 ( Interpolated Fraction ) ...
创建一个Rectangle类。添加两个属性width、height，分别表示宽度和高度，添加计算矩形的周长和面积的方法。测试输出一个矩形的周长和面积。
[Java]创建一个Rectangle类添加两个属性width.height,分别表示宽度和高度,添加计算矩形的周长和面积的方法.测试输出一个矩形的周长和面积. /*作者:龙蝶 *日期:2020年4 ...
#十二、编写三角形类Triangle，初始化三个属性，分别是三条边的长度，定义一个计算并打印周长的函数 #十三、编写等腰三角形类EWtriangle，继承于三角形类，初始化只用传一个腰长和一个底长，定
#十二.编写三角形类Triangle,初始化三个属性,分别是三条边的长度,定义一个计算并打印周长的函数 #十三.编写等腰三角形类EWtriangle,继承于三角形类,初始化只用传一个腰长和一个底长,定 ...
C#某公司有各类员工，定义一个员工类（Employee），该类具有员工的姓名（Name）和基本薪金（Salary）等属性；并有一个虚方法（CalSalary）用于计算并输出员工的总薪金。
.某公司有各类员工,定义一个员工类(Employee),该类具有员工的姓名(Name)和基本薪金(Salary)等属性:并有一个虚方法(CalSalary)用于计算并输出员工的总薪金. 对不同的员工, ...
定义并实现一个三角形类（Triangle），其三个边长（edge1, edge2, edge3）为其属性，包含判断其是否为三角形（isTriangle）、计算周长（calPerimeter）及计算面积
package monster.zf.Test; /*** 定义并实现一个三角形类(Triangle),其三个边长(edge1, edge2, edge3)* 为其属性,包含判断其是否为三角形(isT ...

Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性函数什么情况下调用、案例）

计算属性(面试)

1、计算属性简介

2、计算属性和方法的区别:(面试)

3、关于计算属性函数什么情况下调用

4、案例：购物车页面计算总价

Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性函数什么情况下调用、案例）相关推荐

最新文章

热门文章

Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性 函数什么情况下调用、案例）

计算属性(面试)

1、计算属性简介

2、计算属性和方法的区别:(面试)

3、关于计算属性 函数什么情况下调用

4、案例：购物车页面计算总价

Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性 函数什么情况下调用、案例）相关推荐

最新文章

热门文章

Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性函数什么情况下调用、案例）

3、关于计算属性函数什么情况下调用

Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性函数什么情况下调用、案例）相关推荐