9.VUE的计算属性方法和侦听器

最新推荐文章于 2023-06-30 21:48:31 发布

前端杨小白

最新推荐文章于 2023-06-30 21:48:31 发布

阅读量115

点赞数 2

分类专栏： VUE学习笔记

本文链接：https://blog.csdn.net/yangwqi/article/details/107933476

版权

VUE学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

计算属性：computed:{};内置缓存【 fullName依赖了两个变量firstName和lastName 当fullName依赖的变量没有发生任何变化时计算属性不会重新计算而是直接使用上一次的计算结果】提高性能计算属性直接通过属性名就可以使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 模板上有处理逻辑：希望模板只用于显示，不处理逻辑 -->
    <!-- {{firstName+"."+lastName}} -->
    {{fullName}}
    {{age}}
</div>
<script>
var vm=new Vue({
    el:'#app',
    data:{
        firstName:"Dell",
        lastName:"Lee",
        age:28
        // fullName:"Dell.Lee",//数据冗余
    },
    // 计算属性：让数据不产生冗余且显示fullName【计算属性直接通过属性名就可以使用】
    computed:{
        // fullName的值是一个函数 通过计算获得fullName
        fullName:function(){
            console.log("计算了一次")
            // 返回计算结果
            return this.firstName+"."+this.lastName
        }
    }
})
</script>
</body>
</html>

方法： methods:{};方法要通过属性名()调用但方法编写代码不如计算属性有效没有缓存机制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{fullName()}}
    {{age}}
</div>
<script>
var vm=new Vue({
    el:'#app',
    data:{
        firstName:"Dell",
        lastName:"Lee",
        age:28
    },
    methods:{
        // 定义一个fullName方法
        fullName:function(){
            console.log("计算了一次")
            return this.firstName+"."+this.lastName
        }    
    }
})
</script>
</body>
</html>

侦听器：内置缓存【 fullName依赖了两个变量firstName和lastName VUE一直在监听着firstName和lastName的变化当firstName和lastName没有变化 fullName就不会被执行】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{fullName}}
    {{age}}
</div>
<script>
var vm=new Vue({
    el:'#app',
    data:{
        firstName:"Dell",
        lastName:"Lee",
        fullName:"Dell.Lee",
        age:28
    },
    watch:{
        // 侦听firstName的改变
        firstName:function(){
            console.log("firstName计算了一次")
            this.fullName=this.firstName+"."+this.lastName
        },
        // 侦听lastName的改变
        lastName:function(){
            console.log("lastName计算了一次")
            this.fullName=this.firstName+"."+this.lastName
        }    
    }
})
</script>
</body>
</html>

watch和computed：两者都具有缓存机制但watch的语法比computed复杂所以一个功能既可以通过watch实现又可以通过methods实现还可以通过computed实现优先推荐使用computed：简洁且性能高

计算属性的setter和getter

getter方法：通过其他的值计算出一个新值

setter方法：通过设置值改变它相关联的值而改变了它相关联的值后又会引起fullName的重新计算页面又会被重新渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性的setter和getter</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 先去data找fullName 没找到回去computed中找 找到后在视图上展示 -->
    {{fullName}}
</div>
<script>
var vm=new Vue({
    el:'#app',
    data:{
        firstName:"Dell",
        lastName:"Lee",
    },
    computed:{
        // fullName(){
        //     return this.firstName+"."+this.lastName
        // }
        // 当调用差值表达式读计算属性的内容时 会调用get方法
        fullName:{
            // 当获取fullName属性值时会被执行
            get(){
                return this.firstName+"."+this.lastName
            },
            // 当设置fullName属性值时set方法会被执行：接收外部传来的value【设置的值】
            set(value){
                var arr=value.split(" ");
                // computed的特性：依赖的值firstName和lastName发生变化时会被重新计算
                this.firstName=arr[0];
                this.lastName=arr[1];
                console.log("set：",value)
            }
        }
    }
})
</script>
</body>
</html>

前端杨小白

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
9.VUE的计算属性方法和侦听器

计算属性：computed:{};内置缓存【 fullName依赖了两个变量firstName和lastName 当fullName依赖的变量没有发生任何变化时计算属性不会重新计算而是直接使用上一次的计算结果】提高性能计算属性直接通过属性名就可以使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性</title&
复制链接

扫一扫