精华内容
下载资源
问答
  • 主要介绍了js 实现watch监听数据变化的代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 下面小编就为大家分享一篇vue watch监听对象及对应值的变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch。 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁、逻辑更加清晰(其实就是嫌麻烦…)。 小程序...
  • 主要介绍了vue 子组件watch监听不到prop的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 主要介绍了vue.js使用watch监听路由变化的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 下面小编就为大家分享一篇使用watch监听路由变化和watch监听对象的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了AngularJS中watch监听用法,较为详细的分析了$watch的具体功能、相关参数用法与使用注意事项,需要的朋友可以参考下
  • 今天小编就为大家分享一篇vue1.0和vue2.0的watch监听事件写法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue开发之watch监听数组、对象、变量操作,结合实例形式分析了vue.js使用Watch针对数组、对象、变量监听相关操作技巧,需要的朋友可以参考下
  • watch监听

    千次阅读 2018-07-26 15:26:42
    1.watch监听普通变量 <div id="app"> <input type="text" v-model='name' /> </div> <script> new Vue({ el:'#app...

    1.watch监听普通变量

    <div id="app">
    			<input type="text" v-model='name' />
    		
    		</div>
    <script>
    		new Vue({
    				el:'#app',
    				data:{
    					name:'233',
    				},
    				watch:{
    					name(newValue,oldValue){
    						console.log(newValue)
    /*写一些函数调用方法,比如分页*/
    					},	
    				}
    			})
    			  
    		</script>

    然后在控制台就可以看见输入值得变化,在这里经常使用到的是,监听分页的点击然后进行分页请求数据。

    2.对象的监听,对象的监听需要开启深度监听deep:true

    <div id="app">
    			<input type="text" v-model=obj.age />
    		</div>
    <script>
    		new Vue({
    				el:'#app',
    				data:{
    					obj:{
    						age:'12',
    						sex:'男'
    					}
    				},
    				watch:{
    				'obj.age':{/*监听age的变化*/
    						handler(newValue,oldValue){
    							console.log(newValue)
    						}
    						
    					},
                     deep:true
    				}
    			})
    			  
    		</script>

    在这里注意如果监听的是对象的某个属性需要在监听时候加上‘ ’(例如文中的‘obj.age’)

    展开全文
  • 众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法,当被监听的数据的值改变...
  • Vue之watch监听的原理

    千次阅读 2020-10-16 15:34:36
    前言 vue选项中props、data、watch、methods、computed,其中props、data、computed都通过...对于选项watch,知道其作用是监听对应key做相关处理,之前一系列文章都没有关注watch背后的实现逻辑,这也是本文的目的。

    前言

    vue选项中props、data、watch、methods、computed,其中props、data、computed都通过Object.defineProperty进行数据拦截从而实现响应式。对于选项watch,知道其作用是监听对应key做相关处理,之前一系列文章都没有关注watch背后的实现逻辑,这也是本文的目的。

    watch实现逻辑

    首先通过vue官网的信息说明明确watch的使用方式以及注意点,如下:

    watch选项的类型:{ [key: string]: string | Function | Object | Array }

    键是需要观察的表达式,值是对应回调函数,可以是string类型函数名、函数、对象、数组(具体可看Vue官网Watch API)。

    watch是作为组件的选项,所以在源码中处理逻辑还是initState的处理。

    initState处理

    initState中watch具体处理逻辑如下:

    if (opts.watch && opts.watch !== nativeWatch) {
    	initWatch(vm, opts.watch);
    }
    

    其中有一个注意的逻辑是nativeWatch的比较,这是因为Firefox浏览中Object.prototype存在一个watch函数。

    initWatch处理

    watch选项的初始化处理逻辑如下:

    function initWatch (vm, watch) {
    	for (var key in watch) {
    		var handler = watch[key];
            if (Array.isArray(handler)) {
              for (var i = 0; i < handler.length; i++) {
                createWatcher(vm, key, handler[i]);
              }
            } else {
              createWatcher(vm, key, handler);
            }
        }
    }
    

    遍历watch中每一个key,调用createWatcher函数。其中针对回调函数是数组即多个函数处理程序的情况做处理。

    createWatcher函数
    // expOrFn参数即watch对应的key
    function createWatcher (
          vm,
          expOrFn,
          handler,
          options
        ) {
          if (isPlainObject(handler)) {
            options = handler;
            handler = handler.handler;
          }
          if (typeof handler === 'string') {
            handler = vm[handler];
          }
          return vm.$watch(expOrFn, handler, options)
    }
    

    实际上主要逻辑就是调用$wacth实例方法,同时针对回调函数的一些情况的处理:对象、字符串函数名。

    $watch处理逻辑

    Vue.prototype.$watch = function (
    	expOrFn,
        cb,
        options
    ) {
    	var vm = this;
        if (isPlainObject(cb)) {
        	return createWatcher(vm, expOrFn, cb, options)
        }
        options = options || {};
        options.user = true;
        var watcher = new Watcher(vm, expOrFn, cb, options);
        if (options.immediate) {
        	try {
            	cb.call(vm, watcher.value);
           	} catch (error) {
            	handleError(error, vm, ("callback for immediate watcher \"" + (watcher.expression) + "\""));
            }
         }
         return function unwatchFn () {
         	watcher.teardown();
         }
    };
    

    实际上$watch实例方法有3点主要逻辑点:

    • Watcher对象生成
    • immediate配置:实际上就是立即调用对应的回调函数
    • unwatch逻辑处理即取消watch监听

    那么watch是如何监听对应key,在key值变化时触发回调逻辑调用?

    逻辑在选项watch中watcher对象生成中

    涉及选项watch的Watcher构造函数逻辑如下:

    var Watcher = function Watcher (
      vm,
      expOrFn,
      cb,
      options,
      isRenderWatcher
    ) {
      // 其他代码省略
      // parse expression for getter
      if (typeof expOrFn === 'function') {
        this.getter = expOrFn;
      } else {
        this.getter = parsePath(expOrFn);
      }
      this.value = this.lazy
        ? undefined
        : this.get();
    };
    

    首先要明确Watcher构造函数的参数含义,主要有:

    • vm:对应的vue实例
    • expOrFn:用于生成getter表达式,watcher对象的核心执行逻辑
    • cb:对应的回调函数

    对于watch选项中创建watcher对象,expOrFn实际上就是选项watch中的每一项的key。从Watcher构造函数中针对exporFn生成getter方法,之后会执行getter生成对应的value值。

    而针对非函数的expOrFn会调用parsePath函数,实际上就是针对选项watch中生成watcher对象的处理,而这里就是watch原理的关键。

    parsePath
    var bailRE = /[^\w.$]/;
    function parsePath (path) {
      if (bailRE.test(path)) {
        return
      }
      // 逗号分割
      var segments = path.split('.');
      return function (obj) {
        for (var i = 0; i < segments.length; i++) {
          if (!obj) { return }
          // 关键逻辑
          obj = obj[segments[i]];
        }
        return obj
      }
    }
    

    实际上watch原理就是会获取对应key对应的值,即:

    obj = obj[segments[i]];
    

    watch选项中key必须是被数据拦截的属性(没有被拦截是无法监听变化),watch原理就是利用已被拦截属性获取来实现的,基本过程如下:

    • parsePath中会生成getter函数之后被触发
    • getter函数中会获取key表达式对应的值,而这个获取过程会触发key的getter即会触发依赖收集(实际上就会将watch下key对应的Dep对象与对应生成的watcher对象形成关联)
    • 当key对应的表达式形成新的值时,会触发notify从而视图更新,之后会调用Watcher对象的update(实际上同步或异步调用run方法即watcher对象中保存的cb回调函数,对于选项watch下key就是对应的处理函数)

    总结

    选项watch监听原理的关键在于:

    watch下key必须是被数据拦截的属性

    如何实现watch监听?正是因为watch对应key是被数据拦截的属性,在选项watch下:

    • 每一个key都会对应一个watcher对象
    • watcher对象的getter函数就是获取当前key对应的值,从而建立key对应Dep对象与当前watcher对象建立联系
    • 当key改变时就会触发视图更新,从而执行key对应的回调函数

    实际上所有监听原理的实现都是Dep对象与Watcher对象建立联系,在Dep对象对应属性改变时触发视图更新,从而运行相关逻辑。

    展开全文
  • vue3的watch监听方式

    2021-10-10 13:38:56
    方式一:监听一个属性</h1> <p>求和:{{ sum }}</p> <button @click="sum++">方式一点我加1</button><br /> ----------------------------------------------------------...

    template部分

    <template>
      <h1>方式一:监听一个属性</h1>
      <p>求和:{{ sum }}</p>
      <button @click="sum++">方式一点我加1</button><br />
    
    
      ------------------------------------------------------------------------------------<br />
      <h2>方式二:监听多个属性</h2>
      <p>{{ tipsmessage }}</p>
      <button @click="tipsmessage += 1">点我拼接1</button><br />
    
    
      ------------------------------------------------------------------------------------<br />
      <h1>方式三:监听对象</h1>
      <p>姓名:{{ obj.name }}</p>
      <p>年龄:{{ obj.age }}</p>
      <button @click="obj.age++">点我加年龄</button><br />
    
    
      ------------------------------------------------------------------------------------<br />
      <h1>方式四:监听对象某一个属性变化</h1>
      <p>薪资:{{ obj.test.salary }}</p>
      <p>工作年限:{{ obj.test.year }}</p>
      <button @click="obj.test.salary += 1000">点我涨薪</button>
      <button @click="obj.test.year++">点我添加工作年限</button>
      <br />
    </template>
    

    js部分:
    使用reactive和ref混合响应式watch监听示例

     setup() {
        let sum = ref(122);
        let tipsmessage = ref("hello");
        const obj = reactive({
          name: "老王",
          age: "50",
          test: {
            salary: 3000,
            year: 1,
          },
        });
           // 方式一:监听单个基本数据类型(ref)
           		此处代码看对应示例
           		
           // 方式二:监多个基本数据类型(ref)
    		   此处代码看对应示例
    		   
    	   // 方式三:监听对象(reactive)
    			此处代码看对应示例
    			
    	   // 方式四:监听对象中某一个属性变化(reactive)
    	   		此处代码看对应示例
    	   		
    	   // 方式五:监视对象中某几个属性(reactive)
    	   		此处代码看对应示例
    	   		
    	   //  方式六:监视对象中的某一个对象 但我操作这某一对象里面的某一个属性obj.test(reactive)
    	   		此处代码看对应示例
    	
      return { sum, tipsmessage, obj };
    

    方式一:监听单个基本数据类型(ref)

       watch(sum, (newVal, oldValue) => {
         		 console.log(newVal, oldValue);
        });
    

    方式二:监多个基本数据类型(ref)

       watch([sum, tipsmessage], (newVal, oldValue) => {
          // [122, 'hello1']监听出来结果发现新的值和旧的值都是数组
          console.log(newVal, oldValue);
        });
    

    方式三:监听对象(reactive)

         vue3当前存在问题:
         1.reactive和ref响应式使用proxy代理无法正确监听并获取对象旧的值
         2.强制开启深度监听,关闭无效(deep配置无效)
         
          watch(
          obj,
          (newVal, oldValue) => {
            // newVal=> {name: '老王', age: 52} oldValue=>{name: '老王', age: 52}
            console.log(newVal, oldValue);
          },
          { deep: false }
        );
    

    方式四:监听对象中某一个属性变化(reactive)

     watch(
          () => obj.test.salary,
          (newVal, oldValue) => {
            console.log(newVal, oldValue);
          }
        );
    

    方式五:监听对象中某几个属性(reactive)
    监听属性salary和year

     // 薪资和年龄示例
    watch([() => obj.test.salary, () => obj.test.year], (newVal, oldValue) => {
          console.log(newVal, oldValue);
          //[4000, 1][3000, 1]
          const arr = ["salary", "year"];
          for (let i = 0; i < newVal.length; i++) {
            if (newVal[i] !== oldValue[i]) {
              // 1年工作经验 3000 每年涨薪1000
              switch (arr[i]) {
                case "salary":
                  obj.test.year = (obj.test[arr[i]] - 3000) / 1000 + 1;
                  break;
                case "year":
                  obj.test.salary = (obj.test[arr[i]] - 1) * 1000 + 3000;
                  break;
              }
            }
          }
        });
    

    方式六:监视对象中的某一个对象 但我操作这某一对象里面的某一个属性obj.test(reactive)

    注意:这种方式需要开启深度监听deep:true才能监视到某一对象属性的变化,此处deep配置有效

     watch(
          () => obj.test,
          (newVal, oldValue) => {
            console.log(newVal, oldValue, "啊哈哈哈");
            //{salary: 3000, year: 2} {salary: 3000, year: 2} '啊哈哈哈'
          },
          { deep: true }
        );
        return { sum, tipsmessage, obj };
      },
    };
    

    注意点: 使用ref的响应式watch监听
    1.ref定义的基本类型使用watch监听时候不需要.value
    示例:

     watch(sum, (newVal, oldValue) => {
          console.log(newVal, oldValue);
        });
        
    

    2.ref定义对象类型使用watch监听对象时监听的对象外层可以使用2个方式
    示例:

     const obj = ref({
          name: "老王",
          age: "50",
          test: {
            salary: 3000,
            year: 1,
          },
        });
    

    (1).使用.value监听

       watch(obj.value, (newVal, oldValue) => {
          console.log(newVal, oldValue);
        });
    

    (2).开启深度监听deep:true

       watch(obj, (newVal, oldValue) => {
          console.log(newVal, oldValue);
        },{deep:true});
    
    展开全文
  • watch 监听函数

    2020-11-04 17:15:10
    1.在vue框架中有watch监听函数,用来监听数值的改变,监听对象可以是一个变量也可以是一个对象。我此次项目中监听的是日期选择器的变化。 2.监听器(watch)是一个对象,要当成对象来使用。 3.watch监听的函数接受两...

    1.在vue框架中有watch监听函数,用来监听数值的改变,监听对象可以是一个变量也可以是一个对象。我此次项目中监听的是日期选择器的变化。

    2.监听器(watch)是一个对象,要当成对象来使用。

    3.watch监听的函数接受两个参数:handler:function(newVal,oldVal),第一个参数表示改变后的新值,第二个参数表示改变前的值。监听的数据必须是data中声明过的或者是父组件向子组件传递过来的props中的数据,监听函数有两个参数:

    1>. immediate:组件加载立即触发回调函数执行(当值在第一此绑定时并不会执行监听函数,只有值发生改变时才会执行,若需要当最初绑定值时也执行该函数需要用到immediate属性)
    2>. deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。

    eg: 监听属性

    <el-col :span="8" :offset="2">
    							<el-form-item label="实际开工日期" prop="sjkgrq">
    								<el-date-picker v-model="ruleForm.sjkgrq" type="date" :validate-on-rule-change="false"
    									value-format="yyyy/MM/dd" format="yyyy/MM/dd" placeholder="选择项目开工日期" :picker-options="KGTime"
    									:disabled="form.disabled" style="width:256px;">
    								</el-date-picker>
    							</el-form-item>
    </el-col>
    
    watch: {
    	"ruleForm.sjkgrq": {
    		handler: function (val) {
    			if (val) {
    				this.isClick = false;
    			} else {
    				this.isClick = true;
    			}
    			deep: true;
    		},
    	},
    

    此时我监听的是ruleFrom对象中的一个属性值:sjkgrq,使用字符串的形式监听对象属性(这样只会给对象的某个特定的属性加监听器),也可以监听ruleFrom的变化,此时会给ruleFrom的所有属性都加上这个监听器,每个属性值的变化都会执行handler。

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

    展开全文
  • watch监听函数

    2020-10-31 16:18:36
    watch函数中使用 (1) value(){} 形式来监听value的变化 但是value从值a=>b的时候可以触发监听 从初始的undefined=>a是不能监听的 (2) value:{ handler:fn(value){ console.log(value) }, deep:true, ...
  • 主要介绍了vue watch普通监听和深度监听(数组和对象),文中单独通过代码给大家介绍了vue watch 深度监听的方法,感兴趣的朋友一起看看吧
  • Vue监听数组 watch监听

    千次阅读 2020-10-05 15:48:53
    Vue中监听数组解析 1,简单监听一个参数,demo如下 data() { return { msg: "test---test", ... watch: { msg(newVal, oldVal) { console.log(newVal) console.log(oldVal) }, }, created() { thi
  • watch监听路由变化详解

    千次阅读 2021-03-10 14:42:17
    一、watch监听路由的方法 通过watch监听,当路由发生变化的时候执行。 方法一: watch:{ $router(to,from){ console.log(to.path) } } 方法二: watch: { $route: { handler: function (val, oldVal){...
  • 详解Vue中的Watch监听

    2020-08-27 15:19:33
    本文将从以下方面讲解个人理解的Watch监听 1、普通Watch与监听事件回调 2、深度监听:deep 3、初始化时触发:immediate 4、Watch与Computed的区别 在官方的原话是 字面意思,watch是一个对象,对象中的 键 是 ...
  • watch监听器的基本使用

    多人点赞 2021-10-19 20:03:45
    侦听器一般来说是用来监听数据的变化,默认是在数据发生变化时执行。 监听的数据名放到这里面作为函数名,这个函数里面有两个参数,一个是新值,一个是旧值。 在vue中,使用watch来响应数据的变化,关于watch的...
  • 需求上一篇章使用watch组件通过监听文本框的参数变化,实现了名称拼接的案例。这种业务使用事件监听都可以处理,但是如果需要监听网页的URL地址变化,这样事件监听肯定是做不了的。那么此时就可以使用watch来实现了...
  • watch: { propName: { handler (newVal, oldVal) { console.log(newVal) }, immediate: true //设置为 true 时,第一次进入页面时即监听;false时刚进入页面不监听,仅在值发生变化时监听 } } ...
  • watch监听方法

    2021-01-12 15:15:30
    1、watch监听对象中的数组 watch:{ "editForm.size_id":function(val,oldVal){ console.log("val",val) console.log("oldVal",oldVal) } }, 上面方法注意要加双引号 2、另外一种深度监听 editForm:...
  • this.bussno值的改变无法及时触发watch监听,只有在方法执行完,才会监听到最后一次值的改变,想不清楚是为什么. 赋值方法如下 ``` for(let i=0;i;i++){ this.flag =i; let saveData =new Object(); let ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 70,772
精华内容 28,308
关键字:

watch监听