Vue计算属性与侦听器和过滤器超详细介绍

2024-09-29 12:03:48

1. 计算属性

1.1 使用方法

概述：

模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以让模板变得简洁易于维护。计算属性是基于它们的响应式依赖进行缓存的，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

计算属性定义在Vue对象中，通过关键词computed属性对象中定义一个个函数，并返回一个值，使用计算属性时和data中的数据使用方式一致。

使用：

当不使用计算属性时，我们想要计算模板中的结果，可以有下面几种写法：

<div id="app">
    <!-- 方法1：vue在使用时，不推荐在模板中来写过多的逻辑 -->
    <h3>{{ n1+n2 }}</h3>
    <!-- 方法2：对于一个计算结果，可能在当前的页面中，显示多个，显示几次就调用这个函数几次，性能会降低 -->
    <h3>{{ sum() }}</h3>
    <h3>{{ sum() }}</h3>
    <h3>{{ sum() }}</h3>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            n1: 1,
            n2: 2
        },
        methods: {
            sum() {
                console.log('sum --- methods');
                return this.n1 + this.n2
            }
        }
    })
</script>

如果对于一个结果，进行计算，可以使用vue提供计算属性来完成，而且计算属性它还具有缓存功能。如果你的依赖项，没有发生改变，则它会在再一次调用时，会读取缓存中的数据。

<div id="app">
    <div>{{total}}</div>
    <div>{{total}}</div>
    <div>{{total}}</div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            n1: 1,
            n2: 2
        },
        // 计算[属性]
        computed: {
            // 调用时，直接写名称就可以，不用写小括号
            // 计算属性中的依赖项，可以是一个，也是可以N个,取决于你在计算属性中调用多少
            // 注：此方法中不能写异步
            // 简写 使用最多的写法
            total() {
                console.log('computed -- total')
                // 在计算属性中，调用了 n1和n2，则n1和n2就是它的依赖项，如果这两个依赖项，有一个发生改变，则它会重新计算，如果两个都没有发生改变，则第2之后调用，读取缓存中的数据
                return this.n1 + this.n2
            }
        },
        methods: {
            // 计算属性中的方法在 methods 中也可以调用
            sum() {
                console.log('sum --- methods', this.total);
                return this.n1 + this.n2
            }
        }
    })
</script>

注意：

计算属性在调用时，在模板中直接写名称就可以，不用写小括号。
在计算属性中，调用了 n1和n2，则n1和n2就是它的依赖项，如果这两个依赖项，有一个发生改变，则它会重新计算，如果两个都没有发生改变，则第2之后调用，读取缓存中的数据。这也就是为什么上面计算了3次，却只调用了一次计算方法，因为计算属性中的依赖项没有发生改变。
计算属性中的依赖项，可以是一个，也是可以N个，取决于你在计算属性中调用多少。
计算属性中的方法中不能写异步。
上面计算属性，是简写。简写是使用最多的方法。
计算属性不仅可以在模板中调用，也可以在 method 中调用。

如果定义的计算属性，为简写方式，则给计算属性赋值时，会报错。只有标准的写法时，它才可以对于计算属性进行赋值操作。下面我们就来看一下标准写法是怎样的。

<div id="app">
    <h3>{{ sum() }}</h3>
    <h3>{{msg}}</h3>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            n1: 1,
            n2: 2,
            msg: ''
        },
        // 计算[属性]
        computed: {
            // 标准写法
            total: {
                // 简写只是实现的了标准写法中的get方法
                get() {
                    return this.n1 + this.n2
                },
                set(newVal) {
                    if (newVal > 10) {
                        this.msg = '值有点的大'
                    }
                }
            }
        },
        methods: {
            sum() {
                // 赋值只会触发标准方式中的set方法，然后你可以得到它，完成一些别的工作
                if (this.total > 6) {
                    this.total = 101
                }
                return this.n1 + this.n2
            }
        }
    })
</script>

注意：

