精华内容
下载资源
问答
  • 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-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 出现了如下的报错信息的原因分析及解决方法,本文附有代码解决方案,非常不错,需要的朋友可以参考下
  • vue3中watch使用方法和注意事项

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

    这里实例平时用到的几种监听
    1、监听父组件传来的参数props
    2、监听从父组件传来props里的某一个参数
    3、监听data的数据
    4、监听多个参数
    5、深度监听

    直接上代码

    <template>
      <div class="component">
      </div>
    </template>
    
    <script>
    // 引入 watch
    import { defineComponent, reactive, toRefs, watch } from 'vue'
    export default defineComponent({
      props: {
        checkedListData: {
          type: Array
        },
        wordData: {
          type: Array,
          default: () => ([])
        },
        type: {
          type: String,
          default: '分类'
        }
      },
      setup (props, context) {
        const data = reactive({
          tableData: []
        })
    
        // 监听父组件传来的参数
        watch(props, (val) => {
          // 监听从父组件接收的所有参数,只要有参数变化就会触发
          console.log('props接收的值', val)
        }, {
          deep: true
        })
    
        // 监听从父组件传来的某一个参数
        watch(() => props.type, (val) => {
          // 只监听父元素传来的type参数,type变化才会触发
          console.log('type', val)
        }, {
          deep: true
        })
    
        // 监听data的数据
        watch(() => data.tableData, val => {
          console.log('tableData的数据改变了')
        }, {
          deep: true, // 深度监听
          immediate: true
        })
      //监听多个参数
      watch([()=> data.tableData,()=> data.type],(newValue, old) => {
           console.log(1111,newValue[1],old[1])
         });
        return {
          ...toRefs(data)
        }
      }
    })
    </script>
    
    <style lang="scss" scoped>
    </style>
    

    补充如果在watch调用方法,就需要把watch写到该方法的下面,

    const fn=()=>{}
    watch()
    

    注意,设置了 deep: true 表示是深度监听
    注意,在带有 immediate 选项时,你不能在第一次回调时取消侦听给定的 property。

    展开全文
  • Vue3中watch的详解

    万次阅读 2022-05-05 22:01:05
    Vue3中watch的详解 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from "vue";...

    Vue3中watch的详解

    Vue2使用watch

    <template>
      <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div>
    </template>
    <script>
    import { ref } from "vue";
    export default {
      // vue2中使用watch
      watch: {
        sum: {
          deep: true,
          handler(newValue, oldValue) {
            console.log("总合 sum 变化:", newValue, oldValue);
          },
        },
      },
      setup() {
        let sum = ref(0);
        return {
          sum,
        };
      },
    };
    </script>
    
    <style>
    </style>
    
    

    Vue3使用watch

    watch有三个参数:
    参数1:监听的参数
    参数2:监听的回调函数
    参数3:监听的配置(immediate)

    情况1
    监视ref所定义的一个响应式数据

    <template>
      <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div>
    </template>
    
    // 监视ref所定义的一个响应式数据
    <script>
    import { ref, watch } from "vue";
    export default {
      setup() {
        let sum = ref(0);
        // 监视ref所定义的一个响应式数据
        watch(sum, (newValue, oldValue) => {
          console.log("sum ==> ", newValue, oldValue);
        });
        return {
          sum,
        };
      },
    };
    </script>
    

    在这里插入图片描述
    情况2
    监视ref所定义的多个响应式数据

    <template>
      <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div>
      <hr />
      <div>
        msg:{{ msg }}
        <button @click="msg += '~'">改变msg</button>
      </div>
    </template>
    
    <script>
    import { ref, watch } from "vue";
    export default {
      setup() {
        let sum = ref(0);
        let msg = ref("watch使用"):
        // 情况2:监视ref所定义的多个响应式数据
        watch([sum, msg], (newValue, oldValue) => {
          console.log("sum/msg ==> ", newValue, oldValue);
        },{immediate:true});
        return {
          sum,
          msg,
        };
      },
    };
    </script>
    

    在这里插入图片描述
    情况3
    监视reactive所定义的一个响应式数据
    注意:

    • 这里无法正确获取oldValue
    • 强制开启了深度监听(deep配置不生效)
    <template>
      <div>
         <h3>情况3::监视reactive所定义的一个响应式数据</h3>
          <div>姓名:{{person.name}}</div>
          <div>年龄:{{person.age}}</div>
        <button @click="person.name += '~'">修改姓名</button>
        <button @click="person.age ++">修改年龄</button>
      </div>
     </template>
    
    <script>
    import { ref, watch,reactive } from "vue";
    export default {
      setup() {
        let person = reactive({
          name: "lisa",
          age: 18,
          job: {
            joblist: {
              money: 10,
            },
          },
        });
            // 情况3、监视reactive所定义的一个响应式数据
        /* 
          若watch监视的是reactive定义的响应式数据,则无法正确获得oldvalue! 
          若watch监视的是reactive定义的响应式数据,则强制开启了深度监视
        */
        watch(person,(newValue, oldValue) => {
            console.log("person ==> ", newValue, oldValue);
          },{immediate:true,deep:false}//这里的deep配置不再奏效
        );
        return {
          person,
        };
      },
    };
    </script>
    

    情况4
    监视reactive所定义的一个响应式数据中的某个属性

    <template>
      <div>
         <h3>情况4::监视reactive所定义的一个响应式数据中的某个属性</h3>
          <div>姓名:{{person.name}}</div>
          <div>年龄:{{person.age}}</div>
        <button @click="person.name += '~'">修改姓名</button>
        <button @click="person.age ++">修改年龄</button>
      </div>
     </template>
    
    <script>
    import { ref, watch,reactive } from "vue";
    export default {
      setup() {
        let person = reactive({
          name: "lisa",
          age: 18,
          job: {
            joblist: {
              money: 10,
            },
          },
        });
        // 情况4、监视reactive所定义的一个响应式数据中的某个属性
        watch(()=>person.name,(newValue, oldValue) => {
            console.log("person.name ==> ", newValue, oldValue);
          });
    
        return {
          person,
        };
      },
    };
    </script>
    

    在这里插入图片描述

    情况5
    监视reactive所定义的一个响应式数据中的某些属性

    <template>
      <div>
         <h3>情况4::监视reactive所定义的一个响应式数据中的某个属性</h3>
          <div>姓名:{{person.name}}</div>
          <div>年龄:{{person.age}}</div>
        <button @click="person.name += '~'">修改姓名</button>
        <button @click="person.age ++">修改年龄</button>
      </div>
     </template>
    
    <script>
    import { ref, watch,reactive } from "vue";
    export default {
      setup() {
        let person = reactive({
          name: "lisa",
          age: 18,
          job: {
            joblist: {
              money: 10,
            },
          },
        });
        // 情况5、监视reactive所定义的一个响应式数据中的某些属性
        watch([()=>person.name,()=>person.age],(newValue, oldValue) => {
            console.log("person.name/person.age ==> ", newValue, oldValue);
        });
        return {
          person,
        };
      },
    };
    </script>
    

    在这里插入图片描述
    特殊情况
    watch监听reactive中对象的嵌套对象

    <template>
      <div>
          <div>姓名:{{person.name}}</div>
          <div>年龄:{{person.age}}</div>
          <div>薪资:{{person.job.joblist.money}} K</div>
        <button @click="person.name += '~'">修改姓名</button>
        <button @click="person.age ++">修改年龄</button>
        <button @click="person.job.joblist.money ++">提薪</button>
      </div>
     </template>
    
    <script>
    import { ref, watch,reactive } from "vue";
    export default {
      setup() {
        let person = reactive({
          name: "lisa",
          age: 18,
          job: {
            joblist: {
              money: 10,
            },
          },
        });
        // 特殊情况、监视reactive所定义嵌套对象
        watch(()=>person.job,(newValue, oldValue) => {
            console.log("person.job对象发生变化 ==> ", newValue, oldValue);
        },{deep:true});//此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效
    
        return {
          person,
        };
      },
    };
    </script>
    
    展开全文
  • vue中使用watch来响应数据的变化。watch用法大致有三种。下面代码是watch的一种简单的用法: ''' <input type=text v-model=cityName/> new Vue({ el: '#root', data: { cityName: 'shanghai' },...
  • 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) { //
  • vue 3 watch computed
  • Vue3中watch监视属性用法

    千次阅读 2022-02-11 10:15:36
    Vue3中watch监视属性用法
  • vue中watch用法

    万次阅读 2022-04-25 10:31:46
    vue项目需要对某个值进行监听做一些操作的时候我们会用到watch进行监听: 1:监听普通属性: 单一字符串,布尔值,等等 data() { return { dvid: '', goodsInfo: [], userInfo:{}, closeTime...
  • 主要介绍了Vue数据监听方法watch使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue3中watch用法和几种常见情况

    千次阅读 2022-05-07 23:35:12
    vue3中watch用法和几种常见情况
  • watch函数用来侦听特定的数据源,并在回调函数执行副作用。默认情况是惰性的,也就是说仅在侦听的源数据变更时才执行回调。 watch(source,callback,[options]) 参数说明: source:可以支持string,Object,...
  • 本篇文章主要介绍了Vue.js 的 $watch使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue3.0中使用watch

    千次阅读 2022-04-18 11:11:11
    通过vue按需引入watch 对指定声明的属性实行监听 <template> <el-button type="primary" @click="handleChangeData">修改数据触发watch监听</el-button> <div class="count">{{sNum}}<...
  • vue3中watch与watchEffect使用与区别
  • vue3 watch用法

    2022-07-29 15:18:02
    watch用法
  • vue3watchvue2watch的区别
  • import {ref,reactive, watch,onMounted} from "vue"; const count = ref(0); const state = reactive({ account: "22", pw: "sss", company: "ddd", data: [ { account: 0, password: "123456", }, ], });...
  • vue3中watch

    千次阅读 2021-12-07 11:10:11
    vue3中watch比起vue2中的watch有了些许的变化,我们使用composition api来写 基本数据类型的监视: <template> 当前求和为:{{ sum }} <button @click="sum++">点我++</button> </template...
  • 假设有如下代码: ...new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: { firstName(newName, oldName) { this.fullName = newName + ' ' + this.lastName
  • vue 3 中使用 watch 说明
  • vue中watch使用

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

    千次阅读 2022-05-02 00:21:51
    1. watch使用 语法 import { watch } from "vue" watch( name , ( curVal , preVal )=>{ //业务处理 }, options ) ; 共有三个参数,分别为: name:需要帧听的属性; (curVal,preVal)=>{ //业务处理 }...
  • watch 和 watchEffect 都是监听器,但在写法和使用上有所区别。 watch在监听ref和reactive类型时watch函数的写法不同。 1.1、 watch监听ref类型时: import {ref, watch} from 'vue' export default { setup(){ ...
  • 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的详细用法

    2022-05-31 15:43:52
    watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。简单来说就是,vue是数据双向绑定,当页面数据发生变化时,我们通过watch可以拿到变化前和变化后的值,之后做一...

空空如也

空空如也

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

vue3中watch的用法