watch的用法

最新推荐文章于 2024-10-31 15:56:10 发布

原创最新推荐文章于 2024-10-31 15:56:10 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

vue学习专栏收录该内容

56 篇文章

订阅专栏

本文详细介绍了Vue.js中Watch特性的多种使用场景，包括基本的响应式数据监听、对象内部属性的深度监听、数组变化的监测以及通过Computed属性进行数据计算的方法。通过实例演示了如何在不同情况下有效利用Watch特性，提升前端开发效率。

watch的几种用法：
一、最常用的

<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(val) {
        this.value = this.demo;
      }
    }
  };
</script>

二、对象里面的数据变化，需要借助computed来计算

<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: {
          name: ''
        },
        value: ''
      };
    },
    computed: {
      newName() {
        return this.demo.name;
      }
    },
    watch: {
      newName(val) {
        this.value = val;
      }
    }
  };
</script>

三、数组的变化

<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>