Vue教程0203-Vue计算属性和侦听器

watchping

已于 2023-02-12 09:58:50 修改

阅读量61

点赞数

分类专栏：前端Vue教程 # Vue基础文章标签： vue.js javascript 前端

于 2023-02-11 15:44:52 首次发布

本文链接：https://blog.csdn.net/watchping/article/details/128984510

版权

前端Vue教程同时被 2 个专栏收录

10 篇文章 3 订阅

订阅专栏

Vue基础

8 篇文章 0 订阅

订阅专栏

Vue计算属性和侦听器

1.计算属性
- 比较 methods 和 computed
2.侦听器

1.计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

对于任何复杂逻辑，你都应当使用计算属性。如果你不希望有缓存，也可以用方法来替代。

案例代码参考：

<body>  
  <div id="app">
    <h3>收货人: {{uname}}</h3>
    <h3>收货地址: {{address}}</h3>
    <h3>当地空气PM25值:{{pm25}}</h3>
    <img :src="pm25img">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        uname: "dingding",
        province: "浙江",  //省份
        city: "宁波",  //城市          
        county: "江北区", //区县
        addressDetail: "风华路495号",// 详细地址  
        pm25: 201,
      },
      //定义方法
      methods: {
        //方法，所以用法同方法的用法——必须加()
      },
      //定义计算属性
      computed: {
        //属性，所以用法同属性的用法——一定不要不加()
        address() {
          return this.province + this.city + this.county + this.addressDetail;
        },
        pm25img() {
          let index = 0;
          if (this.pm25 < 100) index = 1;
          else if (this.pm25 < 200) index = 2;
          else if (this.pm25 < 300) index = 3;
          else index = 4;
          return `../img/${index}.png`;
        },
      },
    });
    //测试: 在F12->console->vm.pm25 = 330
  </script>
</body>

提示: 计算属性，虽然本质是一个函数，但是在HTML中绑定语法中使用时，不要加()!

比较 methods 和 computed

1). 语法上，methods必须加()，computed 不用加()。

2). 效率上，methods中的方法，每调用一次，就会重新执行一次，执行结果，不会被vue缓存起来。computed中的计算属性，在第一次使用时计算，计算结果会被Vue缓存起来，即使在别的地方反复使用这个计算属性，也不会重复计算，而是直接从缓存中获取值。但是，当所依赖的属性值发生变化时，才被重新计算一次。

如何选择methods和computed
1). 关心函数的执行结果，首选计算属性。

2). 关心函数执行操作的过程，结果数据无所谓，甚至函数没有返回值，则首选methods中的方法。

2.侦听器

当你有一些数据需要随着其它数据变动而变动时，也可以用侦听属性 watch。

建议：

1.能用计算属性的，不要用侦听属性。
2.当需要在数据变化时执行异步或开销较大的操作时，建议用侦听属性。

案例代码参考：

<body> 
  <div id="app">
    <h3>当地空气PM25值:{{pm25}}</h3>
    <img :src="pm25img">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        pm25: 21,
        pm25img: "../img/1.png",
      },
      watch: {
        pm25(newValue) {
          let index = 0;
          if (newValue < 100) index = 1;
          else if (newValue < 200) index = 2;
          else if (newValue < 300) index = 3;
          else index = 4;
          this.pm25img = `../img/${index}.png`;
        },
      },
    });
   //测试: 在F12->console->vm.pm25 = 234
  </script>
</body>