【VUE基础】计算属性与侦听器

最新推荐文章于 2024-03-20 15:54:27 发布
最新推荐文章于 2024-03-20 15:54:27 发布
阅读量59 收藏
点赞数
分类专栏： VUE相关 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013301892/article/details/126699170
版权

1. 计算属性的基本使用

​ 现在有变量姓氏和名字，要得到完整的名字。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性的基本使用</title>
</head>
<body>
  <div id="app">
    <!-- Mastache语法 -->
    <h2>{{firstName+ " " + lastName}}</h2>
    <!-- 方法 -->
    <h2>{{getFullName()}}</h2>
    <!-- 计算属性 -->
    <h2>{{fullName}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        firstName:"skt t1",
        lastName:"faker"
      },
      computed: {
        fullName:function(){
          return this.firstName + " " + this.lastName
        }
      },
      methods: {
        getFullName(){
          return this.firstName + " " + this.lastName
        }
      },
    })
  </script>
</body>
</html>
  1. 使用Mastache语法拼接<h2>{{firstName+ " " + lastName}}</h2>
  2. 使用方法methods<h2>{{getFullName()}}</h2>
  3. 使用计算属性computed<h2>{{fullName}}</h2>

例子中计算属性computed看起来和方法似乎一样，只是方法调用需要使用()，而计算属性不用，方法取名字一般是动词见名知义，而计算属性是属性是名词，但这只是基本使用。

2. 计算属性的复杂使用

​ 现在有一个数组数据books，里面包含许多book对象，数据结构如下：

books:[
          {id:110,name:"JavaScript从入门到入土",price:119}, 
          {id:111,name:"Java从入门到放弃",price:80},
          {id:112,name:"编码艺术",price:99},
          {id:113,name:"代码大全",price:150},
        ]

​ 要求计算出所有book的总价格totalPrice。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性的复杂使用</title>
</head>
<body>
  <div id="app">


    <h2>总价格：{{totalPrice}}</h2>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        books:[
          {id:110,name:"JavaScript从入门到入土",price:119},
          {id:111,name:"Java从入门到放弃",price:80},
          {id:112,name:"编码艺术",price:99},
          {id:113,name:"代码大全",price:150},
        ]
      },
      computed: {
        totalPrice(){
          let result= 0;
          for (let i = 0; i < this.books.length; i++) {
            result += this.books[i].price;
          }
          return result
        }
      }
    })
  </script>
</body>
</html>

​ 获取每一个book对象的price累加，当其中一个book的价格发生改变时候，总价会随之变化。

3. 计算属性的setter和getter

​ 在计算属性中其实是由这样两个方法setter和getter。

      computed: {
        fullName:{
          //计算属性一般没有set方法，只读属性
          set:function(newValue){
            console.log("-----")
            const names = newValue.split(" ")
            this.firstName = names[0]
            this.lastName = names[1]
          },
          get:function(){
            return this.firstName + " " + this.lastName
          }
        }
      }

​ 但是计算属性一般没有set方法，只读属性，只有get方法，但是上述中newValue就是新的值，也可以使用set方法设置值，但是一般不用。

computed的getter/setter

请看如下代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue计算属性的getter和setter</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>计算属性：computed的getter/setter</h1>
            <h2>fullName</h2>
            {{fullName}}
            <h2>firstName</h2>
            {{firstName}}
            <h2>lastName</h2>
            {{lastName}}
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                firstName:"zhang",
                lastName:"san",
                },
                computed: {
                    fullName:{
                        get:function(){
                            return this.firstName+" "+this.lastName
                        },
                        set:function(value){
                            var list = value.split(' ');
                            this.firstName=list[0]
                            this.lastName=list[1]
                        }
                    }
                },
            });
        </script>
    </body>
    </html>

初始化

修改fullName

结论

- 通过这种方式，我们可以在改变计算属性值的同时也改变和计算属性相关联的属性值。

4. 计算属性和methods的对比

​ 直接看代码，分别使用计算属性和方法获得fullName的值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性和methods的对比</title>
</head>
<body>
  <div id="app">
    <!-- methods，即使firstName和lastName没有改变，也需要再次执行 -->
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <!-- 计算属性有缓存，只有关联属性改变才会再次计算 -->
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>


  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        firstName:"skt t1",
        lastName:"faker"
      },
      computed: {
        fullName(){
          console.log("调用了计算属性fullName");

          return this.firstName + " " + this.lastName
        }
      },
      methods: {
        getFullName(){
          console.log("调用了getFullName");

          return this.firstName + " " + this.lastName
        }
      },
    })
  </script>
</body>
</html>

