2.3Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3-基础-Vue进阶

Vue方法、计算属性及监听器

在vue中处理复杂的逻辑的时候，我们经常使用计算属性、方法及监听器。

1. methods：方法：它们是挂载在Vue对象上的函数，通常用于做事件处理函数，或自己封装的自定义函数。

2. computed：计算属性：在Vue中，我们可以定义一个计算属性，这个计算属性的值，可以依赖于某个data中

的数据。或者说：计算属性是对数据的再加工处理。

1. watch：监听器：如果我们想要在数据发生改变时做一些业务处理，或者响应某个特定的变化，我们就可以通

过监听器，监听数据的变化，从而做出相应的反应。

computed 计算属性

计算属性是根据依赖关系进行缓存的计算，并且只在需要的时候进行更新。

    原数据：{{msg}} 

    新数据：{{reversedMsg}}


    Vue.createApp({
        data() {
            return {
                msg: 'hello world!'
            }
        },
        computed:{
            reversedMsg(){
            // 反转操作
                return this.msg.split('').reverse().join('');
            }
        }
    }).mount('#app');

一个案例：根据商品数量修改总价

    商品名称：小米手机； 数量：
    -{{quantity}}+
    

    总价：{{total}}


    Vue.createApp({
        data() {
            return {
                quantity: 1
            }
        },
        computed:{
            total(){
                return this.quantity*100;
            }
        },
        methods:{
            add(){
                this.quantity++;
            },
            sub(){
                this.quantity--;
            }
        }
    }).mount('#app');

另一个案例：对数据进行过滤处理。

    {{newMoney}}


    Vue.createApp({
        data() {
            return {
                money: 1000
            }
        },
        computed:{
            newMoney(){
                return this.money + '￥';
            }
        },
    }).mount('#app');

methods 方法

在使用vue的时候，可能会用到很多的方法，它们可以将功能连接到事件的指令，甚至只是创建一个小的逻辑就像

其他函数一样被重用。接下来我们用方法实现上面的字符串反转。

    {{msg}} 

    {{reversedMsg()}}


    Vue.createApp({
        data() {
            return {
                msg: 'hello world!'
            }
        },
        methods:{
            reversedMsg(){
                return this.msg.split('').reverse().join('');
            }
        }
    }).mount('#app');

虽然使用computed和methods方法来实现反转，两种方法得到的结果是相同的，但本质是不一样的。

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变的时候才会重新求值，这就意味着 只要message还没有发生改变，多次访问reversedMessage计算属性立即返回的是之前计算的结果，而不会再次执 行计算函数。

而对于methods方法，只要发生重新渲染，methods调用总会执行该函数。

如果某个computed需要的遍历一个极大的数组和做大量的计算，可以减小性能开销，如果不希望有缓存，则用 methods。

watch 监听器

watch能够监听数据的改变。监听之后会调用一个回调函数。 此回调函数的参数有两个：

1. 更新后的值（新值）

2. 更新前的值（旧值）

监听基本数据类型

下面使用watch来监听商品数量的变化。如果商品数量小于1，就重置成上一个值。

    商品名称：小米手机； 数量：
    -{{quantity}}+
    

    总价：{{total}}


    Vue.createApp({
        data() {
            return {
                quantity: 1
            }
        },
        computed:{
            total(){
                return this.quantity*100;
            }
        },
        methods:{
            add(){
                this.quantity++;
            },
            sub(){
                this.quantity--;
            }
        },
        watch:{
            quantity(newVal,oldVal){
                this.quantity = newVal{goods.name}}； 数量：
    {goods.quantity}}{total}}
{goods.name}}； 数量：
    {goods.quantity}}{total}}

        性别：
        爱好：
        国籍：
        个人简介：
        {num}} {num+1}} 

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。