精华内容
下载资源
问答
  • Vue监听数据变化
    千次阅读
    2021-08-18 17:15:54

    监听数据变化,在Vue中是通过侦听器来实现的,时刻监听某个数据的变化

    watch的基本用法

    1. 侦听器的书写位置
      写在export default中与data和methods用,隔开
    <script>
      export default {
        name: "app",
        // 数据 key---data value---Function
        data: function () {
          return {
             count: 1
          };
        },
        // 方法 key---methods value---{}
        methods: {},
        //在export default中添加即可不用管顺序
        watch: {
           //监听内容
           count() {
            console.log("count发生了变化");
          }
        }
      };
    </script>
    

    监听器里的方法一定要与被监听的变量名一致

    侦听器的进阶用法

    获取前一次的值

    有的时候需要上一次的数据,再上一个案例中添加一个参数即可获取旧值

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

    handler方法和immediate属性

    immediate: 可以让页面第一次渲染的时候去触发侦听器
    handler: 监听到修改之后这个函数会执行
    侦听器实际上是一个对象,里面包含了handler方法和其他属性:

    <script>
      export default {
        name: "app",
        watch: {
          firstName: {
            handler: function (newName, oldName) {
              this.fullName = newName + " " + this.lastName;
            },
            immediate: true
          }
        }
      };
    </script>
    
    更多相关内容
  • 本篇文章主要介绍了Vue监听数据变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 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监听数据变化

    千次阅读 2020-04-10 15:51:36
    监听数据变化,在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监听数据变化原理

    2021-04-22 11:08:21
    Vue监听数据变化原理 vue2.x版本底层使用Object.defineProperty监听数据变化,数据变化后通知观察者observer 我们模拟new Vue()过程初始化一个vue的实例 const vm = new Vue_({ key: '' + Date.now(), data: ...

    Vue监听数据变化原理

    vue2.x版本底层使用Object.defineProperty监听数据变化,数据变化后通知观察者observer

    我们模拟new Vue()过程初始化一个vue的实例

    const vm = new Vue_({
        key: '' + Date.now(),
        data: function () {// 数据
            return {
                menu: {
                    home: 'home',
                    mine: 'mine'
                }
            }
        },
        watch:{// 监听变化
            "menu.home":function (newv, oldv) {
                console.log(`newv=${newv},oldv=${oldv}`)
            },
            "menu.mine": function (newv, oldv) {
                console.log(`newv=${newv},oldv=${oldv}`)
            }
        },
        methods:{
            setHomeName(name){
                console.log('name=',name)
                this.data.menu.home = name
            }
        }
    })
    

    调用vm的方法改变home的值,vm.setHomeName('这是home主页')

    上面这个方法在Vue中实际上相当于this.setHomeName('这是home主页')

    下面是Vue_的具体实现

    // Vue实例
    const Vue_ = function(props){
        const {key,data,watch,methods} = props;
        this._id = key;
        this.data = data();
        this.depen(watch);
        this.recursion(this.data)
        this.mapMethods(methods)
    }
    /**
     * 给wathc对象添加订阅
     * @param {Object} watch 
     */
    Vue_.prototype.depen = function(watch){
        for (var key in watch) {
            console.log('key=',key)
            this.observer(this._id).subscribe(key, watch[key])
        }
    }
    /**
     * 递归调用
     * @param {*} obj 
     * @param {*} path 
     */
    Vue_.prototype.recursion = function(obj,path){
        for (var key in obj) {
            this.defineReaactive(obj, key, obj[key], path)
        }
    }
    /**
     * 给对象添加getter/setter方法
     * @param {*} obj 对象
     * @param {*} key 属性名
     * @param {*} val 属性值
     * @param {*} path 属性路径
     */
    Vue_.prototype.defineReaactive = function(obj, key, val, path){
        var _self = this;
        path = `${path ? path + '.' : ''}${key}`
        if (typeof val === 'object') {
            this.recursion(val, path);
        } else {
            Object.defineProperty(obj, key, {
                set(newv) {
                    console.log(`path=${path},key=${key},newv=${newv},oldv=${val}`)
                    _self.observer(_self._id).publish(path, newv, val)
                    if (newv !== val) val = newv;
                },
                get() {
                    return val
                }
            })
        }
    }
    Vue_.prototype.mapMethods = function(methods){
        var _this = this;
        for (var key in methods){
            Vue_.prototype[key] = function(){
                return methods[key].apply(_this,arguments)
            }
        }
    }
    // 观察者
    Vue_.prototype.observer = (function () {
        var namespaces = {}, NAMESPACE = '_default'
        /**
         * 监听
         * @param {string} path 
         * @param {*} cache 
         * @param {Function} cb 
         */
        var _subsribe = function (path, cache, cb) {
            if (!cache[path]) {
                cache[path] = [];
            }
            var listeners = cache[path];
            listeners.push(cb)
        }
        /**
         * 发布订阅
         * @param {string} path 
         * @param {*} cache 
         * @param  {arguments} args 
         */
        var _publish = function (path, cache, ...args) {
            if (cache[path]) {
                var listeners = cache[path];
                listeners.forEach(function (cb) {
                    cb.apply(cb, args)
                })
            }
        }
        /**
         * 创建观察者实例
         * @param {String} namespace 
         * @returns {{subscribe, publish}} 返回一个对象
         */
        var create = function (namespace) {
            namespace = namespace || NAMESPACE;
            var listenerCache = {}
            var subscribe = function (type, cb) {
                _subsribe(type, listenerCache, cb)
            }
            var publish = function (type, ...args) {
                _publish(type, listenerCache, ...args)
            }
            return namespaces[namespace] ? namespaces[namespace] : namespaces[namespace] = { subscribe, publish }
        }
        return create;
    })();
    
    

    下图给出了Data,observer, dep, wather之间的关系
    在这里插入图片描述

    参考文献

    • 深入浅出Vue.js-第二章. [D]. 刘博文. 人民邮电出版社
    展开全文
  • 主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 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通过watch监听数据变化

    千次阅读 2020-04-12 10:18:15
    一:通过watch来监听数据变化,并通过打印显示 <template> <div class="personal-center"> <input type="text" placeholder="请输入" v-model="inputVal"/> <p>{{newVal}}</p> &...
  • 2.环境:vue+数据从父组jian件传进(TimeIntervalNumberData) <template> <div> <div id="chart-temperature-timeintervalnumber" style="width: 200px;height:30px;"></...
  • 今天小编就为大家分享一篇Vue2实时监听表单变化的示例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue监听数据改变

    千次阅读 2021-01-29 13:15:32
    当data中的数据变化时,watch监听到并且执行 <template> <div> <p>大名: {{fullName}}</p> <p>名称: <input type="text" v-model="firstName"></p&g
  • 实例如下: vm.$watch('某data数据',function(val){ ...以上这篇Vue监听数据渲染DOM完以后执行某个函数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 1、使用v-model在select标签上进行数据双向绑定, 2、在data里边添加val:‘ ...以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • Vue监听数据对象变化

    2021-01-19 16:19:47
    监听数据对象变化,最容易想到的是建立一个需要监视对象的表,定时扫描其值,有变化,则执行相应操作,不过这种实现方式,性能是个问题,如果需要监视的数据量大的话,每扫描一次全部的对象,需要的时间很长。...
  • Vue监听数据变化

    万次阅读 2017-09-24 14:25:38
    1.轻度监视 window.onload=function(){ var vm=new Vue({ el:'#box', data:{ a:111,
  • 项目用vue版本是2.0的,项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把[removed]事件挂在到mounted mounted() { const that =...
  • 主要介绍了React和Vue监听变量变化的方法,本文通过一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state,具体内容详情大家跟随小编一起通过本文学习吧
  • vue监听数据变化 watch

    千次阅读 2020-12-20 20:59:35
    1、watch是一个对象,对象就有键跟值,键就是我们要监听数据,值可以是函数:当我们监听数据发生变化时,需要执行的函数,这个函数有两个形参,第一个是当前的值,第二个是变化后的值;值也可以是method中的函数...
  • watch: { '$store.state.viedoUrl': {... deep: true, //深度监听 handler(newValue, oldValue) { // console.log(newValue, oldValue, '视频组件赋值') this.playerOptions.sources[0].src = newValue }, }, },
  • }来监听websocket服务端发过来的数据,每当服务端发送一条数据,received_msg就会获取这条数据内容。现在我想将received_msg压入到data中的totalMessage数组中,服务端发一条数据来,就自动往totalMessage中压...
  • 本篇文章主要介绍了浅谈vue实现数据监听的函数 Object.defineProperty,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  •  值可以是函数:当我们监听数据发生变化时,需要执行的函数,这个函数有两个形参,第一个是当前的值,第二个是变化后的值;举例如(ps1)  值也可以是method中的函数名:函数名要用引号来包裹;举例如(ps3)...
  • 1 vue监听路由参数变化,路由变化的时候刷新数据 path的路径还是本页面,通过query传入query数据,但是页面数据没有刷新 <router-link tag="div" :to="{path:'/playList',query:{id:item.id}}"></router-...
  • Vue监听store中数据变化的两种方式

    千次阅读 2020-12-10 13:52:56
    方式一 watch: { "$store.state.userInfo.Name":{ handler:function(newVal,oldVal){ console.log(newVal,oldVal); } } } ... return this.$store.... //需要监听数据 } }, watch: { isEdit(newVal, oldVal)
  • vue中的watch监听数据变化

    千次阅读 2020-11-05 17:13:17
    (1)通过watch监听data数据变化数据发生变化时,就会打印当前的值,但这种方法有时监听不到 watch: { data(val, newval) { console.log(val) console.log(newval) } } (2)通过watch监听docData数据的...
  • 在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次。 export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ ...

空空如也

空空如也

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

vue监听数据变化

友情链接: 小游戏_翻纸牌.rar