uniapp通过watch监听和computed的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp通过watch监听和computed的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 普通监听一（无法监听到第一次绑定的变化）

当值第一次绑定的时候，watch不会执行监听函数，只有当值改变的时候才会执行

<input type="text" v-model="length"/>  
//监听  长度length值发生变化时触发
watch: {
    length (newLength, oldLength) {
        console.log(newLength)
    }
}

2. 普通监听二（可以监听到第一次绑定的变化）

如果要让第一次绑定的时候执行监听函数，则需要把 immediate设置为true

<input type="text" v-model="length"/>  
//监听  长度length值发生变化时触发
watch: {
    length: {
        handler (newLength, oldLength) {
            console.log(newLength)
        },
        immediate: true
    }
}

3. 深度监听（可监听对象内属性变化）

如果要监听对象内部属性，需要把 deep设置为true

<input type="text" v-model="students.name" />
data (){
    return {
        students: {name:'小明'}
    }
},
watch: {
    students: {
        handler(newName, oldName) {
            console.log(newName)
        },
        immediate: true,
        deep: true
    }
}

4. 监听多个数据( 通过computed )

computed适合对多个变量或者对象进行处理后返回一个结果值，也就是多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

computed:{
	userInfo(){
		const { username, password } = this
		return { username, password }
	},
},
watch:{
	  userInfo: function (e) {
		  console.log(e); // 如果用户数据改变时打印新数据
	},
},

5. computed的介绍与应用

定义：一个计算属性，计算属性可用于快速计算视图（View）中显示的属性
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理

// 计算面积
<template>
	<view>
		<view
			长度:<input v-model="length" type="text"></input>
		</view>
		<view>
			宽度:<input v-model="width" type="text"></input>
		</view>
		<view>
			面积:<input v-model="areas" type="text"></input>
		</view>
 
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				length: '',
				width: ''
			}
		},
		computed: {
			areas: function() {
				return this.length * this.width // 未在data里声明，可直接进行双向绑定到 area
			}
		},
	}
</script>