Vue-计算属性和属性监听器

H5_ljy

已于 2022-09-05 16:49:05 修改

阅读量466

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-09-05 02:26:04 首次发布

本文链接：https://blog.csdn.net/qq_56973906/article/details/126687618

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章目录

什么是计算属性
- 计算属性和方法的区别:
什么是属性监听器
- 案例:实现歌曲试听时的进度条

什么是计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。
在模板中放入太多的逻辑会让模板过重且难以维护,也就是当逻辑比较复杂时，应该使用计算属性。

如何使用？
把computed中的方法当做属性使用,会返回一个数据供使用:
比如当我们计算用户多久前发表的评论时:

   <script src='https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
</head>
<style>
    .p1 {
        font-size: 14px;
    }
    .p2 {
        font-size: 12px;
        color: #939393;
    }
    b {
        font-size: 14px;
    }
</style>
<body>
    <div id="app">
        <div class="div2" v-for="(item, index) in user" :key="index">
            <b>{{item.name}}</b>
            <p class="p1">{{item.posted}}</p>
            <P class="p2">{{postedTime(item.postedtime)}}</P>
        </div>
    </div>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                //用户信息
                user: [{
                    name: "LJY",
                    posted: "用户一发表的",
                    postedtime: "2022-9-4 22:42"
                }, {
                    name: "jack",
                    posted: "用户二发表的",
                    postedtime: "2022-8-4 22:42"
                }]
            },
            methods: {
                 //转换日期格式
                getTime(myDate) {
                    let M = myDate.getMonth() + 1 + '-'
                    let D = myDate.getDate() + ' '
                    let h = myDate.getHours()
                    let m = myDate.getMinutes()
                    if (h < 10) {
                        console.log(1)
                        h = '0' + h
                    }
                    if (m < 10) {
                        m = '0' + m
                    }
                    return M + D + h + ':' + m
                },
            },
            computed: {
                //计算多久发布的
                //因为计算属性直接调用传值会报错，因此使用闭包形式传值
                postedTime(){
                function postedTime2(date) {
                        let newDate = new Date()
                        let oldDate = new Date(date)
                        let time = newDate - oldDate
                        if (time / 1000 / 60 < 60) {
                            return Math.floor(time / 1000 / 60) + '分钟前发布'
                        } else if (time / 1000 / 60 / 60 < 24) {
                            return Math.floor(time / 1000 / 60 / 60) + '小时前发布'
                        } else if (time / 1000 / 60 / 60 > 24 && time / 1000 / 60 / 60 < 48) {
                            return '昨天发布'
                        } else {
                            return this.getTime(oldDate)
                        }
                    }
                    return postedTime2
                }                
            }
        })
    </script>
</body>

在这里插入图片描述
还可以通过对象的set和get形式

    <div id="app">
        <input type="text" v-model="input1">
        <button @click="fn">点击修改value值</button>
    </div>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                //输入框变量
                input1:null,
            },
            methods: {
                fn(){
                    this.value="666"
                }
            },
            computed: {
                //与另一种写法不同属性名不能与data中的属性同名
                value:{
                    //用法跟对象set和get一样,当我修改value时就会执行set
                    set(value){
                       this.input1=value
                    },
                    get(){
                        return this.input1
                    }
                }
                
            }

        })

在这里插入图片描述
计算属性中的set和get属性跟普通对象中的用法差不多,
set用来设置的，get用来获取的。

计算属性和方法的区别:

计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算，
提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性
methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍
方法常常是作用的事件使用,计算属性常常是动态计算结果时使用。

什么是属性监听器

属性监听器（watch）也是vue实例的一个属性，其主要就是用来监听元素值的变化从而来做各种相应的处理。
简单来说就是：当侦听器监听的属性发生变化时,就会调用watch中对应的方法。
格式要求：watch:{name(){}}中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性
比如：

<script src='https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script> //引入vue.js文件
<div id="app">
        <p>{{name}}</p>
        <button @click="fn">点我修改name</button>   //点击修改name值
    </div>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                name:'LJY'
            },
            methods: {
                fn(){
                    this.name="LJY666"
                }
            },
            watch:{
               name(){
                    console.log("修改了name值")   //修改了name值后猝发这个函数
               }
            }
        })
    </script>

点我点击修改后
在这里插入图片描述

案例:实现歌曲试听时的进度条

    <script src='https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
</head>
<style>
    .div1{
       width: 400px;
       height: 20px;
       background-color: rgb(177, 172, 172);
       margin-top: 50px;
       border-radius: 10px;
    }
    .div2{
       width: 30px;
       height: 30px;
       border-radius: 50%;
       background-color: aqua;
       position: relative;
       left: 0px;
       top: -5px;
    }
    button{
        margin-top: 10px;
        border-radius: 10px;
        padding: 5px;
        background-color: white;
    }
</style>
<body>
    <div id="app">
        <div>
            <span>进度条</span>
            <span>{{timelang-time|timerparser}}</span>
        </div>
        <button @click="fn">开始</button>
        <div class="div1">
             <div class="div2" :style="{left:n}"></div>
        </div>
    </div>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                n:0,
                time:0,
                maxwidth:370,
                timelang:240,  //时长为四分钟
            },
            methods: {
                fn(){
                    this.timer=setInterval(()=>{
                        this.time += 0.1
                    },100)
                }
            },
            watch:{
               time(value){
                //计算时间与进度条的比例
                 this.n=this.maxwidth*value/this.timelang+"px";
                 //当试听时间超过1分钟暂停
                 if(value>=60){
                    clearInterval(this.timer)
                    alert('试听结束')
                 }
               }
            },
            filters:{
                timerparser(arg){
                    //倒计时数据处理
                        return ` ${parseInt(arg / 60).toString().padStart(2, "0")}:${parseInt(arg % 60).toString().padStart(2, "0")}`
                }
            }
        })
    </script>

为了直观侦听结束时，只截取了3分14秒时
请添加图片描述
小结：
watch:{xxx(){}}中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性
当侦听器监听的属性发生变化时,就会调用watch中对应的方法
侦听器属性，比计算属性计算效率消耗大