简写方式只是实现的了标准写法中的get方法。
赋值只会触发标准方式中的set方法，然后你可以得到新的值，完成一些别的工作。

1.2 案例-购物车合计使用计算属性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue学习使用</title>
        <!-- 第1步： 引入vue库文件 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 第2步：挂载点 -->
        <div id="app">
            <table border="1" width="600">
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item,index in carts">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="setNum(1,index)">+++</button>
                        <input type="number" v-model="item.num">
                        <button @click="setNum(-1,index)">---</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </table>
            <hr>
            <h3>
                合计：
                {{totalPrice}}
            </h3>
        </div>
        <!-- 第3步：实例化vue -->
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    carts: [
                        { id: 1, name: '小米12pro', price: 1, num: 1 },
                        { id: 2, name: '华为手机', price: 2, num: 1 },
                        { id: 3, name: '水果手机', price: 3, num: 1 },
                    ]
                },
                methods: {
                    setNum(n, index) {
                        this.carts[index].num += n
                        this.carts[index].num = Math.min(3, Math.max(1, this.carts[index].num))
                    },
                    del(index) {
                        confirm('确定删除') && this.carts.splice(index, 1)
                    }
                },
                // 计算属性
                computed: {
                    totalPrice() {
                        return this.carts.reduce((prev, { price, num }) => {
                            // 依赖项
                            prev += price * num
                            return prev
                        }, 0)
                    }
                }
            })
        </script>
    </body>
</html>

2. 侦听器

概述：

使用watch来侦听data中数据的变化,watch中的属性一定是data 中已经存在的数据。

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

使用：

标准写法：

<div id="app">
    <div>
        <input type="text" v-model="username">
        <span>{{errorUsername}}</span>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: '',
            errorUsername: ''
        },
        // 监听器，它用来监听data配置中的数据的变化，一但有变化，就会自动触发.默认情况下，初始化不触发
        // 在监听器中是可以得到this对象的
        // 监听器它的依赖项，只有一个，一对一
        // 监听器中可以写异步
        watch: {
            // 方法名或属性名 就是你要观察的data中的属性名称
            // 标准写法
            username: {
                // newValue 变化后的值;oldValue 变化前的值
                handler(newValue, oldValue) {
                    if (newValue.length >= 3) this.errorUsername = '账号过长'
                    else this.errorUsername = ''
                }
            }
        })
</script>

注意：

监听器用来监听data配置中的数据的变化，一但有变化，就会自动触发.默认情况下，初始化不触发。
在监听器中是可以得到this对象的。
监听器的依赖项，只有一个，一对一。
监听器中可以写异步（Ajax 或者 setTimeout）。

简写：

<div id="app">
    <div>
        <input type="text" v-model="username">
        <span>{{errorUsername}}</span>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: '',
            errorUsername: ''
        },
        watch: {
            username(newValue, oldValue) {
                if (newValue.length >= 3) this.errorUsername = '账号过长'
                else this.errorUsername = ''
            }
        }
    })
</script>

初始化时，启用侦听器写法：

<div id="app">
    <div>
        <input type="text" v-model="username">
        <span>{{errorUsername}}</span>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: 'aaa',
            errorUsername: ''
        },
        watch: {
            // 方法名或属性名 就是你要观察的data中的属性名称
            // 标准写法
            username: {
                handler(newValue, oldValue) {
                    if (newValue.length >= 3) this.errorUsername = '账号过长'
                    else this.errorUsername = ''
                },
                // 初始时，执行1次 --- 一般情况下，不启用  只有在标准写法下面，才有此配置
                immediate: true
            }
        })
</script>

注意：这个配置只有在标准写法下才能有。

监听对象中的属性变化：

<div id="app">
    <div>
        <input type="number" v-model.number="user.id">
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            user: { id: 100, name: 'aaa' }
        },
        // 监听对象中的指定的属性数据的变化  推荐如果你监听的是一个对象中数据变化，建议这样的方式
        watch: {
            'user.id'(newValue, oldValue){
                console.log(newValue, oldValue);
            }
        }
    })
