精华内容
下载资源
问答
  • 这次给大家带来在Vue中watch方法使用详解,在Vue中watch方法使用的注意事项有哪些,下面就是实战案例,一起来看一下。watch本身很容易理解, watch负责将视图的数据与某个函数关联起来当Vue视图的数据变化时, ...

    这次给大家带来在Vue中watch方法使用详解,在Vue中watch方法使用的注意事项有哪些,下面就是实战案例,一起来看一下。

    watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来

    当Vue视图中的数据变化时, 关联的函数会被执行

    监听方法watch的使用

    var vm = new Vue({

    el: "#root",

    data: { obj: {name: "zhaoolee", age: 12} , tel:6666666},

    template: `

    姓名: {{obj.name}}

    电话: {{tel}}

    watch: {

    obj: {

    handler(){

    console.log("obj被改变");

    },

    // 页面加载之初先执行一次handle

    immediate: true,

    // 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能)

    deep: true

    },

    "obj.name": {

    handler(){

    console.log("=>obj.name被改变");

    }

    },

    tel:{

    handler(){

    console.log("tel被改变");

    }

    }

    }

    })

    对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ;//使用官方vue-cli脚手架书写

    //观察数据为字符串或数组

    /当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数

    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)

    }

    }

    }

    相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

    推荐阅读:

    Vue项目引入icon步骤详解

    js怎么传递数组参数

    展开全文
  • VUE中watch用法

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

    一、 watch是什么?

    监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值,用一个函数取代。

    简洁的说:watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

    二、watch的(三种)应用

    1、监听一个数据变化

    data(){

    return{

    val:'2'

    }

    },

    watch: {

    val: {

    handler(newVal, objVal) {

    console.log(11);

    },

    }

    }

    2、当监测为对象的时候(非数组情况),deep = true (对象内部的属性监听,也叫深度监听),包含handler方法和immediate(进入组件的时候,第一次并不会执行watch,是因为immediate 默认 false,当 immediate = true 的时候,进入组件会立即执行。并且可以监测到组件传递数据)

    watch: {

    'obj.name': {

    handler(newName, oldName) {

    // ...

    },

    deep: true,

    immediate: true

    }

    }

    版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

    展开全文
  • vue中watch的详细用法

    2020-12-21 02:35:11
    转自:https://www.cnblogs.com/baller/p/13396124.html在vue中,使用watch来响应数据的变化。watch的用法大致有三种。1. 常用用法new Vue({el: '#app',data: {name: '咸鱼'},watch: {name(newVal,oldVal) {// ...}}}...

    转自:https://www.cnblogs.com/baller/p/13396124.html

    在vue中,使用watch来响应数据的变化。watch的用法大致有三种。

    1. 常用用法

    new Vue({

    el: '#app',

    data: {

    name: '咸鱼'

    },

    watch: {

    name(newVal,oldVal) {

    // ...

    }

    }

    })

    直接写一个监听处理函数,当每次监听到 name 值发生改变时,执行函数。也可以在所监听的数据后面直接加字符串形式的方法名:

    watch: {

    name: 'nameChange'

    }

    2 .立即执行(immediate和handler)

    第一种用法watch有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

    比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。

    new Vue({

    el: '#app',

    data: {

    name: ''

    },

    watch: {

    name: {

    handler(newVal,oldVal) {

    // ...

    },

    immediate: true

    }

    }

    })

    监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;

    immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

    3 .深度监听

    当需要监听复杂数据类型(对象)的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。

    new Vue({

    el: '#app',

    data: {

    person: {id: 1, name: '咸鱼'}

    },

    watch: {

    person: {

    handler(newVal,oldVal) {

    // ...

    },

    deep: true,

    immediate: true

    }

    }

    })

    设置deep: true 则可以监听到person.name的变化,此时会给person的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:

    watch: {

    'person.name': {

    handler(newVal,oldVal) {

    // ...

    },

    deep: true,

    immediate: true

    }

    }

    这样只会给对象的某个特定的属性加监听器。

    数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。

    展开全文
  • Vue中watch的详细用法

    2021-01-20 23:49:35
    Vue中watch的详细用法 运用场景 当项目某个值发生变化时,想执行对应的方法或者时刻获取最新的值,此时就需要用到watch方法 常规用法 当值发生变化直接执行定义在methods的方法,这种写法,只有当值value发生...

    Vue中watch的详细用法
    运用场景
    当项目中某个值发生变化时,想执行对应的方法或者时刻获取最新的值,此时就需要用到watch方法

    常规用法
    当值发生变化直接执行定义在methods中的方法,这种写法,只有当值value发生变化时,才会执行方法,第一次默认绑定值时不会执行changeValue函数;

    data(){
    	return{
    		value:''
    	}
    }
      watch:{
          value:'changeValue' 
        },
      methods:{
        changeValue(){
          console.log('当value值发生变化时执行这个方法')
        }
      }
    
    

    2.使用immediate和handler方法,如果不写immediate属性,则跟第一种写法一样,value绑定默认值第一次不会执行,当加上immediate=true时,此时watch对value的默认值也进行了监听,在初始绑定值时也执行下面的方法

    data(){
    	return{
    		value:''
    	}
    }
      watch:{
          'value':{
          		immediate: true,
    			handler(newValue,oldValue){
    				this.changeValue();
    			}
    		} 
        },
      methods:{
        changeValue(){
          console.log('当value值发生变化时执行这个方法')
        }
      }
    
    

    .深度监听,有时候会遇到当value是个对象时,有多层数据结构,当下面层级的属性发生变化时,普通写法watch是监听不到变化,这时需要加上deep属性

    data(){
    	return{
    		value:''
    	}
    }
      watch:{
          'value':{
    	      immediate: true,
    	      deep: true,
    		  handler(newValue,oldValue){
    			this.changeValue();
    		  }
    		} 
        },
      methods:{
        changeValue(){
          console.log('当value值发生变化时执行这个方法')
        }
      }
    
    

    watch不仅仅只监听页面内定义的值的变化,还能监听props、vuex中状态值的变化。

    展开全文
  • 分类解析vue中watch的用法: 1)数据类型 2)deep immediate ** 1. 普通数据类型:** <input type="text" v-model="userName"/> //监听 当userName值发生变化时触发 watch: { userName (new...
  • vue中watch的使用写法

    2021-07-14 16:37:42
    watch的使用写法大致两种: 第一种:直接写一个监听处理函数,值是函数 watch: { cityName(newName, oldName) { // 直接书写函数就能为对象添加属性方法,函数名将被用作方法名,这里不能用箭头函数,因为箭头...
  • vue中watch以及handler

    2021-10-12 13:35:09
    handle:watch中需要具体执行的方法 deep:需要监听的数据的深度,一般用来监听对象中某个属性的变化,数组字符串一般不需要 immediate:在选项参数中指定 immediate: true将立即以表达式的当前值触发回调 <input ...
  • 通过对vue2.x的源码分析学习watch的实现
  • Vue中watch用法

    2020-12-24 17:21:19
    new Vue({ el: '#root', data: { return { form: { address: {adresscountryoption:'',adresscityoption:'',adresscountyoption:''}, place: {placecountryoption:'',placecityoption:'',placecountyoption:''...
  • Vue中watch监听的用法

    2021-03-18 17:42:05
    当firstName值变化时,watch监听到并且执行 <template> <div class="watch"> <p>FullName: {{ fullName }}</p> <p>FirstName: <input type="text" v-model="firstName" />&...
  • vue中watch监听的使用

    2021-04-25 16:23:44
    vue中watch监听 1. 通过 watch 监听 data 数据的变化,数据发生变化时,就会打印当前的值 watch: { data(val, value) { console.log(val) //变化之前的值 console.log(value) //变化之后的值 } } 2. 通过 ...
  • vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:new Vue({el: '#root',data: {cityName: 'shanghai'},watch: {cityName(newName, oldName) {// ...}}})直接写一个...
  • vue中watch的三种用法

    2021-05-06 08:36:36
    vue中watch的三种用法 在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法: 1 new Vue({ el: ‘#root’, data: { cityName: ‘shanghai’ }, watch: { cityName(newName...
  • vue中一般会用watch来监测Vue实例上的数据变动。 然后下面是列出的demo,大家可以看一下,针对参考~ demo1是基础watch用法,可以直接监听到数值的变化,监测的对象发生变化,那么val的值也会相应发生改变。 demo2...
  • created(){ if(this.$route.params && this.$route.params.id){ //从路径获取id值 const id =this.$route.params.id //调用根据id查询的方法 ... }else{//路径没有id //清空清单 ...
  • 通过props将list数据传过来后,通过watch监听变化,并通知变化赋值。 如上写法,值是都获得到了,但是报个错,所以还是要处理的。于是将数据打印了下 console.log(newVal[0][0]) //undefined //但是两个值,...
  • 但是在某些情况下,我们希望在代码逻辑监听某个数据的变化,这个时候就需要用侦听器watch来完成了; 侦听器的用法如下: 选项:watch 类型:{ [key: string]: string | Function | Object | Array} 例子 <body...
  • Vue中watch深度监听

    2021-10-19 20:58:07
    普通的监听 <input type="text" v-model="user.name"> <input type="text" v-model="user.age"> <script> export default { data(){ return { ... watch: { user(newVal, oldVal){
  • 请求接口的函数在mounted执行。业务逻辑写完后发现,页面在第一次加载时,接口没有数据,原因接口地址为空,即接口地址没有改变。 代码 created() { this.typeId = this.$route.params.id; console.log("this....
  • 项目,第一次进去数据不渲染,第二次才渲染。 watch: { 'detail':{ immediate: true, // immediate选项可以开启首次赋值监听 handler(newVal, oldVal) { console.log(newVal, oldVal) this.tableData = ...
  • 今天开发vue的时候,遇到了坑,网上查询,结合实践沉淀一下:在data里初始化了一个对象,然后,想要watch到对象的内部属性?data:function(){return {form:{name:''}}}具体代码如上所示,现在想要watch form.name这...
  • Vue中watch的使用

    2021-08-06 04:16:12
    vue中,使用watch来响应数据的变化。一、 watch是什么?监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值,用一个函数取代。简洁的说:watch的作用可以监控一个值的变换,并调用因为变化需要...
  • 1.场景:项目的需求是根据基金代码的变化去获取基金对应的信息还处理一些业务逻辑,watch ,但是如下图所示,在监听函数的新值和旧值是一样的 所以没有按需走相关代码逻辑,是否跟引用数据类型的指向有关?...
  • 一个组件内写了个编程路由,通过交互触发 this.$router.push({ name: "Result", query: { ...在接收参数的路由组件中watchwatch: { // 监视搜索词变化 "$route.query.title": { immediate: true,
  • vue中watch的使用

    2020-12-21 02:35:10
    watch定义方式如下:{[key: string]: string | Function | Object }即在watch中,键是一个字符串,它是被观测的对象。值可以是一个字符串,这个字符串是方法名。值还可以是一个函数,但不能使用箭头函数的形式,this...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,032
精华内容 25,612
关键字:

vue中watch

vue 订阅