初识Vue中计算属性,方法以及侦听器

2019年1月18日15:28:31 发表评论 阅读(391)

计算属性,方法以及侦听器的使用在vue中非常重要,我们一起来学习一下吧。

初识Vue中计算属性,方法以及侦听器

computed(计算属性)

我们先来看一下computed(计算属性)的一个实例:

  1. <div id="app">
  2.         {{firstName + " " + lastName}}
  3.     </div>
  4.     <script>
  5.         var vm = new Vue({
  6.             el: "#app",
  7.             data: {
  8.                 firstName: "Dell",
  9.                 lastName: "Lee"
  10.             }
  11.         })
  12.     </script>

以上的代码输出结果为Dell Lee,我们可以看到在插值表达式中过这样写{{firstName + " " + lastName}},是可以输出整个名字的,但是细心的我们会发现,这样写会有一些逻辑在模板上,我们不希望在模板上写逻辑表达式,模板负责显示就好,那么我们是否可以这样写呢?写一个fullName把姓和名都写出来呢?

比如这样:

  1. <div id="app">
  2.         {{fullName}}
  3.     </div>
  4.     <script>
  5.         var vm = new Vue({
  6.             el: "#app",
  7.             data: {
  8.                 firstName: "Dell",
  9.                 lastName: "Lee",
  10.                 fullName: "Dell Lee"
  11.             }
  12.         })
  13.     </script>

但是通过以上的代码,我们会发现数据发生了冗余(重复),那么我们可以用别的办法,既不产生冗余又可以把fullName显示出来呢?这个时候衍生出了computed(计算属性)这个概念,具体代码如下:

  1. <div id="app">
  2.         {{fullName}}
  3.         {{age}}
  4.     </div>
  5.     <script>
  6.         var vm = new Vue({
  7.             el: "#app",
  8.             data: {
  9.                 firstName: "Dell",
  10.                 lastName: "Lee",
  11.                 age: 28
  12.             },
  13.             //计算属性
  14.             computed: {
  15.                 fullName: function () {
  16.                     console.log("计算了一次")
  17.                     return this.firstName + " " + this.lastName;
  18.                 }
  19.             }
  20.         })
  21.     </script>

这样一来就可以达到效果了,另外,计算属性有一个很重要的知识点自带缓存机制,缓存的机制是这样的:依赖的变量(本文中是fistName和lastName)没发生任何改变的时候,计算属性就不会重新计算了,它会用之前计算的结果,这样的话会提高一些性能,我们可以通过实例来了解一下:

console输入vm.age = "29"来试一下,作用是改变其中age的值来观察是否会打印计算了一次的文字,来判断是否有缓存机制:

初识Vue中计算属性,方法以及侦听器

我们会发现页面重新渲染了,但是没有重新计算fullName,依据是console没有打印计算了一次,因此是有缓存机制的。那么当依赖的值发生改变会怎样呢?console输入vm.firstName = “hi”,会发现console打印出了计算了一次,因此印证了我们的说法:依赖的变量(firstName)发生改变,计算属性重新计算了。

methods(方法)

除了计算属性我们还可以用methods(方法)的形式来实现同样的功能,具体代码如下:

  1. <div id="app">
  2.         {{fullName()}}
  3.         {{age}}
  4.     </div>
  5.     <script>
  6.         var vm = new Vue({
  7.             el: "#app",
  8.             data: {
  9.                 firstName: "Dell",
  10.                 lastName: "Lee",
  11.                 age: 28
  12.             },
  13.             //方法
  14.             methods: {
  15.                 fullName: function () {
  16.                     console.log("计算了一次");
  17.                     return this.firstName + " " + this.lastName;
  18.                 }
  19.             }
  20.         })
  21.     </script>

和computed相比,这种办法没有缓存机制,console输入vm.age = "29"来试一下,可以发现改变了age的值,只要页面重新渲染,fullName的方法就会重新执行一次:

初识Vue中计算属性,方法以及侦听器

因此可以得出结论:computed和methods相比,具有缓存机制的computed(计算属性)胜出!

watch(侦听器)

我们还可以使用watch(侦听器)这种方法来实现,具体代码如下:

  1. <div id="app">
  2.         {{fullName}}
  3.         {{age}}
  4.     </div>
  5.     <script>
  6.         var vm = new Vue({
  7.             el: "#app",
  8.             data: {
  9.                 firstName: "Dell",
  10.                 lastName: "Lee",
  11.                 fullName: "Dell Lee",
  12.                 age: 28
  13.             },
  14.             //侦听器
  15.             watch: {
  16.                 firstName: function () {
  17.                     console.log("计算了一次");
  18.                     this.fullName = this.firstName + " " + this.lastName;
  19.                 },
  20.                 lastName: function () {
  21.                     console.log("计算了一次")
  22.                     this.fullName = this.firstName + " " + this.lastName;
  23.                 }
  24.             }
  25.         })
  26.     </script>

在以上的代码中,侦听器侦听firstName和lastName的改变,当firstName或者lastName其中一者发生改变,将会被重新赋值重新计算,否则依赖的变量没改变,就不会重新进行计算:

初识Vue中计算属性,方法以及侦听器

由以上结果我们可以发现watch和computed都具有缓存机制,但是我们对比代码不难发现,watch(侦听器)的代码就显得复杂很多,因此computed胜出!

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