Vue学习笔记day03

本文探讨了Vue.js中计算属性、监听属性与methods的区别,计算属性用于处理复杂运算并提供缓存,监听属性用于数据变化时触发回调,而methods定义的是可执行的操作。理解这些概念有助于提升代码组织和性能优化。
摘要由CSDN通过智能技术生成

一、计算属性

<!-- 复杂运算 -->
<div>{{message.split('').reverse().join('')}}</div>
<!-- 计算属性代替复杂运算 -->
<div>{{reverseMessage}}</div>
computed: {
    <!-- 计算属性的getter -->
    reverseMessage: function () {
        return this.message.split('').reverse().join('');
    }
}

模板内使用js表达式是很方便的,设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以,对于任何复杂逻辑,都应当使用计算属性。

<div id="root">
        <!-- 组合姓-名 -->
        <h2>计算属性的基本使用</h2>
        <hr>
        姓:<input type="text" v-model='firstname'><br>
        名:<input type="text" v-model='lastname'><br>
        全名是:{{fullname}}
    </div>
const vm = new Vue({
        el:'#root',
        data:{
            firstname:'凯文',
            lastname:'Durant'
        },
        // 用来存放计算属性
        computed:{
            fullname:{
                //get什么作⽤:当有⼈读取fullName的时候,get就会被调⽤,并且返回值会作为fullName的值
               //get什么时候调⽤:1.初次读取fullName时 2.所依赖的数据发⽣变化的时候
                get(){
                    return this.firstname+'---'+this.lastname
                },
                //set什么时候调⽤:当fullName被修改时
                set(value){
                    let arr = value.split('-')
                    this.firstname = arr[0]
                    this.lastname = arr[1]
                }
            }
        }
    })

在这里插入图片描述
在这里插入图片描述
计算属性也可以通过简写来表达,当确定了计算属性,不需要做修改操作时用简写。

computed: {
            // 简写形式(当确定了计算属性不会再被修改的时候)
            fullname() {
                return this.firstname+'-'+this.lastname
            }
        }

在这里插入图片描述
虽然可以使用方法达到和计算属性同样的效果,但是计算属性有以下优点:

  • 属性调用:
    1 .computed定义的方法,我们是以属性访问的形式调用,{{computedTest}}
    2 .methods定义的方法,我们必须要加上()来调用,{{methodTest()}}
  • 缓存功能:
    计算属性具有缓存:只有当计算属性所依赖的属性发生改变时,才会重新去计算
    methods不会被缓存:方法每次都会去重新计算结果。
  • 缓存好处:
    相比大家都知道HTTP缓存,其核心作用就是对一些服务端未更新的资源进行复用,避免一些无谓的请求,优化了用户的体验。

二、监听属性

Vue的watch属性可以用来监听data属性中数据的变化。

<div id="app">
 <h2>今天的天⽓真{{info}}</h2>
 <button @click='changeWeather'>切换天⽓</button>
 </div>
new Vue({
        el:'#app',
        data:{
            isHot:true
        },
        methods: {
            change(){
                this.isHot = ! this.isHot
            }
        },
        // 监听器
        watch:{
            isHot:{
                // 在isHot变化的时候调用
                handler(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            }
        }
    })

在这里插入图片描述
监听属性watch
1.当被监听的属性变化时,回掉函数⾃动执行,进行相关操作
2.监听的属性必须存在,才能进行监听
3.监听的两种写法:
1)new Vue是传⼊watch配置
2)通过vm.$watch配置

三、methods,watch,computed的区别

1 . computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;
2 . methods 方法表示一个具体的操作,主要书写业务逻辑;
3 . watch 一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是 computed 和 methods 的结合体;


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值