谷粒商城实战笔记-40-前端基础-Vue-计算属性、监听器、过滤器

本节的主要内容是学习Vue的三个特性的使用：

• 计算属性
• 监听器
• 过滤器

一，计算属性

计算属性（Computed Properties）是其中非常强大的一个特性：

• 基于依赖的数据进行运算并缓存结果
• 依赖的数据发生变化时会触发重新计算。

相当于模板中的复杂表达式，计算属性要更高效、更可读。

1，用途

数据处理：可以对原始数据进行转换或组合，比如将多个数据源合并成一个。
性能优化：只有当它的相关依赖发生改变时，计算属性才会重新求值。这避免了不必要的计算。
代码清晰：将逻辑放在计算属性中可以使模板保持干净，提高代码的可读性和可维护性。

2，用法

2.1 定义View

下面是一个简单的例子来说明如何使用计算属性。

这是一个简单图书购物车界面。用户可以看到两本书的信息——《西游记》和《水浒传》，每本书都有其单价和数量输入框。总价会根据用户选择的书的数量和单价实时更新。

    <div id="app">
        <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
        <ul>
            <li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
            <li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"> </li>
            <li>总价：{{totalPrice}}</li>
            {{msg}}
        </ul>
    </div>

2.2 声明计算属性

总价totalPrice的计算非常适合使用计算属性来实现。

     new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice(){
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
                }
            }
        })

如上JS代码，总价totalPrice定义在Vue对象的computed属性下。

效果如下。

3，注意事项

• 计算属性内部可以通过 this 访问 Vue 实例以及其它数据属性。
• 如果计算属性的函数过于复杂，考虑使用方法（methods）代替，因为计算属性的缓存机制可能使得调试变得困难。
• 计算属性也可以声明为只读的，通过添加 getter/setter 的形式来实现。

二，监听器

监听器（Watcher）是框架内部用于响应数据变化的核心机制之一。不过，在 Vue 开发中，我们通常不会直接操作 Watcher 类，而是使用更高级的 API 如 watch 或者在组件选项中定义的 watch 属性来实现侦听器的功能。

下面基于前面的图书购物车为例说明监听器的用法，假设西游记图书的库存只有3本，则当用户输入的数字大于3时，就要提示库存不足。此时就需要监听用户的输入。

1. 使用 watch 监听属性的变化

在 Vue 组件中，使用 watch 属性来监听某个数据属性的变化，并执行相应的函数。

        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice(){
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
                }
            },
            //watch监控一个值的变化。从而做出相应的反应。
            watch: {
                xyjNum(newVal,oldVal){
                    if(newVal>3){
                        alert("库存超出限制");
                        this.xyjNum = 3
                    }
                }
            },
        })

在这个例子中，每当 xyjNum 的值发生变化时，watch 中定义的函数就会被调用，超过库存则弹窗提示。

注意，watch中的函数对象名称，必须和要监听的属性名一致，如watch中的xyjNum和input的属性xyjNum保持一致。

三，过滤器

过滤器主要用于格式化数据显示，它们接收一个值作为输入并返回一个经过转换的值。过滤器可以定义为全局的或者局部的，并且可以在模板中使用。

基于如下需求学习过滤器的使用，遍历展示model中的用户列表信息，展示时将代表性别的枚举值转换为字符展示，这个转换的过程就可以使用过滤器。

最终效果如下。

模板View。

<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>

model中的用户列表数据。

   data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            }

1，定义局部过滤器

局部过滤器只在当前 Vue 实例中可用，定义在Vue对象的 filters 属性中。

  let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: {
                // filters 定义局部过滤器，只可以在当前vue实例中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })

2，定义全局过滤器

全局过滤器可以在任何 Vue 组件中使用。定义全局过滤器的方式是在 Vue 实例创建之前使用 Vue.filter() 方法。

Vue.filter("gFilter", function (val) {
   if (val == 1) {
       return "男~~~";
   } else {
       return "女~~~";
   }
})

3，使用过滤器

在模板中，过滤器通过管道符 | 应用于表达式。

<div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>

4，过滤器参数

过滤器可以接受额外的参数。
,

Vue.filter('padNumber', function (value, totalLength) {
  var str = '' + value;
  while (str.length < totalLength) {
    str = '0' + str;
  }
  return str;
});

使用参数：

<!-- 使用过滤器参数 -->
<p>{{ 42 | padNumber(4) }}</p>
<!-- 结果将是 "0042" -->

5，链式过滤器

多个过滤器可以串联使用。

示例代码：

<p>{{ "hello world" | toUppercase | reverseString }}</p>

这里假设 toUppercase 是另一个定义好的过滤器，上面的代码会先将字符串转为大写，然后再反转字符串。

原文地址：https://blog.csdn.net/epitomizelu/article/details/140582311

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！