[JavaScript知识库]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的介绍与应用

1. 定义：一个计算属性，计算属性可用于快速计算视图（View）中显示的属性
2. 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>

长度和宽度的数据改变，面积就会改变。也就是说使用computed会自动执行计算函数，计算出面积。