精华内容
下载资源
问答
  • vue中watch同时监听多个数据,多个数据执行顺序 工作中遇到小问题,在此记录一下,代码如下: goodsData和idList都是从父组件传递过来值。 下面是父组件中发送请求消耗时间,idList消耗8ms,所以在子组件之...

    vue中watch同时监听多个数据,多个数据的执行顺序

    工作中遇到的小问题,在此记录一下,代码如下:
    在这里插入图片描述
    goodsData和idList都是从父组件传递过来的值。
    下面是父组件中发送请求消耗的时间,idList消耗8ms,所以在子组件之中,先执行idList里面的代码。在这里插入图片描述

    所以得出结论:watch 里面的顺序执行异步任务,
    如果watch监听父组件传递过来的数据,
    数据执行的顺序依据数据接收快慢执行,(即速度快的先执行,速度慢的后执行!)
    
    
    
    
    展开全文
  • 1、watch理解: 监听器,监听某个数据变化从而来执行一些操作,当data里面数据发生变化时候来执行一下开销较大或异步的操作1、监听值类型(简单类型)数据//在一个vue实例new Vue({el:"#myApp",data:{num1:1,...

    1、watch

    理解: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作

    1、监听值类型(简单类型)数据

    //在一个vue实例中

    new Vue({

    el:"#myApp",

    data:{

    num1:1,

    num2:2

    },

    methods:{},

    watch:{

    //这里两个属性,第一个值是变化后最新的值,第二个是变化前

    num1(after,before){

    this.num2 = after +1

    }

    immediate:true //页面首次加载的时候做一次监听。

    //这里的意思就是,监听num1的变化,当num1的数据发生变化的时候,来操作num2的值

    }

    })

    2、监听引用(复杂)类型的数据

    new Vue({

    el:"#myApp",

    data:{

    obj:{

    userName:"caicai"

    }

    },

    watch:{

    obj:{

    handler(newValue,oldValue){

    // handler函数是当你的obj发生变化的时候你要做什么

    console.log(newValue.userName,oldValue.userName);

    },

    deep:true //是否深度侦听,true开启,false关闭,默认false

    //加了deep之后相当于在对象obj每一层的属性都加上了handler侦听器。否则的话侦听到的只是引用地址,不会执行handler函数

    }

    }

    });

    2、computed

    理解:

    计算属性,顾名思义就是通过某个属性(数据)来计算得到某个属性,这个重点在于计算,我们希望的是拿到data数据后处理一下,得到计算的结果。

    在原vue中的template模板,作者初衷只是进行一些简单的运算,那么比较复杂的计算就可用computed来进行操作

    1、第一种操作,写在模板里,导致模板过重,难于维护

    {{str.split("").reverse().join("")}}

    2、第二种,使用一个方法来调用,若多处使用,就执行多次,降低运行速度,性能减少

    {{fn(str)}}

    3、第三种,使用过滤器,具有缓存,只要str不发生变化,就不会再次进行运算

    {{reverseStr}}

    到这里我先略微总结一下这两者的区别,以及使用场景

    computed:

    1、监控自己定义的变量,不用再data里面声明,函数名就是变量名

    2、适合多个变量或对象进行处理后返回一个值(结果)。若这多个变量发生只要有一个发生变化,结果都会变化。

    3、计算的结果具有缓存,依赖响应式属性变化,响应式属性没有变化,直接从缓存中读取结果。

    4、在内部函数调用的时候不用加()。

    5、必须用return返回

    6、不要在computed 中对data中的数据进行赋值操作,这会形成一个死循环。

    watch:郑州妇科医院 http://www.xadsyyfk.com/

    1、watch 函数是不需要调用的。

    2、重点在于监控,监控数据发生变化的时候,执行回调函数操作。

    3、当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch

    4、函数名就是你要监听的数据名字

    使用场景:

    computed:

    1、一个需要的结果受多个数据影响的时候,比如购物车结算金额(受到很多处的价格结算)。

    2、操作某个属性,执行一些复杂的逻辑,并在多处使用这个结果。

    3、内部函数中多处要使用到这个结果的。

    watch :

    1、监控一些input框值的特殊处理,适合一个数据影响多个数据。

    2、数据变化时,执行一些异步操作,或开销比较大的操作

    3、updated

    理解: 是vue生命周期里面的一个钩子函数—data数据更新后触发视图更新。这里是视图更新之后的操作可以在这里执行。

    触发条件:

    1、当data中定义的数据有变化时就会加载updated方法。

    2、任何数据的更新,如果要做统一的业务逻辑处理

    3、在大多数情况下,此期间避免更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

    特点:

    1.执行到它的时候时候是数据发生变化且界面更新完毕

    2.不能监听到路由数据(例如网址中的参数)

    3.所有的数据发生变化都会调用(消耗性能)

    4.只要数据发生变化,每次触发的代码都是同一个

    展开全文
  • Vue 通过 watch 选项提供了一个更通用方法,来响应数据变化。当需要在数据变化时执行异步或开销较大操作时,这个方式是最有用。 属性侦听方式有两种: 1、实例中的watch属性 2、vm.$watch 监听数据 在前...

    watch侦听器

    侦听器(watch),就是当数据发生变化时,及时做出响应处理。Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

    属性的侦听方式有两种:

    1、实例中的watch属性
    2、vm.$watch

    监听数据

    在这里插入图片描述
    在前两个input框中输入数据之后,通过watch监听数据,同步显示在第三个input框中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
           <input type="text" name="" @keyup='getFullname' v-model='firstname' id="">+
           <input type="text" name="" @keyup='getFullname' v-model='lastname' id="">=
           <input type="text" name="" id="" v-model='fullname'>
        </div>
        <script>
           
            var vm=new Vue({
                el:'#app',
                data:{
                    firstname:'',
                    lastname:'',
                    fullname:''
                },
                methods: {
                    getFullname(){
                        this.fullname=this.firstname+this.lastname
                    }
                },
                watch:{
                    'firstname':function(newVal,oldVal){
                    	console.log(newVal+'====='+oldVal);
                        this.fullname=newVal+'-'+this.lastname
                    }
                }
            })
        </script>
    </body>
    </html>
    

    使用这个属性可以监视data中指定数据的变化,然后触发这个watch中对应的function处理函数—>
    不断的监测nVal的变化,nVal变化之后,便会触发函数

    在这里插入图片描述
    将输入的数据删除掉,查看终端:
    在这里插入图片描述
    第一行是监听到的数据
    第二~三行是进行删除操作时,监听到的数据,等号(=)后边是旧的值,等号前是新值

    监听路由

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>
            <router-view></router-view>
        </div>
        <script>
           
           var login={
               template:'<h1>这是登录的组件</h1>'
           }
           var register={
               template:'<h1>这是注册的组件</h1>'
           }
    
           var router=new VueRouter({
               routes: [
                   {path:'/',redirect: '/login'},
                   {path:'/login',component:login},
                   {path:'/register',component:register}
               ]
           })
            var vm=new Vue({
                el:'#app',
                data:{
                 
                },
                methods: {
                  
                },
                router,
                // 使用这个属性 可以监视data中指定数据的变化,然后出发这个watch中对应的function处理函数
                watch:{
                    // this.$route.path
                    '$route.path':function(newVal,oldVal){
                        if (newVal==='/login') {
                            console.log('欢迎进入到登录');
                        }else if(newVal==='/register'){
                            console.log('欢迎进入到注册');
                        }
                    }
                }
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • watch监听器用来监听data数据值,只要监听的数据一变化,它就能执行相应函数. 创建监听器通过watch属性,它是一个对象. 开发时,能用computed实现就用computed 需要执行异步操作时候,就要用到watch &...

    watch

    watch监听器用来监听data中数据的值,只要监听的数据一变化,它就能执行相应的函数.
    创建监听器通过watch属性,它是一个对象.
    
    开发时,能用computed实现的就用computed
    需要执行异步操作的时候,就要用到watch
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>computed</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <input type="text" name="" id="" v-model='firstName'>
            <input type="text" name="" id="" v-model='lastName'>
            <h1>全名:{{fullName}}</h1>
            <h2>全名:{{watchFullName}}</h2>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    firstName: '',
                    lastName: '',
                    watchFullName: ''
                },
                //计算属性是根据data中已有的属性,计算得到一个新的属性
                //创建计算属性通过computed关键字,它是一个对象
                computed: {
                    fullName() {
                        return this.firstName + this.lastName
                    }
                },
                //watch监听器用来监听data中数据的值,只要监听的数据一变化,它就能执行相应的函数
                //创建监听器通过watch属性,它是一个对象
                watch: {
                    //这里面的函数名很特殊,它是你需要监听的data的名字,这个函数还包含两个参数,一个是newVal,一个是oldVal
                    firstName(newVal, oldVal) {
                        this.watchFullName = newVal + this.lastName
                    },
                    lastName(newVal, oldVal) {
                        this.watchFullName = this.firstName + newVal
                    }
                }
                //开发时,能用computed实现的就用computed
                //需要执行异步操作的时候,就要用到watch
            })
        </script>
    </body>
    
    </html>

    深度监听

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>深度监听</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <input type="text" v-model='user.name'>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    user: {
                        name: 'vivi'
                    }
                },
                watch: {
                    //监听对象不能使用下面这种写法,要使用深度监听
                    // user(newVal, oldVal) {
                    //     console.log('改变了')
                    // }
                    user: {
                        handler(newVal, oldVal) {
                            console.log(newVal.name)
                        },
                        //deep:true表示深度监听
                        deep: true
                    }
                }
            })
        </script>
    </body>
    
    </html>

     

    展开全文
  • vue中watch相关用法

    2020-07-22 14:30:08
    Vue中watch用法 当需要在数据变化时执行异步或开销较大操作时,使用侦听器 watch 方式是最有用 监听某一数据变化 监听对象或数组变化 监听对象或数组某一属性变化 监听路由变化 监听某一数据变化 ...
  • vue基础实践-watch监听器(监听响应式数据变化) watch监听响应式数据改变(watch中监听的响应式数据必须在data初始化)= > computed中的setter类似,只不过computed是自己单独设置计算属性(不能和data...
  • 本文参考:computed、methods、watch区别watch 和 computed的区别是:相同点:他们两者都...watch更适用于数据变化时的异步操作。一、computed计算属性computed是计算属性,它会根据所依赖的数据动态显示新的计算结...
  • watch的用法: watch大多数来监听一个值来影响多个值的改变,比如vue的文档对watch是这么定义的 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这...
  • 理解: 监听器,监听某个数据变化从而来执行一些操作,当data里面数据发生变化时候来执行一下开销较大或异步的操作 1、监听值类型(简单类型)数据 //在一个vue实例 new Vue({ el:"#myApp", data:{ num1:1...
  • 2、不支持异步操作,当computed内有异步操作时无效,无法监听数据变化。 3、computed属性会默认走缓存,计算属性是基于他们响应式依赖进行缓存,也就是基于data声明过或者父组件传递props中的数据通过计算...
  • 不支持异步,当 computed 内有异步操作时无效,无法监听数据变化值。 computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性 如果一个属性是由其他属性计算而来,这个属性...
  • 理解: 监听器,监听某个数据变化从而来执行一些操作,当data里面数据发生变化时候来执行一下开销较大或异步的操作 1、监听值类型(简单类型)数据 //在一个vue实例 new Vue({ el:"#myApp", data:{ num1:1,...
  • 1.2.wacth监听数据,watch监听的参数可以是data定义数据; 不支持缓存,数据变,直接会触发相应操作;watch支持异步。 1.3.computed是计算属性,计算结果依赖于参数数据; 但是computed结果数据,即例子中的...
  • watch是用来监听某一个数据,当数据发生改变是,watch就会自动触发,然后我们可以进行一些任务 2.computed computed是为了暴露一个全局变量,这个全局变量是经由一定逻辑产生 那么在做项目时候该如何选择呢...
  • vue中watch的用法 其实watch它是对data中的数据监听回调,当data中的数据发生变化的时候。监听就会被回调函数中传入两个参数一个newVal另一个为oldVal。 watch的使用场景:当data中的某个数据发生变化时,我们需要做...
  • vue中watch和computed

    2020-03-21 16:14:45
    当需要在数据变化时执行异步或开销较大操作时,watch方式是最有用。可以监听路由变化 <div id="box"> <input type="text" v-model="firstName"> <input type="text" v-model="secondName"&...
  • 代码中监听了一个简单属性currentPage和一个对象selectForm,只要它们值一改变就会触发其中逻辑函数或者异步请求 watch: { //属性监听 currentPage(oldV, newV) { this.exchangeCurrentPage(); }, //...
  • 不支持异步,当computed内有异步操作时无效,无法监听数据变化 computed 属性值会默认走缓存,计算属性是基于它们响应式依赖进行缓存,也就是基于data声明过或者父组件传递props中的数据通过计算得到值 ...
  • vue中watch与computed区别watch 与 computedwatch 与 computed区别 watch 与 computed watch 与 computed区别 watch 监听数据变化执行handler函数 computed是从现有数据计算出现新数据 computed 会缓存,...
  • vue中计算属性(computed)和监听器(watch)区别 总结: 1.计算属性可以防止监听属性滥用,但一些异步请求,计算属性做不到,还得watch来完成。 2.计算属性有缓存
  • vue中的watch使用

    2021-03-03 01:57:08
    回调函数得到参数为新值和旧值,在回调函数可以进行一些异步操作或开销较大操作。表达式只接受简单键路径。对于更复杂表达式,可以用一个函数取代。 ​ 简单理解就是通过Vue实例上数据变化去进行相应...
  • Vue监听器属性watch

    2020-07-05 08:48:34
    当需要监听一个对象改变时,普通的watch方法无法监听到对象内部属性改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听 <div id="app"> <div> <span>名:<...
  • vue中的watch 和computed区别 1》computed计算属性: 支持缓存,只有依赖数据发生变化,才会重新进行计算。不支持异步,当computed内有异步操作时无效,无法监听数据变化。computed属性会默认走缓存,计算属性是...
  • 一:watch的使用方式(监听器) 1、watch 函数是不需要调用的。 2、重点在于监控,监控数据发生变化的时候,执行回调函数操作。 3、当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch 4、函数名...
  • 不支持异步,当computed内有异步操作时无效,无法监听数据变化。 watch监听数据变化 监听data数据变化 监听的数据就是data中的已知值 我变化影响别人 watch支持异步 1.watch擅长处理场景:一个数据...
  • Vue: watch

    2020-10-09 18:06:32
    当需要监听一个对象改变时,普通的watch方法无法监听到对象内部属性改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听 <div id="app"> <div> <span>名:<...
  • computed 属性值会默认走缓存,计算属性是基于它们响应式依赖进行缓存,也就是基于data声明过或者父组件传递props中的数据通过计算得到值 如果一个属性是由其他属性计算而来,这个属性依赖其他属性,是...
  • Vue.js 监听属性 watch,我们可以通过 watch 来响应数据变化。 watch中可以使用异步代码。 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
  • Vue中computed和watch的区别 总结: computed: 1、支持缓存,只有依赖数据发生改变,才会重新进行计算 2、不支持异步,当computed内有异步操作时无效,无法监听数据的变化 3、如果一个属性是由其他属性计算而来,这...
  • 1.父子组件通信 父组件给子组件传参,最常见方式:父组件使用 v-bind 绑定传送,子组件使用 props 接收即可 <DistrictIdSelector :fieldType="2" ...但是存在一个父子组件渲染异步的问题,通过这个方法传

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 135
精华内容 54
关键字:

vue中watch的异步监听

vue 订阅