​ 分别使用方法和计算属性获取四次fullName，结果如图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B80vbX4b-1662343156941)(https://cdn.jsdelivr.net/gh/krislinzhao/IMGcloud/img/20200508145941.png)]

​ 由此可见计算属性有缓存，在this.firstName + " " + this.lastName的属性不变的情况下，methods调用了四次，而计算属性才调用了一次，性能上计算属性明显比methods好。而且在改动firstName的情况下，计算属性只调用一次，methods依然要调用4次。

5. Vue计算属性与侦听器总结

照例看一段代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue计算属性/侦听器/方法比较</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>计算属性：computed</h1>
            {{fullName}}
            <h1>方法：methods</h1>
            {{fullName2()}}
            <h1>侦听器：watch</h1>
            {{watchFullName}}
            <h1>年龄</h1>
            {{age}}
        </div>
        <script>
            var other = 'This is other';
            var app = new Vue({
                el:"#app",
                data:{
                firstName:"zhang",
                lastName:"san",
                watchFullName:"zhangsan",
                age:18,
                },
                watch: {
                    firstName:function(newFirstName, oldFirstName){
                        console.log("firstName触发了watch,newFirstName="+newFirstName+",oldFirstName="+oldFirstName)
                        this.watchFullName = this.firstName+this.lastName+","+other
                    },
                    lastName:function(newLastName, oldLastName){
                        console.log("lastName触发了watch,newLastName="+newLastName+",oldLastName="+oldLastName)
                        this.watchFullName = this.firstName+this.lastName+","+other
                    }  
                },
                computed: {
                    fullName:function(){
                    console.log("调用了fullName,计算了一次属性")
                    return this.firstName+this.lastName+","+other;
                    }
                },
                methods: {
                    fullName2:function(){
                        console.log("调用了fullName,执行了一次方法")
                        fullName2 = this.firstName+this.lastName+","+other;
                        return fullName2;
                    }
                }
            });
        </script>
    </body>
    </html>

初始化：

修改firstName/lastName/两者都修改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CczJbfqH-1662343156942)(https://cdn.jsdelivr.net/gh/krislinzhao/IMGcloud/img/20200508150503.png)]

修改computed中没计算的age

修改Vue实例外的对象

修改Vue实例外对象后在修改Vue实例内的对象

测试结论：

  1. 使用computed计算了fullName属性，值为firstName+lastName。计算属性具有缓存功能，当firstName和lastName都不改变的时候，fullName不会重新计算，比如我们改变age的值，fullName的值是不需要重新计算的。
  2. methods并没有缓存特性，比如我们改变age的值，fullName2()方法会被执行一遍。
  3. 当一个功能可以用上面三个方法来实现的时候，明显使用computed更合适，代码简单也有缓存特性。
  4. 计算属性范围在vue实例内，修改vue实例外部对象，不会重新计算渲染，但是如果先修改了vue实例外对象，在修改vue计算属性的对象，那么外部对象的值也会重新渲染。

计算属性：computed

计算属性范围在Vue实例的fullName内所管理的firstName和lastName,通常监听多个变量

侦听器：watch

监听数据变化，一般只监听一个变量或数组

使用场景

watch(异步场景)，computed(数据联动)

攻城狮·建哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue计算属性和侦听器
weixin_61562639的博客
08-07 301
这里表达式包含三个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性。上data: {},{//所有计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果}}})
Vue学习笔记之计算属性与侦听器用法
10-15
主要介绍了Vue学习笔记之计算属性与侦听器用法,结合实例形式详细分析了vue.js计算属性与侦听器基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
（五）计算属性
qq_45853870的博客
10-18 277
（五）计算属性 5.1 计算属性的基本使用 ​ 现在有变量姓氏和名字，要得到完整的名字。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con
vue计算属性computed和侦听器watch的使用
最新发布
qq_43628158的博客
03-20 852
vue2和vue3中计算属性computed和侦听器watch的介绍和使用规范
vue——计算属性和侦听器
anmi3721的博客
09-11 189
一、计算属性(data中的相关数据) 　　侦听多个属性时——计算属性 comuted。 　　模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <body> <div id="computed"> <div> {{msg.spl...
vue计算属性和侦听器
qq_34400242的博客
04-15 293
vue在模板中使用表达式虽然很方便，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。 计算属性 <div id="example"> {{ message.split('').reverse().join('') }} </div> 对于任何复杂逻辑，都应当使用计算属性。 例子： <div id="example"> ...
深入浅析Vue.js计算属性和侦听器
10-18
主要介绍了Vue.js计算属性和侦听器的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
Vue基础：计算属性 与 侦听器
01-20
（一）计算属性computed 对于任何复杂逻辑，你都应当使用计算属性。 1. 基本使用 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要依赖数据没有发生改变，...
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
主要介绍了详解vue 计算属性与方法跟侦听器区别(面试考点),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【vue】计算属性和侦听器
z767327552的专栏
03-26 435
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch&lt;div id="demo"&gt;{{ fullName }}&lt;/div&gt;watch版本：var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' ...
Vue-计算属性和侦听器
微信公众号：饺子泡牛奶
04-16 192
章节目录：一、计算属性二、侦听器三、过滤器四、计算属性 vs 侦听器五、结束语 一、计算属性 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性（computed）。 在 data.computed 属性中进行计算的过程构造。 计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。 基于此对于任何复杂逻辑，你都应当使用计算属性，而如果你不希望有缓存，就请用方法（methods）来进行替代。 代码示例： <body> <div id
VUE-计算属性和侦听器
damadashen的博客
05-13 172
VUE计算属性和侦听器
vue中的计算属性和侦听器
悦.L的博客
11-02 466
计算属性 在模板中使用
Vue入门-计算属性和侦听器
压缩疯雷的博客
10-19 157
计算属性和侦听器计算属性基础例子计算属性缓存 vs 方法计算属性 vs 侦听属性计算属性的 setter侦听器 计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻
Vue 计算属性/侦听器/ 组件
weixin_63473024的博客
02-25 503
vue计算属性-computed computed: { "计算属性名" () { return "值" } } 有缓存机制,把此次运行的结果保存的内存中,下次运行不会调用函数,而是直接读取内存, 速度快,减少调用函数调用 如果 依赖项值 - 有变化, 函数会"自动"重新执行-并缓存新的值 完整语法: computed: { "计算属性名" (){}, "计算属性名": { set(值){
vue计算属性和侦听器的区别
07-10
Vue计算属性和侦听器是用于处理Vue实例数据变化的两种不同的方式。 计算属性是一种基于依赖关系自动更新的属性。它可以根据已有的数据计算出一个新的值，并且在依赖的数据发生变化时自动更新。计算属性可以像普通...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攻城狮·建哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值