怎么做门户网站设计wordpress清理修订

当前位置： 首页 > news >正文

怎么做门户网站设计,wordpress清理修订,装饰工程验收规范最新版,衡阳建设网站公司目录 前言 computed计算属性 什么是计算属性#xff1f; Vue的原有属性是什么#xff1f; 得到的全新的属性是什么#xff1f; 计算属性怎么用#xff1f; 计算属性的作用是什么#xff1f; 为什么说代码执行率高了#xff1f; computed计算属性中的this指向 co…目录 前言 computed计算属性 什么是计算属性 Vue的原有属性是什么 得到的全新的属性是什么 计算属性怎么用 计算属性的作用是什么 为什么说代码执行率高了 computed计算属性中的this指向 computed计算属性简写 watch侦听属性 语法格式 watch侦听属性中的this指向 watch深度监视 watch的简写 watch和computed如何选择 异步情况下 computed watch watch中异步中箭头函数和普通函数this指向 前言 继上篇文章介绍了Vue配置项中的methods本文继续介绍Vue配置项中的computed计算属性和watch侦听属性以及在使用如何选择 computed计算属性 什么是计算属性 使用Vue的原有属性经过一系列的计算最终得到了一个全新的属性叫做计算属性。 Vue的原有属性是什么 data对象当中的属性可以叫做Vue的原有属性。 得到的全新的属性是什么 表示生成了一个新的属性和data中的属性无关了新的属性也有自己的属性名和属性值。 计算属性怎么用 语法格式需要一个新的配置项 computed computed:{         计算属性1{                 get(){                         当读取计算属性1时getter方法被自动调用                 }                 set(){                         当修改计算属性1时setter方法被自动调用                 }         }         计算属性2{} } 计算属性的作用是什么 代码得到了复用代码变得更加容易维护代码的执行效率高了 为什么说代码执行率高了 其实在methods中也可以调用函数方法来完成computed计算属性能完成的事那为什么会引入computed计算属性呢 举例 div classapph1{{msg}}/h1input typetext v-modelinfo{{hh()}}{{hh()}}{{hh()}}{{hh()}}{{hh()}}{{xx}}{{xx}}{{xx}}{{xx}}{{xx}}/divscriptconst vm new Vue({el:.app,data:{ msg:computed计算属性,info:},methods:{hh(){console.log(methods方法执行了);return hh}},computed:{xx:{get(){console.log(计算属性执行了);return xx}}}})/script 执行此代码methods中的函数方法以及computed中的计算属性各调用5次 由结果看出methods中的方法重复执行了5次而computed计算属性只执行了一次。 这是因为computed计算属性遵循一个缓存机制将重复存入浏览器中使用时直接拿出来即可这样代码的执行效率就变高了 computed计算属性中的this指向 methods中的this是指向vue实例的,那computed计算属性中的this是指向什么呢 div classapph1{{msg}}/h1input typetext v-modelinfo{{reverse}}/divscriptconst vm new Vue({el:.app,data:{ msg:computed计算属性,info:},computed:{reverse:{get(){console.log(this);}}}})/script 可知,computed计算属性中的this是指向Vue实例对象的 computed计算属性简写 当不使用set()方法时仅使用get()方法时可以使用简写 例反转字符串 div classapph1{{msg}}/h1input typetext v-modelinfo字符串反转后 {{reverse}}/divscriptconst vm new Vue({el:.app,data:{ msg:computed计算属性,info:},computed:{reverse(){return this.info.split().reverse().join()}}})/script 直接省略get将换成后接{}即可简写和完整写法对比 // 简写reverse(){return this.info.split().reverse().join()},// 完整写法reverse:{get(){return this.info.split().reverse().join()}} 注意简写后和methods中的函数方法写法相同但这不是函数方法这是计算属性 watch侦听属性 侦听属性变化 语法格式 watch:{//可以监视多个属性//监视哪个属性直接写属性名字即可//可以监视Vue的原有属性也可以监视计算属性num:{//固定写法方法名必须叫handler//当被监视的属性发生变化时,handler就会自动调用一次//handler方法有两个参数前一个参数代表属性值改变后的新值后一个参数代表属性值改变之前的旧值handler(newValue,oldValue){console.log(newValue,oldValue);}}} watch侦听属性中的this指向 watch:{//可以监视多个属性//监视哪个属性直接写属性名字即可//可以监视Vue的原有属性也可以监视计算属性num:{//固定写法方法名必须叫handler//当被监视的属性发生变化时,handler就会自动调用一次//handler方法有两个参数前一个参数代表属性值改变后的新值后一个参数代表属性值改变之前的旧值handler(newValue,oldValue){console.log(this vm);}}} 由此可知watch中的this也是指向vue实例对象的 watch深度监视 如何侦听对象呢 例侦听a对象里面的b div classapph1{{msg}}/h1input typetext v-modela.b/divscriptconst vm new Vue({el:.app,data:{msg:watch侦听属性,a:{b:0}},watch:{//可以监视多个属性//监视哪个属性直接写属性名字即可//可以监视Vue的原有属性也可以监视计算属性a.b:{//固定写法方法名必须叫handler//当被监视的属性发生变化时,handler就会自动调用一次//handler方法有两个参数前一个参数代表属性值改变后的新值后一个参数代表属性值改变之前的旧值handler(newValue,oldValue){alert(111)}}}})/script 侦听这种嵌套的需要加上 ,原本就是有的只是省略了当侦听这种嵌套关系时需要加上 . 如果更深层次的嵌套是否需要一直“…”下去呢 不需要vue给我提供了deep属性 deep:true(默认是false),当deep:true时代表开启了深度监视只需要监视对象便可监听该对象内的所有属性 watch:{//可以监视多个属性//监视哪个属性直接写属性名字即可//可以监视Vue的原有属性也可以监视计算属性a:{deep:true,//固定写法方法名必须叫handler//当被监视的属性发生变化时,handler就会自动调用一次//handler方法有两个参数前一个参数代表属性值改变后的新值后一个参数代表属性值改变之前的旧值handler(newValue,oldValue){alert(111)}}} watch的简写 原 watch:{a:{handler(){console.log(监听到了);}}} 简写 简写的条件是不使用深度监视及其他的任何属性 watch:{a(){console.log(监听到了);}} watch和computed如何选择 当computed和watch都能完成某个功能时优先选择computed当程序中采用异步的方式时只能使用watch 例比较大小 先使用watch侦听属性 div classapph1{{msg}}/h1button clickadd11/buttonbrbutton clickadd21/buttonbrnum1:{{num1}}brnum2:{{num2}}br比较结果{{daxiao}}/div scriptconst vm new Vue({el:.app,data:{msg:computed和watch的选择,num1:1,num2:1daxiao:},methods:{add1(){return this.num1},add2(){return this.num2}},watch:{num1(){if(this.num1 this.num2){this.daxiao this.num1 this.num2}else if(this.num1 this.num2){this.daxiao this.num1 this.num2}else {this.daxiao this.num1this.num2}},num2(){if(this.num1 this.num2){this.daxiao this.num1 this.num2}else if(this.num1 this.num2){this.daxiao this.num1 this.num2}else {this.daxiao this.num1this.num2}},}})/script 可以完成该功能 使用computed计算属性 scriptconst vm new Vue({el:.app,data:{msg:computed和watch的选择,num1:1,num2:1,daxiao:},methods:{add1(){return this.num1},add2(){return this.num2}},computed:{daxiao(){if(this.num1 this.num2){return this.num1 this.num2}else if(this.num1 this.num2){return this.num1 this.num2}else {return this.num1this.num2}}},})/script 也能完成该功能此种情况下选择computed计算属性 异步情况下 computed computed:{daxiao(){setTimeout((){if(this.num1 this.num2){return this.num1 this.num2}else if(this.num1 this.num2){return this.num1 this.num2}else {return this.num1this.num2}},3000)}}, 无法完成比较大小的功能 这是因为在异步情况下的箭头函数由谁调用this就指向谁这里的是由javascript引擎调用的return的时候也是把值返回给javascript引擎 watch watch:{num1(){setTimeout((){if(this.num1 this.num2){this.daxiao this.num1 this.num2}else if(this.num1 this.num2){this.daxiao this.num1 this.num2}else {this.daxiao this.num1this.num2}},2000)},num2(){setTimeout((){if(this.num1 this.num2){this.daxiao this.num1 this.num2}else if(this.num1 this.num2){this.daxiao this.num1 this.num2}else {this.daxiao this.num1this.num2}},2000)},} 在异步情况下watch可以完成该功能 watch中异步中箭头函数和普通函数this指向 分别在箭头函数以及普通函数中打印this watch:{num1(){setTimeout((){console.log(this);if(this.num1 this.num2){this.daxiao this.num1 this.num2}else if(this.num1 this.num2){this.daxiao this.num1 this.num2}else {this.daxiao this.num1this.num2}},2000)},num2(){setTimeout(function(){console.log(this);if(this.num1 this.num2){this.daxiao this.num1 this.num2}else if(this.num1 this.num2){this.daxiao this.num1 this.num2}else {this.daxiao this.num1this.num2}},2000)},} 可以看出在箭头函数中this是指向Vue实例的反而普通函数中的this指向window 在箭头函数中this之所以指向Vue实例是因为箭头函数是没有this是继承过来的那么在异步中该函数是被Vue实例管理的num1调用的所以this是指向Vue实例的 在普通函数中this指向调用者settimeout异步是window调用的所以this是指向window的