VueJs $watch()方法总结！！

最新推荐文章于 2025-06-14 18:55:27 发布

转载最新推荐文章于 2025-06-14 18:55:27 发布 · 1.1k 阅读

本文介绍了一个使用Vue.js实现的数据监听示例，展示了如何通过v-model双向绑定数据，并利用watch监听数据变化，包括对象内部属性的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
<div id="app">
<input type="text" v-model="childrens.name"/>
<input type="text" v-model="lastName"/>
</div>
</body>

<script type="text/javascript">
var vm = new Vue( {
el: '#app',
data: {
childrens: {
name: '小强',
age: 20,
sex: '男'
},
tdArray:["1","2"],
lastName:"张三"
},
watch:{
childrens:{
handler:function(val,oldval){
console.log(val.name)
},
deep:true//对象内部的属性监听，也叫深度监听
},
'childrens.name':function(val,oldval){
console.log(val+"aaa")
},//键路径必须加上引号
lastName:function(val,oldval){
console.log(this.lastName)
}
},//以V-model绑定数据时使用的数据变化监测
} );
vm.$watch("lastName",function(val,oldval){
console.log(val)
})//主动调用$watch方法来进行数据监测</span>
</script>

</html>