计算属性、侦听器

最新推荐文章于 2024-05-30 16:11:37 发布

伪成年_young

最新推荐文章于 2024-05-30 16:11:37 发布

阅读量92

点赞数

分类专栏： vue 文章标签： vue知识

本文链接：https://blog.csdn.net/u012552674/article/details/100164096

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的计算属性(computed)和侦听器(watch)的使用方法。计算属性用于根据其他数据动态计算结果，而侦听器则用于响应数据变化并执行特定操作。文章通过实例展示了如何利用这些特性提高应用性能。

摘要由CSDN通过智能技术生成

计算属性：computed
使用方法：

<div id="app">
	{{result}}
</div>
<script>
export default {
    el: '#app',
    data: {
        first: 1,
        last: 2
    },
    computed: {
    	// 相当于data中多了一个result属性，只是有computed计算所得
        result: function(){
            return +this.first + +this.last;
        }
    }
}
</script>

computed会监控函数内部的其他变量，当其中一个变量值发生改变是，会重新计算返回新的变量值。

侦听器：watch

作用：watch属性可以监听摸个变量的变化，该变量发生变化时会执行对应的处理

<div id="app">
    <input v-model="first"/> + <input v-model="last"/> 結果: {{ result }}
</div>
--------------------------------------------------------------------------------
<script>
    export default {
        el: '#app',
        data: {
            first: 0,
            last: 0,
            result: 0
        },
        watch: {
            first: function(val){
                this.result = +val + +this.last;
            },
            last: function(val){
                this.result = this.first + +valt;
            },
        }
    }
</script>

watch深度监听对象

作用：深度监听是针对对象内部的对象发生改变时使用。这里处理方式和普通监听不同，普通监听通过函数来处理，深度监听使用对象方式，对象下两个属性deep，handler

监听方式：

watch: {
    [需要监听的数据]: {
        // 声明了使用深度监听
        deep: true, 
        // 处理函数，val是当前数据， oldVal是数据修改前的值
        handler: function(val, oldVal){ 
        }
    }
}
//案例：
watch:{
    //普通的watch监听
    a: function(val, oldVal){
        console.log("a: "+val, oldVal);
    },
	//深度监听，可监听到对象的变化
	b:{
		deep:true,
		handler: function (val, oldVal) {
			console.log("b.c: "+val.c, oldVal.c);
		},
    }
}