uniapp通过watch监听和computed的使用(uniapp监听网络状态)

uniapp通过watch监听和computed的使用 1. 普通监听一（无法监听到第一次绑定的变化）

推荐整理分享uniapp通过watch监听和computed的使用(uniapp监听网络状态)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp事件监听,uniapp chat,uniapp怎样监听滑动事件,uniapp全局监控方法,uniapp webview 监听请求,uniapp chat,uniapp webview 监听请求,uniapp webview 监听请求,内容如对您有帮助，希望把文章链接给更多的朋友！

当值第一次绑定的时候，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 } = thisreturn { username, password }},},watch:{ userInfo: function (e) { console.log(e); // 如果用户数据改变时打印新数据},},5. computed的介绍与应用定义：一个计算属性，计算属性可用于快速计算视图（View）中显示的属性computed用来监控自己定义的变量，该变量不在data里面