这次给大家带来在vue中watch方法使用详解，在vue中watch方法使用的注意事项有哪些，下面就是实战案例，一起来看一下。
watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来
当vue视图中的数据变化时, 关联的函数会被执行
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>监听方法watch的使用</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<p id="root"></p>
<script>
var vm = new vue({
el: #root,
data: { obj: {name: zhaoolee, age: 12} , tel:6666666},
template: `<p><p>姓名: {{obj.name}}</p>
<p>电话: {{tel}}</p>
<input type="text" v-model="obj.name">
<input type="text" v-model="tel"></p>`,
watch: {
obj: {
handler(){
console.log(obj被改变);
},
// 页面加载之初先执行一次handle
immediate: true,
// 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能)
deep: true
},
obj.name: {
handler(){
console.log(=>obj.name被改变);
}
},
tel:{
handler(){
console.log(tel被改变);
}
}
}
})
</script>
</body>
</html>
对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() ;
//使用官方vue-cli脚手架书写
<template>
//观察数据为字符串或数组
<input v-model="example0"/>
<input v-model="example1"/>
/当单观察数据examples2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数
<input v-model="example2.inner0"/>
</template>
<script>
export default {
data(){
return {
example0:,
example1:,
example2:{
inner0:1,
innner1:2
}
}
},
watch:{
example0(curval,oldval){
console.log(curval,oldval);
},
example1:'a'，//值可以为methods的方法名
example2:{
//注意：当观察的数据为对象或数组时，curval和oldval是相等的，因为这两个形参指向的是同一个数据对象
handler(curval,oldval){
conosle.log(curval,oldval)
},
deep:true
}
},
methods:{
a(curval,oldval){
conosle.log(curval,oldval)
}
}
}
</script>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue项目引入icon步骤详解
js怎么传递数组参数
以上就是在vue中watch方法使用详解的详细内容。