</script>

监听对象变化：

<div id="app">
    <div>
        <input type="number" v-model.number="user.id">
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            user: { id: 100, name: 'aaa' }
        },
        watch: {
            // 监听对象,只能使用标准方式来写
            // 监听对象变化，它的前后值是一样的，无法区分
            user: {
                // 深度监听
                deep: true,
                handler(newValue, oldValue) {
                    console.log(newValue, oldValue);
                },
            }
        }
    })
</script>

注意：

监听对象，只能使用标准方式来写
监听对象变化，它的前后值是一样的，无法区分

3. 过滤器

概述：

在数据被渲染之前，可以对其进行进一步处理，比如将字符截取或者将小写统一转换为大写等等，过滤器本身就是一个方法。

过滤器的作用就是为了对于界面中显示的数据进行处理操作。

过滤器可以定义全局或局部。

定义全局过滤器：

<div id="app">
    <h3>{{ phone | phoneCrypt }}</h3>
</div>
<script>
    // 参数1：过滤器的名称，可以随意起名
    // 参数2：回调函数，回调函数中的参数最少要有一个，第1位参数，永远指向为要过滤的数据
    Vue.filter('phoneCrypt', value => {
        return value.slice(0, 3) + '~~~~' + value.slice(7)
    })
    const vm = new Vue({
        el: '#app',
        data: {
            phone: '13523235235'
        }
    })
</script>

上面的全局过滤器的回调函数中只有一个参数，我们还可以定义多个参数：

<div id="app">
    <!-- 这里传的第一个参数,对应全局过滤器的回调函数中定义的第二个参数 -->
    <h3>{{ phone | phoneCrypt('!!!!') }}</h3>
</div>
<script>
    Vue.filter('phoneCrypt', (value, salt = '****') => {
        return value.slice(0, 3) + salt + value.slice(7)
    })
    const vm = new Vue({
        el: '#app',
        data: {
            phone: '13523235235'
        }
    })
</script>

定义局部过滤器：

<div id="app">
    <h3>{{ phone | phoneCrypt('!!!!') }}</h3>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            phone: '13523235235'
        },
        // 局部过滤器
        filters:{
            phoneCrypt(value, salt = '****'){
                return value.slice(0, 3) + salt + value.slice(7)
            }
        }
    })
</script>

到此这篇关于Vue计算属性与侦听器和过滤器超详细介绍的文章就介绍到这了,更多相关Vue计算属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue3计算属性和异步计算属性方式

目录一.简要介绍二.计算属性核心源码三.异步计算属性核心源码一.简要介绍不论是计算属性,还是异步计算属性,都是依托于Vue3整体的响应式原理实现的.其核心依旧是ReacetEffect类.如果对响应式原理不清楚,建议先看响应式原理章节. 计算属性和常规的动态响应区别在于它不会主动的去执行ReacteEffect所关联的回调方法,而是用一个标记来表示当前的值是否有改变,如果有改变,则重新调用回调方法获取,如果没改动,则直接获取上次计算的值. 二.计算属性核心源码 export type
vue中计算属性和方法的区别及说明

目录 vue计算属性和方法区别区别 vue向计算属性传递参数 vue计算属性和方法区别当我们实现翻转字符串的业务逻辑时,使用插值表达式打码如下: <div id="app"> <div>{{msg}}</div> <div>{{msg.split('').reverse().join('')}}</div> </div> 为了将复杂了业务逻辑便于管理,使得不显得杂乱无章,我们使用计算属性: <div id
Vue3侦听器的实现原理详情

