北京学电脑的培训机构,网站代码优化有哪些,常用的网页开发工具,博客网站建设#x1f4dd;个人主页#xff1a;五敷有你 #x1f525;系列专栏#xff1a;Vue⛺️稳重求进#xff0c;晒太阳 计算属性
概念#xff1a;基于现有的数据#xff0c;计算出来新的属性#xff0c;依赖的数据变化#xff0c;自动重新计算
语法#xff1a;
声明… 个人主页五敷有你 系列专栏Vue⛺️稳重求进晒太阳 计算属性
概念基于现有的数据计算出来新的属性依赖的数据变化自动重新计算
语法
声明在computed配置项中一个计算属性对应一个函数使用起来和普通属性一样使用{{计算属性名}}
计算属性-可以将一段求值的代码进行封装
简写 computed:{fn(){return parseInt(this.a)parseInt(this.b)parseInt(this.c);}},
computed计算属性VSmethods方法
computed 计算属性
作用封装了一段对于数据的处理求得一个结果
语法
写在computed配置项中作为属性直接使用-this.计算属性 {{计算属性}}
缓存特性
计算属性会对计算出来的结果缓存再次使用直接读取缓存依赖项变化了会自动重新计算-并再次缓存
计算属性的完整写法 computed:{fullName:{get(){return this.firstNamethis.lastName;},set(value){this.firstNamevalue.slice(0,1);this.lastNamevalue.slice(1);}}}
methods方法
作用给实例提供一个方法调用以处理业务逻辑
语法
写在methods配置项中
作为方法需要调用 - this.方法名() {{方法名()}} 事件名方法名
watch
作用监视数据变化执行一些业务逻辑或异步操作
语法
简单写法 简单类型数据直接监视 watch:{obj.words (newValue,oldValue){console.log(newValue)}}
完整写法添加额外的配置项
deep:true 对复杂类型进行深度监视
immediate:true 初始化立刻执行一次handler list:{deep:true,handler(newValue){localStorage.setItem(list,JSON.stringify(newValue))}}
