理解vue中计算属性computed,以及使用场景

更新日期: 2021-04-18阅读: 1.7k标签: vue

vue中,计算属性是用于自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。其特点:

监测的是依赖值,依赖值不变的情况下其会直接读取缓存进行复用,变化的情况下才会重新计算。
数据可以进行逻辑处理,减少模板中计算逻辑。
对计算属性中的数据进行监视。
计算属性由两部分组成:get和set,分别用来获取计算属性和设置计算属性。默认只有get,如果需要set,要自己添加。另外set设置属性,并不是直接修改自身的值,而是修改它的依赖。


1、应用场景

很多时候我们在页面中可能需要对一些数据进行封装转换,如:计算总价,或对一些变量进行拼接等等。这时候就可以用到它

2、computed和方法的区别

其时在methods里定义一个方法来封装逻辑也是可以的,但是computed的写法要更简介一些,,调用起来也容易,不需要加()
computed中其时是自带get和set访问器的,只不过在一般在定义的时候我们不需要一一现实,而且computed是带有缓存的,如果多次重复使用属性的话,computed里定义的方法只会调用一次

3、案例说明

计算属性中可以用于进行一些比较复杂的操作,比如计算总价:

<div id="app">
<span v-text="price"></span>
<input v-model="list[0].price"></input>
</div>
<script>
new Vue({
el:'#app',
data:{
list:[
{name:'香蕉',price: 6},
{name:'哈密瓜',price: 10},
{name:'苹果',price: 5},
],
},
computed:{
price:function(){
let result=0
for(let i in this.list){
result+=Number(this.list[i].price)
}
return result
}
}
})
</script>

页面直接显示总价格为21。在输入框绑定list第一个元素的price值。当修改输入框中数字时候,我们会发现总价格会自动更新。


4、计算属性的可缓存性

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数

这也同样意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:

computed: {
  now: function () {
    return Date.now()
  }
}


5、与watch进行对比


watch:监测的是属性值, 只要属性值发生变化,其都会触发执行回调函数来执行一系列操作。

computed:监测的是依赖值,依赖值不变的情况下其会直接读取缓存进行复用,变化的情况下才会重新计算。

计算属性不能执行异步任务,计算属性必须同步执行,watch可执行异步任务,遇到异步任务,就交给侦听属性

watch也可以检测computed属性


总结

计算属性适合用在模板渲染中,某个值是依赖了其它的响应式对象甚至是计算属性计算而来;而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。

computed能做的,watch都能做,反之则不行
能用computed的尽量用computed


链接: https://www.fly63.com/article/detial/10212

VueJS 实际开发中会遇到的问题

VueJS 实际开发中会遇到的问题,主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。

vue与后台交互ajax数据

Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

Vue响应式开发,深入理解Vue.js响应式原理

深入理解Vue.js响应式原理。Vue教程有关的视频都讲到,我习惯响应式开发,在更早的Angular1时代,我们叫它:数据绑定(Data Binding)。你只需要在Vue实例的 data() 块中定义一些数据,并绑定到HTML

vue中慎用style的scoped属性

在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为scoped往往会造成我们在修改公共组件(三方库或者项目定制的组件)的样式困难,需要增加额外的工作量

基于vue移动端UI框架有哪些?vue移动端UI框架总汇

vue现在使用的人越来越多了,这篇文章主要整理一些比较优秀的移动端ui框架,推荐给大家,例如:mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI等

使用webpack提升vue应用的4种方式

webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,包括:单文件组件、优化Vue构建过程、浏览器缓存管理、代码分离

Vue2.0用户权限控制解决方案

Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。

组件化的概念/特性/优点,Vue组件的使用

Web 中的组件其实就是页面组成的一部分,具有高内聚性,低耦合度,互冲突等特点,有利于提高开发效率,方便重复使用,简化调试步骤等。vue 中的组件是一个自定义标签形式,扩展原生的html元素,封装可重用的代码。

Vue2实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!