位置: IT常识 - 正文
推荐整理分享vue2计算属性computed(vue2计算属性和vue3的计算属性的区别),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:vue2计算属性传参,vue2计算属性怎么写,vue2计算属性原理,vue2计算属性怎么用,vue2计算属性更改对象里的值,vue2计算属性和监视属性的区别,vue2计算属性,vue2计算属性,内容如对您有帮助,希望把文章链接给更多的朋友!
1.计算属性是vue的一个特性,此属性有计算能力,也就相当于一个函数。可以将计算结果缓存,作为一个属性使用。
特点:1.要在 methods: { } 或者 computed: { } 中 ,以方法(函数)的形式定义。
2.之后要使用就可以直接使用属性名代替这个重复的计算。
好处:1.可以实现代码复用
2.计算属性就会自动重新求值,只要计算源数据任何一项发生了变化,计算属性都会立刻更新,实现动态计算。
eg:我们先看个小例子:
通过输入 r、g、b来改变box的背景色,其中有个 `rgb(${r}, ${g}, ${b})` 多次使用
为了提高代码的复用,我们可以使用计算属性 computed
2.计算属性computed优点:1.支持缓存,当数据源发生变化,会随即重新计算;
2.不支持异步,无法监听异步操作导致的数据变化;
3.如果一个属性是由其他属性计算而来,形成了一对一、多对一,就可以使用 computed;
4.代码演示:
computed: { rgb() { //返回一个字符串,可被当作rgb字符串使用 //r、g、b中的任意一个发生变化 rgb都会发生改变 return `rgb( ${this.r}, ${this.g}, ${this.b} )` } }之后所有的 `rgb(${r}, ${g}, ${b})` 都可以用 rgb 代替 ,优化后的代码如下:
感谢浏览!
下一篇:Linux内核学习笔记——页表的那些事。(《linux内核分析》)
友情链接: 武汉网站建设