精华内容
下载资源
问答
  • vue3 watch的用法
    千次阅读
    2022-04-11 10:22:32

    1、监听路由变化

    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 === "/") {
                showPage.value = false
            } else {
                showPage.value = true
            }
        }
    )
    
    </script>

    2、watch在监听 ref 类型时

    import { ref, watch } from "vue"
    import { useRoute } from "vue-router"
    
    <script setup>
    const route = useRoute()
    const showPage = ref(false)
    watch(
        showPage, // 注意这里变化
        (val,old) => {
            console.log('val',val);
            console.log('old',old);
        }
    )
    
    </script>

    3、watch在监听 reactive 类型时

    import { ref,reactive, watch } from "vue"
    import { useRoute } from "vue-router"
    
    <script setup>
    const route = useRoute()
    const data = reactive({ nums:0 })
    watch(
        () => data.nums, // 注意这里
        (val,old) => {
            console.log('val',val);
            console.log('old',old);
        }
    )
    
    </script>

    4、开启深度监听和 immediate监听立即执行

    import { ref,reactive, watch } from "vue"
    import { useRoute } from "vue-router"
    
    <script setup>
    const route = useRoute()
    const data = reactive({ nums:0 })
    watch(
        () => data.nums, // 注意这里
        (val,old) => {
            console.log('val',val);
            console.log('old',old);
        },
        {
            deep:true, // 深度监听
            immediate:true // 立即执行
        }
    )
    
    </script>

    更多相关内容
  • vue3 watch 用法

    2022-07-15 08:38:28
    vue3 watch 用法
    <script setup>
        import {
          reactive,
          watch,
        } from 'vue'
         //数据
         let sum = ref(0)
         let msg = ref('你好啊')
         let person = reactive({
                        name:'张三',
                        age:18,
                        job:{
                          j1:{
                            salary:20
                          }
                        }
                      })
        // 两种监听格式
        watch([sum,msg],(newValue,oldValue)=>{
                console.log('sum或msg变了',newValue,oldValue)
              },{immediate:true})
    
         watch(()=>person.job,(newValue,oldValue)=>{
            console.log('person的job变化了',newValue,oldValue)
         },{deep:true}) 
    
    展开全文
  • vue3.0 watch用法

    千次阅读 2021-07-01 14:22:28
    一 、watch 函数用来侦听特定的数据源,并在回调函数中执行副作用。默认情况是惰性的,也就是说仅在侦听的源数据变更时才执行回调。...二、接下来介绍三个参数的用法 1.项目中使用的时候按需引入 im

    一 、watch 函数用来侦听特定的数据源,并在回调函数中执行副作用。默认情况是惰性的,也就是说仅在侦听的源数据变更时才执行回调。

    watch(source, callback, [options])

    参数说明:
    source: 可以支持 string,Object,Function,Array; 用于指定要侦听的响应式变量
    callback: 执行的回调函数
    options:支持 deep、immediate 和 flush 选项。

    二、接下来介绍三个参数的用法

    1.项目中使用的时候按需引入
    import { defineComponent, ref, reactive, toRefs, watch } from "vue";
    
    2.监听reactive、ref定义的数据
    
    export default {
         name: "test1",
          //setup接收两个参数 prop,context
          setup(){
              const year = ref(0)
              const user = reactive({
                    name:'gejianfang',
                    age:18
              })
              setInterval(()=>{
                    year.value ++;
                    user.age ++
              },1000)
              //监听ref定义的数据
              watch(()=>user.age,(cur,pre)=>{
                    console.log(cur,'新值',pre,'旧值')
              });
    		  //监听reactive定义的数据
              watch(year,(newValue,oldValue)=>{
                    console.log(newValue,'新值',oldValue,'旧值')
              },{deep:true})
              
              /**上面我们分别使用了两个 watch, 当我们需要侦听多个数据源时, 可以进行合并,同时侦听多个数据:**/
              watch([()=>user.age,year],([cur,pre],[newValue,oldValue])=>{
                    console.log(cur,'新值',pre,'旧值');
                    console.log(newValue,'新值',oldValue,'旧值')
              })
    
              return{
                    year,
                    // user,
                    ...toRefs(user)  //toRefs解构,不需要写user.name 或者uesr.age
              }
    
          }
    
    

    三、侦听复杂的嵌套对象

    const state = reactive({
      room: {
        id: 100,
        attrs: {
          size: "140平方米",
          type: "三室两厅",
        },
      },
    });
    watch(
      () => state.room,
      (newType, oldType) => {
        console.log("新值:", newType, "老值:", oldType);
      },
      { deep: true }
    );
    

    如果不使用第三个参数deep:true, 是无法监听到数据变化的。前面我们提到,默认情况下,watch 是惰性的, 那什么情况下不是惰性的, 可以立即执行回调函数呢?其实使用也很简单, 给第三个参数中设置immediate: true即可

    交流
    1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解 群号: 856402057

    2、公众号:公众号「进军全栈攻城狮」

    对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上,共勉!
    在这里插入图片描述

    展开全文
  • vue3watch用法

    千次阅读 2022-06-27 01:29:44
    vue3写法支持使用多个watch函数组合使用watch第三个参数{immediate, deep},代码如下: 总之推荐使用vue3watch监听函数的写法,通过改变第一个参数的方式就可以满足不同对象属性监听深度,还可以使用组合监听...
    • 先复习一下vue2的写法,监听map对象,两种写法区别如下:
      data() {
        return {
          people1: {
            name: '小美',	//子属性
            work: '在职',
          },
          people2: {
            name: '小帅',	//子属性
            work: '在职',
          },
        };
      },
      watch: {
        // vue2写法
        people1(value): {
        	// 该写法监听的是people对象引用地址,当改变子属性name的值时,对象的引用地址并没有改变,因此不会监听到变化
            console.log(value);
        },
        people2: {
        	handler(value) {
    	    	console.log(value);
    	    },
            deep: true, // 会监听孙属性,曾孙属性
        },
      },
    
    • vue3写法支持使用多个watch函数组合使用,watch第三个参数{immediate, deep},代码如下:
    import { defineComponent, reactive, watch, Fragment } from 'vue';
    const demo = reactive({
      name: '小王',
      info: {
        name: '',
        work: {
          type: '程序员',
          address: '七宝',
        },
      },
    });
    
    export default defineComponent({
      name: 'Testthree',
      data() {
        return {
          year: '2021',
          people: {
            name: '小美',
            work: '在职',
          },
        };
      },
      watch: {
        // // vue2写法,这种写法不能监听除了data之外的变量
        // year(value) {
        //   // 基本用法
        //   console.log(value);
        // },
        // people: {
        //   handler(value) {
        //     console.log(value);
        //   },
        //   deep: true, // 会监听孙属性,曾孙属性
        // },
      },
      mounted() {
        // watch(demo, newValue => {
        //   // 推荐这种,vue3写法支持使用多个watch函数组合使用
        //   //监听整个对象,孙属性变更也会触发
        //   console.log(newValue);
        // });
        // watch(() => demo.name, newValue => {
        //   //注意:此时的watch第一个参数是一个箭头函数。
        //   //监听对象中的某个属性
        //   console.log(newValue);
        // });
        // watch(() => ({ ...demo }), newValue => {
        //   //监听对象中的子属性,孙属性变更不会触发
        //   console.log(newValue);
        // });
        // watch(() => demo, newValue => {
        //   //监听对象中的所有属性,作用和第一种监听整个对象一样
        //   console.log(newValue);
        // }, { deep: true });
        // watch(demo.info, newValue => {
        //   //监听整个对象,孙属性变更也会触发
        //   console.log(newValue);
        // });
        watch([() => this.year, demo], ([v1, v2], [oldName, oldNums]) => {
          //注意:此时的第一个参数是一个数组
          //组合监听,监听对象中的所有属性
          console.log(v1);
          console.log(v2);
        });
      },
      render() {
        return (
          <Fragment>
            <h2>watch监听器的几种写法</h2>
            <div onClick={() => {
              // this.year = '2022';
              // this.people.name = '小帅';
              // this.people = {
              //   name: '小张',
              //   work: '入职',
              // };
              // demo.name = '前段小伙';
              // demo.info.name = 'jack';
              // demo.info= {
              //   name: 'lily',
              //   work: {},
              // };
              demo.info.work.address = '闵行';
            }}>更新</div>
          </Fragment >
        );
      },
    });
    
    

    总之

    推荐使用vue3watch监听函数的写法,通过改变第一个参数的方式就可以满足不同对象属性监听深度,还可以使用组合监听方式优化代码。

    展开全文
  • 主要介绍了Vue数据监听方法watch使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue3watch使用方法和注意事项

    千次阅读 2021-07-29 15:36:50
    3、监听data的数据 4、监听多个参数 5、深度监听 直接上代码 <template> <div class="component"> </div> </template> <script> // 引入 watch import { defineComponent, ...
  • vue3 watch用法

    2022-07-29 15:18:02
    watch用法
  • 主要介绍了vue使用 watch 出现了如下的报错信息的原因分析及解决方法,本文附有代码解决方案,非常不错,需要的朋友可以参考下
  • vue3中的watch用法和几种常见情况

    千次阅读 2022-05-07 23:35:12
    vue3中的watch用法和几种常见情况
  • Vue3watch的详解

    万次阅读 2022-05-05 22:01:05
    Vue3watch的详解 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from "vue";...
  • vue中,使用watch来响应数据的变化。watch用法大致有三种。下面代码是watch的一种简单的用法: ''' <input type=text v-model=cityName/> new Vue({ el: '#root', data: { cityName: 'shanghai' },...
  • vue3watch监听器的基本使用

    千次阅读 2022-02-16 14:46:08
    接下来我们看下vue3里的watch使用方法 首先我们需要在vue里进行引用(感觉越来越像React了呢) import{ref,watch}from"vue"; 基本使用,在setup里使用watch形式是函数形式,接收第一个值为:数组...
  • vue 3使用 watch 说明
  • vue watch 使用方法

    千次阅读 2021-11-02 22:19:35
    方法一:直接写一个监听处理函数,每次监听到属性值(如cityName...方法三:使用 immediate(立即)属性和 handler (处理者)方法,deep 深度监测。如果只需要监听对象中的一个属性值,使用字符串形式监听对象属性名。
  • vuewatch用法

    万次阅读 2022-04-25 10:31:46
    vue项目中需要对某个值进行监听做一些操作的时候我们会用到watch进行监听: 1:监听普通属性: 单一字符串,布尔值,等等 data() { return { dvid: '', goodsInfo: [], userInfo:{}, closeTime...
  • watch函数用来侦听特定的数据源,并在回调函数中执行副作用。默认情况是惰性的,也就是说仅在侦听的源数据变更时才执行回调。 watch(source,callback,[options]) 参数说明: source:可以支持string,Object,...
  • 假设有如下代码: ...new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: { firstName(newName, oldName) { this.fullName = newName + ' ' + this.lastName
  • 本篇文章中主要介绍了Vue.js 中的 $watch使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue3.0watch使用方法

    2022-05-25 20:09:08
  • 主要介绍了vue.js使用watch监听路由变化的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vuewatch用法

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

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

    千次阅读 2020-05-18 16:15:51
    监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值,用一个函数取代。 简洁的说:watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。 二、...
  • Vue2 和 Vue3 中的 watch 用法

    千次阅读 2022-03-19 13:41:36
    数据 let num = ref(0); let msg = ref('你好'); let person = reactive({ name: 'zs', age: 13, job: { j1: { salary: 20, ...vue2中的写法 watch: { //简写 // num(newVal, oldVal) { //
  • watch和computed区别,2.vue2和3使用watch和computed,3.watchEffect和watch的区别
  • Vuewatch属性可以用来监听data属性中数据的变化。这篇文章主要介绍了Vuewatch和computed方法使用及区别,需要的朋友可以参考下
  • Vuewatch的详细用法(三种)

    万次阅读 多人点赞 2021-11-23 11:36:13
    分类解析vuewatch用法: 1)数据类型 2)deep immediate ** 1. 普通数据类型:** <input type="text" v-model="userName"/> //监听 当userName值发生变化时触发 watch: { userName (new...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,004
精华内容 15,201
关键字:

vue3 watch的用法