网站设计的必要性,在广州开发一个营销网站多少钱,高碑店市建设局网站,舞钢市住房和城乡建设局网站前言#xff1a; 本期将会介绍 Vue 中的计算属性#xff0c;他和 methods 方法又会有什么区别呢#xff1f;在这里都会给你一一讲解。 篮球哥找工作专属IT岗位内部推荐#xff1a;
专属内推链接#xff1a;内推通道 1、computed计算属性
概念#xff1a; 基于现有的数据…前言 本期将会介绍 Vue 中的计算属性他和 methods 方法又会有什么区别呢在这里都会给你一一讲解。 篮球哥找工作专属IT岗位内部推荐
专属内推链接内推通道 1、computed计算属性
概念 基于现有的数据计算出来的新属性。 依赖的数据变化自动重新计算。
语法 ● 声明在 computed 配置项中一个计算属性对应一个函数 ● 使用起来和普通属性一样使用 {{ 计算属性名 }}
业务需求 有一个 list 数据分别是购物商品的名称和数量需求是根据商品的数量统计出总共的商品数量。
list: [{ id: 1, name: 洗衣粉, num: 1 },{ id: 2, name: 餐具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]简单来说就是要通过计算属性将 list 里面的每一项的 num 进行求和。
完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}h3 {position: relative;}/style
/head
bodydiv idapph3购物清单/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/table!-- 目标统计求和求得商品总数 --p商品总数{{ totalCount }} 个/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [{ id: 1, name: 洗衣粉, num: 1 },{ id: 2, name: 餐具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},computed: {totalCount () {// 基于现有的数据编写求值逻辑// 计算属性函数内部可以直接通过 this 访问到 app 实例// 需求对 this.list 数组里面的 num 进行求和 → reducelet total this.list.reduce((sum, item) sum item.num, 0)return total}}})/script
/body
/html上述代码的关键地方就是 computed 属性里面有一个 totalCount 计算属性计算属性的值就是最终 return 的值。
这里的写法跟 methods 里面的方法特别像
而且这样的实现明明用 methods 里面的方法去实现也是可以实现的为什么还要用计算属性呢 2、computed VS methods
先来看看他们俩个的介绍 计算属性computed 作用封装了一段对于数据的处理求得一个结果 语法 写在computed配置项中作为属性直接使用 js中使用计算属性 this.计算属性模板中使用计算属性{{计算属性}} 方法methods 作用给Vue实例提供一个方法调用以处理业务逻辑。 语法 写在methods配置项中作为方法调用 js中调用this.方法名()模板中调用 {{方法名()}} 或者 事件名“方法名” 最重要的是
缓存特性提升性能 计算属性会对计算出来的结果缓存再次使用直接读取缓存 依赖项变化了会自动重新计算 → 并再次缓存methods没有缓存特性
所以简单来说计算属性是拥有缓存机制的
这里我们来用代码看一下计算属性的缓存机制
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp!-- 调用三次计算属性 --{{totalCount}}{{totalCount}}{{totalCount}}!-- 调用三次方法 --{{totalCountFn()}}{{totalCountFn()}}{{totalCountFn()}}/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [{ id: 1, name: 洗衣粉, num: 1 },{ id: 2, name: 餐具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},computed: {totalCount () {console.log(计算属性执行了)let total this.list.reduce((sum, item) sum item.num, 0)return total},},methods: {totalCountFn () {console.log(methods方法执行了)let total this.list.reduce((sum, item) sum item.num, 0)return total}}})/script
/body
/html观察运行结果和控制台 此时通过控制台的日志打印明显可以发现计算属性只执行了一次而方法却调用了三次 3、计算属性的完整写法
上述计算属性的基本用法已经介绍完了但是可以明显发现一个问题
计算属性默认的简写只能读取访问不能 “修改”
如何理解这个 “修改” 呢也就是说上面的简单写法程序员是无法直接修改计算属性的值的比如有个计算属性 count是不能写出 this.count 10 这样的代码的
但是如果使用计算属性的完整写法就可以控制计算属性的值了
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleinput {width: 30px;}/style
/head
bodydiv idapp姓input typetext v-modelfirstName 名input typetext v-modellastName span{{ fullName }}/spanbrbrbutton clickchangeName改名卡/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {firstName: 王,lastName: 五,},methods: {changeName () {this.fullName 张三}},computed: {// 简写 → 获取没有配置设置的逻辑// fullName () {// return this.firstName this.lastName// }// 完整写法 → 获取 设置fullName: {// (1) 当fullName计算属性被获取求值时执行get有缓存优先读缓存// 会将返回值作为求值的结果get () {return this.firstName this.lastName},// (2) 当fullName计算属性被修改赋值时执行set// 修改的值传递给set方法的形参set (value) { this.firstName value.slice(0, 1)this.lastName value.slice(1)}}}})/script
/body
/html直接写完整的 get 和 set 方法即可此时上述说的 this.count 10 就会执行对应 count 的计算属性的 set 方法里面的逻辑了。
