概念理解

类型

{ [key: string]: Function | { get: Function, set: Function } }

详细

属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

例子

computed: {aDouble: vm => vm.a * 2
}

computed: {  get(){return this.xxxx;     } 
}computed: {value: {get(){return this.xxxx;     },set(val){this.$emit()         }}   
}

注意：计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

注意点一

computed中定义的一个变量没有在相关属性发生变化后触发更新。

例子如下

当调用changeAge设置person年龄之后，调用this.personAge 发现personAge值为undefined，

person 中的age 并不是响应是的，

data(){return {person:{name:"小虽"}}
}computed:{personAge(){return this.person.age;}
}method:{changeAge(){this.person.age = 24;}
}

修改

data(){return {person:{name:"小虽",age: 0}}
}computed:{personAge(){return this.person.age;}
}method:{changeAge(){this.person.age = 24;}
}

注意点二

局部变量：在获取值的时候尽量设置参数，

// 优化computed: {res({ start, count}) { return start + count;}}// 无优化computed: {res() { return this.start + this.count;}}

计算前先用局部变量 start, count，缓存起来，后面直接访问。
优化前后的组件的计算属性 res 的实现差异，优化前的组件多次在计算过程中访问this.{ start, count}

原因是你每次访问 this.xx 的时候，由于 this.{ start, count}是一个响应式，会触发getter，进而会执行依赖收集相关逻辑代码。这也算是性能优化技巧吧，在this.xxx 访问次数比较多的时候。

vue computed相关推荐

Vue computed带参数
Vue computed带参数一般情况下,我们在Vue中使用computed计算属性是无法直接进行传参的. 方法:如果有传参数的需求可以通过闭包函数(也叫匿名函数)来实现. 例如需要通过数据的大小, ...
vue computed 使用小问题
这个是一个vue 中 computed 的一个小问题解决方案是通过提issue 解决的,issue链接 Vue.js version 1.0.26 实例 jsfiddle 代码部分 <div ...
vue computed 源码分析
我们来看看computed的实现.最简单的一个demo如下: <html> <head><meta http-equiv="Content-Type" ...
vue computed使用_vue computed正确使用方式
最近面试中,遇到一个小伙子,谈到了vue中的 computed 和 watch 区别,最后得到了一个让我瞠目结舌的答案,只用 watch,从不用 computed 模板内的表达式非常便利,但是设计它们 ...
深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长拿官网简单的例子来看一下: <div id="example"><p> ...
Vue computed参数与各生命周期关系（主要是异步的时候）
前面聊了vue生命周期与路由的先后顺序,现在聊聊computed与各生命周期.先聊一下需求背景,我在做一个图表的时候遇到了,我将图表样式封装为一个组件,然后各个地方需要的时候将数据通过props传入到 ...
vue computed 中操作DOM和给对象添加属性遇到的问题
这两天使用vue做东西遇到一些问题,今天总结记录一下: 在computed中没法操作dom元素,比如 computed: {w() {return this.$refs.box.offsetWidth ...
[Vue] Computed property XXX was assigned to but it has no setter.
项目过程中经常遇到如下问题: [Vue warn]: Computed property "CurrentStep" was assigned to but it has no s ...
vue computed使用_前端发展方向指南—Vue运行机制
点击上方蓝色字关注我们~01前言随着这几年前端的快速发展,页面中需要实现的功能越来越复杂,DOM操作频繁,使用传统的jQuery库去频繁操作DOM时不仅消耗性能,而且各种DOM绑定后期维护时简直是一场 ...
Vue computed自动计算对象中的属性
需求总建筑面积 = 地上总建筑面积 + 地下总建筑面积总建筑面积禁止用户输入,而由用户输入的 "地上总建筑面积" 和 "地下总建筑面积" 自动求和得到实 ...

vue computed

概念理解

注意点一

注意点二

vue computed相关推荐

最新文章

热门文章