网站建设公司织梦模板下载,郑州网站优化外包,建邺区住房 建设 网站,金猪云高端网站建设目录
编辑
1、什么是计算属性
2、为什么要有计算属性
1. 为什么不是使用模板语法
2. 为什么不是使用method对于复杂逻辑
3. 什么时候要用计算属性
4. 定义计算属性fullName 5. 计算属性的配置项 1、什么是计算属性 写在computed对象中的属性#xff0c;本质上是…
目录
编辑
1、什么是计算属性
2、为什么要有计算属性
1. 为什么不是使用模板语法
2. 为什么不是使用method对于复杂逻辑
3. 什么时候要用计算属性
4. 定义计算属性fullName 5. 计算属性的配置项 1、什么是计算属性 写在computed对象中的属性本质上是一个方法不过使用时依旧当属性来使用 2、为什么要有计算属性
1. 为什么不是使用模板语法 虽然模板语法使用非常便利但是它是被设计成用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护 2. 为什么不是使用method对于复杂逻辑 无论计算属性还是methos这两种实现方式的最终结果是完全相同的。 因为计算属性是基于缓存实现的只在计算属性所依赖的数据发生改变时它们才会重新求值否则访问 计算属性会立即返回之前的计算结果而不必再次执行函数。 相比之下每当触发重新渲染时调用方法将总会再次执行函数。 3. 什么时候要用计算属性 对于任何复杂逻辑其计算结果需要被缓存的你都应当使用计算属性 4. 定义计算属性fullName
scriptexport default {data: {firstName: 熊,lastName: 大},computed:{fullName:{get(){return this.firstName - this.lastName},set(value){}}}/script 5. 计算属性的配置项 get()必须要写该函数不接受参数 get()什么时候被调用?当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用getter函数有一个返回值该返回值就是计算属性的值 set()可选项接受一个可选参数计算属性被修改之后的值 set()什么时候被调用? 当计算属性被修改时被调用 get()和 set()中出现的this执向vm
计算属性整个过程 当第一次调用get()之后Vue实例身上会出现一个与计算属性同名的属性我称为计算属性的缓存属性该属性的值就是调用get()返回的值 当再次调用getter之后Vue把getter返回的值赋值给这个缓存属性 缓存属性因此当不是初次访问计算属性时且计算属性所依赖的数据没有发生变化时,Vue实际上用的是这个属性而不是再次执行get() 原理底层借助了Object.defineProperty方法提供的getter和setter
简写 当计算属性只需要get时才可以简写
scriptexport default {data: {firstName: 熊,lastName: 大},computed:{//这个函数就是getterfullName:function(){return this.firstName - this.lastName}}}/script
使用
{{计算属性}}
divspanhello,{{fullName}}span!--fullName是个计算属性--
div
