精华内容
下载资源
问答
  • 2020-05-18 16:15:51

    一、 watch是什么?

    监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值,用一个函数取代。
    简洁的说:watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

    二、应用

    **当watch检测对象/数组的情况

     

    <template>
        <div>
            <p>a: {
      {a}}</p>
            <p>a: <input type="text" v-model="a"></p>
        </div>
    </template>
    <script>
        export default {
            name: 'index',
            data(){
                return{
                   a:'2'
                }
            },
            watch: {
                a: {
                    handler(newVal, objVal) {
                            console.log(11);
                    },
                }
            }
        }
    </script>
    

    控制台打印如下

     

    更多相关内容
  • Vue中watch用法

    2021-03-30 15:59:37
    Vue中watch用法 我前端开发时看到同事使用到了watch,所以稍微提取了一下操作方法vue) 具体如下图: vue代码 账户名称:<el-input v-model="qqName" style="width: 10%"></el-input> 账户密码:...

    Vue中watch用法

    我前端开发时看到同事使用到了watch,所以稍微提取了一下操作方法(vue)
    具体如下图:


    vue代码

     账户名称:<el-input v-model="qqName" style="width: 10%"></el-input>
     账户密码:<el-input v-model="qqPwd" style="width: 10%"></el-input>
    

    vue中 data() {return {}} 中定义变量

    data() {
        return {
          qqName: "",
          qqPwd: "",
          	   }
           }
    

    Vue中watch{ }中定义

    watch: {
        //当变量值发生改变是进行调用
        qqName(newValue, oldValue) {
          console.log(
            "当变量值发生改变是进行调用oldValue",
            oldValue,
            "newValue:",
            newValue
          );
        },
        qqPwd(value) {
          console.log(value);
        },
      },
    

    效果

    在这里插入图片描述


    若要初始化就进行一次调用则可以改为:

     //页面渲染时就调用一次
         qqName: {
            handler(newValue, oldValue) {
            console.log("页面渲染时就调用一次oldValue", oldValue, "newValue:", newValue);
          },
            immediate: true
         },
    

    总结:

    方法说明
    变量名(参数1,参数2){ }参数1:更新后的数值; 参数2:更新前的数值;
    变量名(参数1){ }}参数1:新数值;
    展开全文
  • vue中watch使用

    千次阅读 2022-04-06 16:37:22
    watch是监听 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值。 基础用法 <template> <div> </div> </template> <script> export default { data(){ ...

    watch是监听 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值。

    基础用法

    <template>
      <div>
    
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return {
          alldata:1,
          shipStatusArr{
              name:"张三"
          }
        }
      },
      watch:{
        alldata(newVal,oldVal){
          console.log(newVal,oldVal)
        }
      },
    }
    </script>

    handle、immediate、deep(监听对象时必须用它)

    watch: {
        alldata(newVal,oldVal){
          console.log(newVal,oldVal)
        }
    }
    
    // handler方法和immediate属性
    // 基础用法中是值变化时候,watch才执行,我们想让值最初时候watch就执行就用到了handler和immediate属性
    watch: {
      alldata: {
        handler(newName, oldName) {
          console.log(newVal,oldVal)
        },
        // 代表在wacth里声明了a这个方法之后立即先去执行handler方法,如果设置了false,那么效果和上边例子一样
        immediate: true,
        deep: true   // 深度监听父组件传过来对象变化
      }
    }
    

    监听对象的某一个属性

    watch: {
        'shipStatusArr.name': function (newValue, oldVal) {
            console.log( newValue, oldVal )
        }
    }
    
    设置deep: true 则可以监听到shipStatusArr.name的变化,此时会给shipStatusArr的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性。
    这样只会给对象的某个特定的属性加监听器。
    

    展开全文
  • 本篇文章主要介绍了Vue.js 的 $watch使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue中watch用法详解

    2021-10-15 21:16:05
    基本用法: 当firstName值变化时,watch监听到并且执行 <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> ...

    基本用法:

    当firstName值变化时,watch监听到并且执行

    <div>
          <p>FullName: {{fullName}}</p>
          <p>FirstName: <input type="text" v-model="firstName"></p>
    </div>
     
    new Vue({
      el: '#root',
      data: {
        firstName: 'Dawei',
        lastName: 'Lou',
        fullName: ''
      },
      watch: {
        firstName(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        }
      } 
    })
    

    handler方法和immediate属性:

    上面的例子是值变化时候,watch才执行,我们想让值最初时候watch就执行就用到了handlerimmediate属性

    watch: {
      firstName: {
        handler(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法,如果设置了false,那么效果和上边例子一样
        immediate: true
      }
    }
    

    deep属性(深度监听,常用语对象下面属性的改变):

    <div>
          <p>obj.a: {{obj.a}}</p>
          <p>obj.a: <input type="text" v-model="obj.a"></p>
    </div>
     
    new Vue({
      el: '#root',
      data: {
        obj: {
          a: 123
        }
      },
      watch: {
        obj: {
          handler(newName, oldName) {
             console.log('obj.a changed');
          },
          immediate: true
        }
      } 
    })
    

    我们在在输入框中输入数据视图改变obj.a的值时,我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

    默认情况下 handler 只监听obj这个属性它的引用的变化,我们只有给obj赋值的时候它才会监听到,比如我们在 mounted事件钩子函数中对obj进行重新赋值:

    mounted: {
      this.obj = {
        a: '456'
      }
    }
    

    那么我们需要监听obj里的属性a的值呢?这时候deep属性就派上用场了:

    watch: {
      obj: {
        handler(newName, oldName) {
          console.log('obj.a changed');
        },
        immediate: true,
        deep: true
      }
    }
    

    这样的方法对性能影响很大,修改obj里面任何一个属性都会触发这个监听器里的 handler。我们可以做如下处理:

    watch: {
      'obj.a': {
        handler(newName, oldName) {
          console.log('obj.a changed');
        },
        immediate: true,
        // deep: true
      }
    }
    

    关于 watch的注销,实际开发中,watch会随着组件一并销毁。

    参考文章: https://www.jianshu.com/p/b70f1668d08f

    展开全文
  • Vue中watch的详细用法(三种)

    万次阅读 2021-11-23 11:36:13
    分类解析vue中watch用法: 1)数据类型 2)deep immediate ** 1. 普通数据类型:** <input type="text" v-model="userName"/> //监听 当userName值发生变化时触发 watch: { userName (new...
  • 主要介绍了vue 中使用 watch 出现了如下的报错信息的原因分析及解决方法,本文附有代码解决方案,非常不错,需要的朋友可以参考下
  • vue中watch用法

    万次阅读 2019-12-12 15:08:14
    一、首先确认watch是一个对象,一定要当做对象来用 1 2 ...或者是data的某个变量。  2、值:  ① 可以是【函数】:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形...
  • 假设有如下代码: ...new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: { firstName(newName, oldName) { this.fullName = newName + ' ' + this.lastName
  • vue3 watch用法

    千次阅读 2022-04-11 10:22:32
    import { ref, watch } from "vue" import { useRoute } from "vue-router" <script setup> const route = useRoute() const showPage = ref(false) watch( () => route.path, (val) => { if (val =...
  • vue watch 使用方法

    2021-11-02 22:19:35
    方法二:监听数据后面加字符串形式方法名,方法名在 methods 定义。 方法三:使用 immediate(立即)属性和 handler (处理者)方法,deep 深度监测。如果只需要监听对象的一个属性值,使用字符串形式监听对象...
  • vue中watch的详细用法

    2021-10-20 18:34:07
    watch一般有三种用法: 1.阉割版(简写) 语法: watch: { 侦听数据: function ( 新数据, 旧数据 ) { ----- 可以在此处进行操作 ------ } } 代码实例: <body> <div id="root"> <h2...
  • vue中使用watch来响应数据的变化。watch用法大致有三种。下面代码是watch的一种简单的用法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 主要介绍了Vue数据监听方法watch使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue 实例将会在实例化时调用 watch,遍历 watch 对象的每一个 属性。 示例: 滴哟 <template> <el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input...
  • Vue中watch的详细用法

    2022-05-31 15:43:52
    watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。简单来说就是,vue是数据双向绑定,当页面数据发生变化时,我们通过watch可以拿到变化前和变化后的值,之后做一...
  • Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。 在实例化时为每个键调用 $watch() ;  //观察数据为字符...
  • //在一个vue实例 new Vue({ el:"#myApp", data:{ num1:1, num2:2 }, methods:{}, watch:{ //这里两个属性,第一个值是变化后最新的值,第二个是变化前 num1(after,before){ this.num2 = after +1 }
  • vue3.0watch使用方法

    2022-05-25 20:09:08

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,108
精华内容 14,443
关键字:

vue中watch的用法