目录侦听响应式对象侦听属性值侦听获取新值和旧值实现效果前言: 本篇内容基于Vue3计算属性是如何实现的实现. 侦听响应式对象前面我们聊到计算属性,它可以自动计算并缓存响应式数据的值.而如果我们仅需要在响应式数据变化时,执行一些预设的操作,就可以使用watch侦听器.我们还是先来实现一个最简单的例子,然后来一点一点扩充它. const data = {foo: 1} const obj = reactive(data) watch(obj, () => { console.log('o
Vue计算属性与监视属性实现方法详解

目录一.计算属性 1.插值语法实现 2.通过方法实现 3.通过计算属性二.监视属性三.深度监视一.计算属性在开发中,可以有这样的需求,在属性(date)中,有fistName和lastName两个属性,需要将两个属性拼接起来,这种需求也很简单,有以下实现方式 1.插值语法实现直接在body中将两个数据拼接 <div id="root"> 姓:<input type="text" v-model="fistName"&
Vue计算属性与侦听器和过滤器超详细介绍

目录 1. 计算属性 1.1 使用方法 1.2 案例-购物车合计使用计算属性 2. 侦听器 3. 过滤器 1. 计算属性 1.1 使用方法概述: 模板中放入太多的逻辑会让模板过重且难以维护,使用计算属性可以让模板变得简洁易于维护.计算属性是基于它们的响应式依赖进行缓存的,计算属性比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化. 计算属性定义在Vue对象中,通过关键词computed属性对象中定义一个个函数,并返回一个值
vue 计算属性和侦听器的使用小结

1. 计算属性和侦听器 1.1 计算属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"
Vue学习笔记之计算属性与侦听器用法

本文实例讲述了Vue计算属性与侦听器用法.分享给大家供大家参考,具体如下: vue之所以加载速度非常块,是因为在数据改变时,它并不是将所有组件都刷新,而是在重用代码的基础上对发生改变的地方进行渲染.同时,还得益于计算属性的使用: 1.计算属性像绑定普通属性一样在模板中绑定计算属性.例如reverseName属性依赖于firstName和lastName,当firstName或lastName发生改变时,依赖于它的 reverseName 也会更新. 利用函数方法也可以实现类似的效果,不同的是计
计算属性和侦听器详情

目录 1.计算属性 1.1 基础例子 1.2 计算属性缓存 vs 方法 1.3 计算属性 vs 侦听属性 1.4 计算属性的 setter 2.侦听器 1.计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须
深入浅析Vue.js计算属性和侦听器

一. 概述计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于
详解Vue3 中的计算属性及侦听器

目录计算属性缓存 getter 和 setter 侦听器配置选项其它写法计算属性我们知道,在模板中可以直接通过插值语法显示一些data中的数据,但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示在模板中使用表达式,可以非常方便的实现,但是设计它们的初衷是用于简单的运算,在模板中放入太多的逻辑会让模板过重和难以维护,并且如果多个地方都使用到,那么会有大量重复的代码所以我们希望将业务逻辑和UI界面进行分离,其中一种方式就是将逻辑抽取到一个met
vue中的计算属性和侦听属性

计算属性计算属性用于处理复杂的业务逻辑计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性,只有依赖的那个值发生改变,他才会重新计算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo
Vue.js中关于侦听器（watch）的高级用法示例

Vue侦听器watch 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的.例如: <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> &l
Vue计算属性与监视(侦听)属性的使用深度学习

目录计算属性(computed) 监视属性(watch) 监视的两种方法 immediate选项深度监视计算属性(computed) 计算属性指的是通过一系列运算之后,最终得到一个值.这个动态计算出来的属性值可以被模板结构或methods方法使用,案例如下: <div id="root"> R:<input type="text" v-model.number="r"><br> G:<input t
深入了解Vue3中侦听器watcher的实现原理

目录 watch API 的用法 watch API实现原理标准化source 构造回调函数创建scheduler 创建effect 返回销毁函数异步任务队列的设计异步任务队列的创建异步任务队列的执行检测循环更新优化:只用一个变量 watchEffect 注册无效回调函数总结在平时的开发工作中,我们经常使用侦听器帮助我们去观察某个数据的变化然后去执行一段逻辑. 在 Vue.js 2.x 中,你可以通过 watch 选项去初始化一个侦听器,称作 watcher: export d