AI专业者开发社区 1 号成员
  •  0 回帖  •  10 浏览  •  4 个月前
 

Vue中watch的简单应用

Vue.js 有一个方法 watch，它可以用来监测 Vue 实例上的数据变动。

如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。

 

下面写两个 demo，参考 demo 来了解一下

demo1

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {demo(val) {
        this.value = this.demo;
      }
    }
  };
</script>

上面这个就浅显易懂了，通过 watch 来直接监测 demo，如果 demo 的值变化，value 的值也会跟着一起变化。

 

demo2

 

<template>
  <div>
    <el-input v-model="demo.name"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: {
          name: ''
        },
        value: ''
      };
    },
    computed: {newName() {
        return this.demo.name;
      }
    },
    watch: {
      newName(val) {
        this.value = val;
      }
    }
  };
</script>

 

上面这个例子，如果 watch 监测的是一个对象的话，直接使用 watch 是不行的，此时我们可以借助于 computed 计算属性来完成。

 

demo3

 

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

<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 方法来进行数据监测
</script>
</body>

 

数组的变化，不需要深度 watch。

 

嗯，就酱 ~