精华内容
下载资源
问答
  • 2020-12-20 20:59:35

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据、但当时还没有获取到,初始化结束就不会更新数据了。只有监听这两个属性,再重新执行初始化。

    1、watch是一个对象,对象就有键跟值,

    键就是我们要监听的数据,

    值可以是函数:当我们监听的数据发生变化时,需要执行的函数,这个函数有两个形参,第一个是当前的值,第二个是变化后的值;

    值也可以是method中的函数名:函数名要用引号来包裹

    值也可以是包括选项的对象,老厉害了,老厉害了

    选项包含三个:

    A、第一个值handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数

    B、第二个值deep:其值true 或者 false,是否深度监听(一般监听是不能监听到对象属性值变化的,数组除外)

    C、第三个值immediate:其值 true 或者 false,是否以当前的初始值执行handle函数(当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。)。

    (1)通过watch监听data数据的变化,数据发生变化时,就会打印当前的值

    watch: {

    data(val, newval) {

    console.log(val)

    console.log(newval)

    }

    }

    (2)通过watch监听docData数据的变化,数据发生变化时,this.change_number++(使用深度监听)

    watch: {

    docData: {

    handler(newVal) {this.change_number++},

    deep:true,

    immediate: false,}

    }

    (3)通过watch监听data数据的变化,数据发生变化时,执行changeData方法

    watch: {

    data:'changeData' //值可以为methods的方法名

    },

    methods: {

    changeData(curVal,oldVal){

    conosle.log(curVal,oldVal)

    }

    }

    更多相关内容
  • 本篇文章主要介绍了Vue监听数据变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue3 监听vuex里的数据变化

    千次阅读 2022-01-17 17:26:24
    } from 'vue'; const getShowTask = computed(()=>{ //返回的是ref对象 return store.state.监听的字段; }) watch(getShowTask, (newVal, oldVal) => { console.log('newVal, oldVal', newVal, oldVal) }...
    import {
    		computed,
    		watch,
    } from 'vue';
    
    const getShowTask = computed(()=>{
    	//返回的是ref对象
    	return store.state.监听的字段;
    })
    
    watch(getShowTask, (newVal, oldVal) => {
    	console.log('newVal, oldVal', newVal, oldVal)
    }, {immediate:true,deep:true});
    
    展开全文
  • 文章目录获取响应式数据应用注意点监听数据变化watchEffectwatch应用判断转换unreftoReftoRefs应用 获取响应式数据 API 传入 返回 备注 reactive plain-object 对象代理 深度代理对象中的所有成员 ...

    获取响应式数据

    API传入返回备注
    reactiveplain-object对象代理深度代理对象中的所有成员
    readonlyplain-object or proxy对象代理只能读取代理对象中的成员,不可修改
    refany{ value: … }对value的访问是响应式的,如果传入的值是一个对象,则会通过reactive代理,如果已经是代理,则直接使用代理
    computedfunction{ value: … }读取value值时,会根据情况决定是否要运行函数

    应用

    • 如果想让一个对象变为响应式数据,使用reactive或者ref
    • 如果想让一个对象只读,使用readonly
    • 如果想让一个非对象数据变为响应式,使用ref
    • 如果想根据一个响应式数据得到另一个响应式数据,使用computed

    注意点

    const state = reactive({a:1}) // 数据源,不暴露
    const imState = readonly(state) // 暴露出一个不可更改的对象
    const setValue = (val) => {
    	state.a = val // 设置
    }
    return {
    	imState,
    	setValue
    }
    
    • 导出一个用户不可随意更改的对象,仅能通过作者提供的方法更改
    • cumputed传入的函数不会直接调用,当用到函数内部的响应式数据时,会在使用这个响应式数据之前调用,且具有缓存,当数据不变时函数不会重复执行
    • 使用…解构reactive或者readonly,或者使用 { a } = state这种格式得到的数据不具有响应式 解决办法:使用toRefs

    监听数据变化

    watchEffect

    const watch = watchEffect(()=> {
    	// 该函数会立即执行,记录响应式数据,当其变化时,会放入微队列执行
    })
    // 返回一个函数,调用这个函数会停止监听
    watch(); // 停止监听
    

    watch

    // 监听单个数据的变化
    const state = reactive({a: 1})
    watch(
    	()=> state.a,
    	(newValue, oldValue)=> {
    		// ... 微队列调用
    	},
    	options // 配置参数对象 如immediate
    )
    const count = ref(0)
    watch(
    	count,
    	(newValue, oldValue)=> {
    		// ...
    	},
    	options // 配置参数对象 如immediate
    )
    // 监听多个数据的变化
    watch(
    	[()=> state.a, count],
    	([newValue1, newValue2], [oldValue1, oldValue2])=> {
    		// ...
    	},
    	options
    )
    

    应用

    除了以下场景,其余都建议使用watchEffect

    • 不希望回调函数一开始就执行
    • 数据改变时,需要参考旧值
    • 需要监控一些回调函数中不会用到的数据

    判断

    • isProxy 是否由reactive或者readonly创建
    • isReactive 是否由reactive创建
    • isReadonly 是否是有readonly创建
    • isRef 是否是一个ref对象

    转换

    unref

    等同于 isRef(val) ? val.value : val
    使用: const a = unref(b)

    toRef

    得到一个响应式对象某个属性的ref格式

    const state = reactive({a: 1})
    const aRef = toRef(state, 'a')
    aRef.value++
    console.log(state.a) // 2
    state.a++
    console.log(aRef.value) // 3
    

    toRefs

    const state = reactive({a: 1, b: 2})
    const stateRefs = toRefs(state)
    /*
    stateRefs: not a proxy
    {
    	a: {value: ...},
    	b: {value: ...}
    }
    */
    

    应用

    setup() {
    	const state = reactive({a: 1, b: 2})
    	return {
    		...state // a,b不再是响应式
    	}
    }
    setup() {
    	const state = reactive({a: 1, b: 2})
    	return {
    		...toRefs(state) // a,b是响应式
    	}
    }
    
    展开全文
  • 今天小编就为大家分享一篇Vue2实时监听表单变化的示例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 问题 在处理页面重新渲染时通常的做法是: 用vue-router重新路由到当前页面,页面是...使用 window.addEventListener() 添加 resize 事件监听窗口变化 new Vue({ el: '#app', data() { return { render: true } },
  • 1、使用v-model在select标签上进行数据双向绑定, 2、在data里边添加val:‘ ...以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • vue监听数据变化 watch

    千次阅读 2022-01-07 14:09:38
    监听数据变化,在Vue中是通过侦听器来实现的,你也可以将它理解为监听器,时刻监听某个数据的变化。 watch的基本用法 在之前我们在js中添加了data、methods,这一次我们要添加的是watch属性。下面我们先来眼熟一下...

    监听数据变化,在Vue中是通过侦听器来实现的,你也可以将它理解为监听器,时刻监听某个数据的变化。

    watch的基本用法

    在之前我们在js中添加了data、methods,这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置:

    <script>
    export default {
        name: "app",
        // 数据
        data() {
            return {};
        },
        // 方法
        methods:{},
        // 侦听器
        watch:{}
    };
    </script>
    
    

    一个简单的例子:

    <template>
        <p>你点击按钮的次数是: {{ count }} </p>
        <button @click="add" v-model="count">点击</button>
    </template>
    
    <script>
    export default {
        name: "app",
        data(){
            return {
                count:0
            }
        },
        methods:{
            add(){
                this.count++;
            }
        },
        watch:{
            // 被侦听的变量count
            count(){
                console.log('count 发生了变化');
            }
        }
    };
    </script>
    
    

    侦听器更多的是用在异步操作中,所谓异步操作就是数据返回有所延迟的操作,比如说我们要请求后端的接口,接口会返回给我们数据,然后我们再将数据渲染在页面上。

    从请求接口到返回数据,这中间需要一定的时间,此时我们就可以用侦听器来侦听返回的数据,当数据返回以后,我们再触发渲染。

    模拟一个伪异步操作:

    <template>
        <input type="text" v-model="inputValue">
        <p>从输入框中获取到的数据:{{ passedInputValue }}</p>
    </template>
    
    <script>
    export default {
        name: "app",
        data(){
            return {
                inputValue: '',
                passedInputValue: ''
            }
        },
        watch:{
            inputValue() {
                // 当inputValue数据发生变化以后,延迟三秒赋值给passedInputValue
                setTimeout(() => {
                    this.passedInputValue = this.inputValue;
                }, 3000)
            }
        }
    };
    </script>
    
    

    此时你就会发现,当你在input输入框中输入文字以后,p标签内的数据不是立马改变,而是过三秒才会去渲染。

    获取前一次的值

    在某些场景中,我们会需要上一次的数据,此时,侦听器就可以给我们两个值,旧值和新值。

    在上一个案例的基础上,我们只需要添加一个参数,即可获取旧值,代码如下:

    watch:{
        inputValue(value,oldValue) {
            // 第一个参数为新值,第二个参数为旧值,不能调换顺序
            console.log(`新值:${value}`);
            console.log(`旧值:${oldValue}`);
        }
    }
    
    

    handler方法和immediate属性

    前面我们已经知道,当我们侦听的值没有发生改变的时候,是不会触发侦听器的,并且,页面第一次渲染的时候也不会触发侦听器。

    但是现在我有个需求就是要让页面第一次渲染的时候就去触发侦听器呢?

    此时就要用到一个方法和一个属性。

    <template>
        <p>FullName: {{fullName}}</p>
        <p>FirstName: <input type="text" v-model="firstName"></p>
    </template>
    
    <script>
    export default {
        name: "app",
        data(){
            return {
                firstName: 'Su',
                lastName: 'Junyang',
                fullName: ''
            }
        },
        watch:{
            firstName: {
                handler(newName, oldName) {
                    this.fullName = newName + ' ' + this.lastName;
                },
                // 如果设置了false,那么在页面第一次渲染以后不会触发侦听器
                immediate: true
            }
        }
    };
    </script>
    
    

    deep 深度侦听

    所谓深度侦听就是侦听对象内部属性的值。

    我们之前用的侦听器都只能侦听一个变量的变化,(重点看一下代码中的注释)例如:

    data:{
        return {
            // 字符串发生变化,可以侦听
            firstName: 'Su',
            room:{
                name:"大床房",
                // 当房号发生变化的时候,侦听器并不能侦听到。
                // 因为侦听器只侦听到room,不能侦听number或者name
                number: 302
            }
        }
    },
    
    

    此时我们就需要深度侦听。
    深度侦听在代码上并不难实现,只需要在handler的基础上添加一个deep属性,代码如下:

    watch:{
        room:{
            handler(newRoom,oldRoom){
                console.log("房间号发生了变化")
            },
            deep: true
        }
    }
    

    案例:使用侦听器和定时器实现伪模糊搜索

    <template>
      <div class="search">
        <input type="text" v-model="inputValue" />
        <div class="search-block" v-for="(element, index) in results" :key="index">
          {{ element }}
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data() {
        return {
          results: [],
          mockData: [
            '浙江大学',
            '中国人民大学',
            '清华大学',
            '清华大学附属中学',
            '浙江理工大学',
            '浙江工业大学'
          ],
          inputValue: ''
        };
      },
      watch: {
        inputValue(value) {
          if (!!value) {
            setTimeout(() => {
              this.results = this.mockData.filter(el => {
                console.log(value);
    
                return el.indexOf(value) !== -1;
              });
            }, 300);
          }
        }
      }
    };
    </script>
    
    
    
    展开全文
  • 主要介绍了Vue数据监听方法watch的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue监听数据变化

    千次阅读 2021-08-18 17:15:54
    监听数据变化,在Vue中是通过侦听器来实现的,时刻监听某个数据的变化 watch的基本用法 侦听器的书写位置 <script> export default { name: "app", // 数据 key---data value---Function data: function ...
  • 调用的数组的push、splice、pop等方法改变数组元素时并不会触发数组的setter,这就会造成使用上述方法改变数组后,页面上并不能及时体现这些变化,也就是数组数据变化不是响应式的(对上述不了解的可以参考这篇文章...
  • vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新。 mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一...
  • 了解vue监听数据变化

    千次阅读 2021-01-15 15:43:57
    由于接触过c#,swift等语言,对于属性有所了解,所以像a.name = "jack"发生变化后,可以触发其他的操作并不觉得唐突。当有一天使用vue.js的时候发现。在js中竟然也可以这样做,简直太方便了。数据驱动view就是这样...
  • vue监听接口状态

    2021-01-20 08:53:05
    data () { return { time: false // 判断 } }, methods: { dinshi () { if (this.time === true) {//判断是否超时 console.log('超时') this.$router.push({//跳转页面 path: `/error` ...
  • 本篇文章主要介绍了浅谈vue实现数据监听的函数 Object.defineProperty,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue监听数据对象变化

    2021-01-19 16:19:47
    监听数据对象变化,最容易想到的是建立一个需要监视对象的表,定时扫描其值,有变化,则执行相应操作,不过这种实现方式,性能是个问题,如果需要监视的数据量大的话,每扫描一次全部的对象,需要的时间很长。...
  • 在10月05日凌晨Vue3的源代码...通过可响应对象,实现对数据的侦测,从而告知外界数据变化。实现可响应对象的方式: getter 和 setter defineProperty Proxy 关于前两个 API 的使用方式不多赘述,单一的访问器 getter
  • 首先确认 watch是一个对象,一定要当成对象来用。  对象就有键,有值。 ...即监听变化时应该执行的函数。 2.第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对
  • Vue页面监听数据变化

    千次阅读 2020-07-19 15:49:43
    某个页面需要根据路由query查询参变化执行对应的操作,放在生命周期钩子函数里面都不太合适,因为生命周期钩子函数是针对组件的不是针对页面的,所以需要通过watch监听路由query查询参的变化,代码如下: ...
  • 在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次。 export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ ...
  • watch: { '$store.state.viedoUrl': {... deep: true, //深度监听 handler(newValue, oldValue) { // console.log(newValue, oldValue, '视频组件赋值') this.playerOptions.sources[0].src = newValue }, }, },
  • 主要介绍了在vue中对数组值变化监听与重新响应渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • watch中绑定object或array时,数据没有更新(deep);prop的默认值(default)没有触发watch函数(immediate);多个prop更新时触发同一个处理函数watch 方法是什么在Vue中,我们可以[监视属性何时更改]并对响执行一些操作...
  • vue通过watch监听数据变化

    千次阅读 2020-04-12 10:18:15
    一:通过watch来监听数据变化,并通过打印显示 <template> <div class="personal-center"> <input type="text" placeholder="请输入" v-model="inputVal"/> <p>{{newVal}}</p> &...
  • vue监听数据变化

    千次阅读 2020-04-10 15:51:36
    监听数据变化,在Vue中是通过侦听器来实现的,你也可以将它理解为监听器,时刻监听某个数据的变化。 watch的基本用法 在之前我们在js中添加了data、methods,这一次我们要添加的是watch属性。下面我们先来眼熟一下...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,868
精华内容 17,947
关键字:

vue3监听数据变化