阅读 46

《跟热饭一起学习vue吧》Part.14 计算属性:computed

计算属性:computed

大家一看这个标题:

计算属性 是什么意思?不懂。

computed是什么?怎么用,放在哪?也不懂。

没关系,我第一次学习到这的时候 也不懂。所以我这里简单用土话给新人说一下,我们前面学习过 methods吧?就是用来存放各种js函数的那个vue构造器的属性之一。现在要学的这个computed和它几乎是一样的功能,一样的用法。

所以computed同样写在vue的构造其中:

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods:{}
  computed: {}
})
</script>

复制代码

既然都是存放函数的,那么为什么vue作者要弄俩个呢?闲的?当然不是。这俩个虽然在肉眼看起来效果是一样的,但是实际的触发原理却不同。

methods 每次渲染刷新都会触发函数运行。

computed 则只会在检测到依赖的元素或变量发生变化时才会重新运行,其他时候都是使用缓存。

所以这么看起来,computed的性能更好,更适合运转和计算一些复杂耗时的函数。

所以我们才会这么说它:计算属性 。

属性,谁的属性?vue构造器的属性。干嘛的?专门管计算的。

那么怎么使用呢?看这个菜鸟教程的例子:

图片

上图中,我画上了里面的数据流转路线。

在dom层里的具体标签中,用{{ 函数名 }} 的方式调用了 在computed中的对应函数,这个函数return 的值就会最终显示到 dom的元素标签内。而里面的this.message 指的就是 vue构造器的data当中的同名变量了。

computed 的特有默认属性 get子函数

computed 给自己的内部设置了一种特殊格式的管理方案:

computed: {
    site: {
      get: function () {return this.name + ' ' + this.url}
    }
  }

复制代码

注意,这里的site只是这个集合的名字而已,你可以随意更改,但是内部的get 方法是固定的名字,你不能更改。

而当你这样写的时候,get就会自动运行,并返回数据给 调用了 site的元素:

 <p>{{ site }}</p>

复制代码

如果你的get方法名字改成别的,那么就不会运行,只有get是自动运行的。

图片

你可能会问,为什么要这么麻烦?我直接写个site函数里面直接return不好么?非要套这么一层干什么?

这也是我一开始疑惑的地方,但是后来我看到了它的其他用法才明白, 这个computer属性其实和data属性也是有类似功能的重合,它提供了获取功能,但是很多老手喜欢再写个修改变量的方法,也就是set。

那么这时候get和set就是一对,他们的可能都是对某个data变量进行操控,所以就干脆用个site:{} 给它们包起来.....

不过这个set要自己额外的写。

你打开我们左下角阅读原文,进入到的vue练习页面的这个例子,就可以看到这个get和set。

图片

当然这个用法,现在我们会用,但是并不是完全理解为什么要这么麻烦,存在的意义是什么,我们用其他土办法不一样可以实现么?

这其实就是作者在发现了开发者这个频繁修改数据 获取数据的 需求后,帮你封装好的get和set,让你更简单的去完成任务。

好了本节课就到这里,怎么样,是不是感觉很简单???感觉简单的话,就立马关注下本公众号吧~ 进群学习请加v:qingwanjianhua

图片

本文使用 文章同步助手 同步

文章分类
代码人生
文章标签