精华内容
下载资源
问答
  • 侦听属性

    2019-09-10 20:08:51
    侦听属性 1. 侦听属性依靠watch选项来实现对自身变量的检测。 侦听属性只能检测在data中设置好的数据。 当侦听的属性值发生变化时,执行侦听属性所对应的函数。 语法格式: watch:{ 侦听属性:function...

    侦听属性

    1. 侦听属性依靠watch选项来实现对自身变量的检测。

    	侦听属性只能检测在data中设置好的数据。
    	当侦听的属性值发生变化时,执行侦听属性所对应的函数。
    

    语法格式:

    watch:{
    	   侦听属性:function(newValue,oldValue){
    	     //当侦听属性的取值发生变化时所执行的代码
    	}
    }
    
    例:watch:{
    	       kb:function(newValue,oldValue){
    	          this.b=newValue*1024;
    		}
    	}
    

    2.侦听属性的第二种语法格式:可以为侦听属性添加新的属性。

    watch:{
       侦听属性:{
          handler:function(newValue,oldValue){
              //当侦听属性的取值发生变化时所执行的代码
    			}
    		}
    	}
    
    例:watch:{
          	kb:{
           	   handler:function(newValue,oldValue){
              		 this.b=newValue*1024;
    				},
    		immediate:true     //当Vue实例创建成功后自动执行kb的handler函数。
    		}
    	}
    

    3. 侦听属性的新属性:

    	immediate:逻辑值。若设置为true,则当Vue实例创建时会自动执行一次侦听属性的函数。
    	
    	deep:逻辑值。设置是否进行深层的监听(针对自定义对象来进行设置的)。
    
    • 当侦听属性是一个对象时,改变对象内属性的取值时无法让侦听属性执行函数的。
    • 除非改变侦听属性的完整对象,才可以执行侦听属性的函数。
    • 当设置了deep:true时,利用对象的属性进行修改,对象属性的原值无法得到保留。
    例:data:{ obj:{a:10,b:20} }
        (A)watch:{
                obj:function(newValue,oldValue){
                     console.log('旧值:a=' + oldValue.a + ",b=" + oldValue.b);
    				 console.log('新值:a=' + newValue.a + ",b=" + newValue.b);
    			}
    		}
    测试:vm.obj.a=100;       //不触发侦听属性obj的function函数
          vm.obj={a:100,b:500};   //触发侦听属性obj的function函数
          旧值:a=10,b=20
          新值:a=100,b=400
        (B)watch:{
                obj:{
    				handler:function(newValue,oldValue){
                     	console.log('旧值:a=' + oldValue.a + ",b=" + oldValue.b);
    					console.log('新值:a=' + newValue.a + ",b=" + newValue.b);
    			},
    			deep:true
    		}
    	}
    测试:vm.obj.a=‘A’    //触发侦听属性obj的handler函数
          旧值:a=‘A’,b=20
          新值:a=‘A’,b=20
    

    4. 可以通过$watch形成Vue实例的方法:

    vm.$watch(‘kb’,function(newValue,oldValue){
          this.b=newValue*1024;
    })
    

    5. 计算属性和侦听属性的区别:

    • 计算属性使用computed选项实现;侦听属性使用watch选项或者$watch()方法实现。

    • 计算属性无需在data数据中定义;侦听属性必须侦听data数据中已有的变量。

    • 计算属性是依赖变量发生变化自动再次计算该属性的值。
      侦听属性是被侦听的变量发生变化执行指定的函数。

    • 计算属性无法完成异步操作;侦听属性可以完成异步操作。

    侦听属性纠纷想到这里啦~
    good luck to you!!

    展开全文
  • Vue 侦听属性

    2019-09-09 21:22:34
    构造器的 watch 选项,用于定义 Vue 实例的侦听属性侦听属性可以用来观察和响应 Vue 实例上的数据变动。 当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...

    简介

    构造器的 watch 选项,用于定义 Vue 实例的侦听属性。

    侦听属性可以用来观察和响应 Vue 实例上的数据变动。

    当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。

    细想一下这个例子:

    <div id="demo">{{ fullName }}</div>
    
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
      },
      watch: {
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
          this.fullName = this.firstName + ' ' + val
        }
      }
    })
    

    上面的代码是命令式且重复的。将它与计算属性的版本进行比较:

    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar'
      },
      computed: {
        fullName: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
    })
    

    现在,好得多了。

    侦听器

    虽然计算属性在大多数情况下更合适,但有时也需要通过侦听属性来实现一个自定义的侦听器。

    这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,侦听器才是最有用的。

    <div id="watch-example">
      <p>
        Ask a yes/no question:
        <input v-model="question">
      </p>
      <p>{{ answer }}</p>
    </div>
    
    <!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 -->
    <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <script>
    var watchExampleVM = new Vue({
      el: '#watch-example',
      data: {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!'
      },
      watch: {
        // 如果 `question` 发生改变,这个函数就会运行
        question: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.getAnswer()
        }
      },
      methods: {
        // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
        // 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
        // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
        // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
        // 请参考:https://lodash.com/docs#debounce
        getAnswer: _.debounce(
          function () {
            if (this.question.indexOf('?') === -1) {
              this.answer = 'Questions usually contain a question mark. ;-)'
              return
            }
            this.answer = 'Thinking...'
            var vm = this
            axios.get('https://yesno.wtf/api')
              .then(function (response) {
                vm.answer = _.capitalize(response.data.answer)
              })
              .catch(function (error) {
                vm.answer = 'Error! Could not reach the API. ' + error
              })
          },
          // 这是我们为判定用户停止输入等待的毫秒数
          500
        )
      }
    })
    </script>
    

    在这个示例中,使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

    除了 watch 选项之外,您还可以使用 vm.$watch 。

    展开全文
  • Vue侦听属性

    2021-07-27 20:50:14
    在最新的vue文档中 监视属性更名为侦听属性 侦听属性watch: 1.当被监视的属性变化时,回调函数自动调用,进行相关操作 2.监视的属性必须存在,才能进行监视! 3.监视的两种写法: (1).newVue时传入watch配置 (2...

    在最新的vue文档中 监视属性更名为侦听属性 

    侦听属性watch:

                        1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

                        2.监视的属性必须存在,才能进行监视!

                        3.监视的两种写法:

                                (1).new Vue时传入watch配置

                                (2).通过vm.$watch监视

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>监视属性</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>当前数值为:{{number}}</h2>
    			<button @click="changeNumber">number++</button>
    		</div>
    	</body>
    
    	<script type="text/javascript">
    		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    		
    		const vm = new Vue({
    			el:'#root',
    			data:{
    				number: 1
    			},
    			methods: {
    				changeNumber(){
    					this.number++
    				}
    			},
                // 第一种写法 new Vue时传入watch配置
    			// watch:{
    			// 	number:{
    			// 		//handler什么时候调用?当number发生改变时。
    			// 		handler(newValue,oldValue){
    			// 			console.log('number被修改了',newValue,oldValue)
    			// 		}
    			// 	}
    			// }
    		})
            
            // 第二种写法 通过vm.$watch监视
            vm.$watch('number', {
                immediate:true, //初始化时让handler调用一下
                function (newValue,oldValue) {
                    console.log('number被修改了', newValue,oldValue)
                }
            })
    	</script>
    </html>

    在配置对象的方法里面有两个参数 newValue, oldValue

    newValue 属性被修改之后的值

    oldValue 属性被修改之前的值 

    在配置对象中还有一个配置项:immediate:true

    初始化时让handler调用一下

    深度监视

    深度监视:

                        (1).Vue中的watch默认不监测对象内部值的改变(一层)。

                        (2).配置deep:true可以监测对象内部值改变(多层)。

                    备注:

                        (1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!

                        (2).使用watch时根据数据的具体结构,决定是否采用深度监视。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>天气案例_深度监视</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h3>a的值是:{{numbers.a}}</h3>
    			<button @click="numbers.a++">点我让a+1</button>
    			<h3>b的值是:{{numbers.b}}</h3>
    			<button @click="numbers.b++">点我让b+1</button>
    		</div>
    	</body>
    
    	<script type="text/javascript">
    		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    		
    		const vm = new Vue({
    			el:'#root',
    			data:{
    				isHot:true,
    				numbers:{
    					a:1,
    					b:1,
    					c:{
    						d:{
    							e:100
    						}
    					}
    				}
    			},
    			watch:{
    				isHot:{
    				//监视多级结构中某个属性的变化
    				/* 'numbers.a':{
    					handler(){
    						console.log('a被改变了')
    					}
    				} */
    				//监视多级结构中所有属性的变化
    				numbers:{
    					deep:true,
    					handler(){
    						console.log('numbers改变了' + this.numbers)
    					}
    				}
    			}
    		})
    
    	</script>
    </html>

    只要监听的对象内部的值发生了改变都会触发watch种监视当当前属性的函数

    监视属性简写

    watch属性监听配置项在不考虑 deep:true 和 immediate:true 配置项的时候可以使用简写的形式

    在vm.watch对象中的写法

    // new Vue时传入watch配置对象中的简写形式
    	watch:{
    		number (newValue,oldValue) {
    			console.log('number被修改了',newValue,oldValue)
    		}
    	}

    在vm.$watch方法中的写法

    // 第二种写法 通过vm.$watch监视
            vm.$watch('number', function (newValue, oldValue) {
    			console.log('number被修改了', newValue, oldValue)
            })

    通过函数的方式实现简写

    注意:函数不要写成箭头函数(箭头函数内的this会指向window)代码会报错

    computed和watch之间的区别:

                        1.computed能完成的功能,watch都可以完成。

                        2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

            两个重要的小原则:

                        1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。

                        2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,

                            这样this的指向才是vm 或 组件实例对象。

    展开全文
  • # 计算属性 vs 方法 vs 侦听属性 API (opens new window) 如果一个功能同时可以使用计算属性(computed)、方法(methods)、侦听属性(watch)来实现的时候推荐使用计算属性。 计算属性 方法 侦听属性 计算属性是基于...

    API (opens new window)

    如果一个功能同时可以使用计算属性(computed)、方法(methods)、侦听属性(watch)来实现的时候推荐使用计算属性。

    计算属性方法侦听属性
    计算属性是基于它们的响应式依赖进行缓存的每当触发重新渲染时,调用方法将总会再次执行函数有缓存,但相比计算属性,实现起来要复杂很多。
    展开全文
  • 侦听属性的作用: 侦听属性,响应数据的变化,当数据变化时,会立即执行对应的函数,其属性值可以为函数、字符串、对象和数组。 属性值类型: 函数类型 函数类型中,被侦听的数据作为函数名,当数据改变时,执行...
  • 一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解,本文主要介绍两者的用法、使用场景及其两者的区别。 本文的代码请猛戳github博客,纸上得来终觉浅,大家动手多敲敲代码! 计算属性 1.介绍 计算属性是...
  • vue计算属性和侦听属性

    千次阅读 2018-07-12 12:58:15
    计算属性和侦听属性计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:&lt;div id="example"&gt; {{ message.split('...
  • Vue之侦听属性

    2020-12-15 08:19:18
    8、侦听属性 当你有一些数据需要随着其它数据变动而变动时,可以使用侦听属性 例1: data: { firstName: '道格拉斯', lastName: '狗剩' fullName: '道格拉斯 狗剩' }, watch: { firstName(val){ console.log('...
  • 如果导致计算属性发生变化的变量是某个对象的属性,计算属性不会监听整个对象(但侦听属性会,故有浅监听和深度监听的配置),而只会监听对象中会导致计算属性发生变化的属性。所以,当可以用计算属性替代侦听属性,...
  • 侦听属性 watch

    2019-06-21 21:49:06
    侦听属性 watch watch 作用 用来监听data中定义的数据,当data中定义的数据发生了变化,那么watch中的key就会触发 watch是一个对象 watch: {} watch中可以设置多个类型的键值 new Vue({ el: '#app', data: { ...
  • 文章目录计算属性缓存 vs 方法计算属性 vs 侦听属性不同点总结 计算属性缓存 vs 方法 <p>Reversed message: "{{ reversedMessage() }}"</p> // 在组件中 methods: { reversedMessage: function () {...
  • 计算属性与侦听属性 <template> <div> <h1>计算属性和侦听属性</h1> <!-- 表达式太复杂的话会导致模板难以维护, 而且如果多个地方使用该表达式的话会导致重复, --> <div> ...
  • Vue的计算属性computed、侦听属性watch和混入mixin
  • Vue侦听属性代码

    2021-05-26 10:33:17
    Vue侦听属性代码 最终效果图 描述 label标签不能为空,为空出现红色标识 下面标签为总价格, 以下是内联样式代码,写在头部 <style> .warn{ color: red; } </style> 以下是主体代码 <body> ...
  • 2.computed计算属性能够完成的操作watch侦听属性都可以完成,但是watch侦听属性能够完成的操作computed不能全部完成,比如异步操作,computed内部不能执行异步操作,watch内部可以执行异步操作 3.computed计算属性...
  • 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,...
  • 前天面试的时候,被问到“计算属性和侦听属性的区别”,当时一脸懵,我只知道计算属性和方法的区别。希望能帮到大家。 区别 计算属性是依赖的值改变会重新执行函数,计算属性是取返回值作为最新结果,所以里面不能...
  • 今天说说这个vue中的计算属性与侦听属性,通过简单的总结呢,可以在项目中能够更好的掌握代码,不至于一行代码看半天,哈哈哈。下面就开始了。 一、计算属性:computed:当一个值受多个值影响的时候就用计算属性 计算...
  • 计算属性和侦听器1 计算属性2 侦听属性 1 计算属性   在前边有讲到双括号表达式中,可以使用 JavaScript 表达式,但是这种表达式会让我们的模板变得复杂,降低代码的可读性,且难以维护,例如: <div id=...
  • 文章目录一、计算属性1.1、计算属性的使用1.2、计算属性结果是被缓存的1.3、计算属性的getter和setter二、侦听属性 更多关于Vue.js的系列文章请点击:Vue.js开发实践(0)-目录页 一、计算属性 1.1、计算属性的...
  • 二、侦听属性 2.1watch方法侦听属性 2.2 例子 继续vue命令,计算属性computed和侦听属性watch 参考:Vue中的计算属性和侦听器 一、计算属性 1.1computed前言 我们先看例子,在文本中输入姓名,在最下方显示...
  • 计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性,只有...
  • Vue 的组件对象支持了计算属性 `computed` 和侦听属性 `watch` 2 个选项,很多同学不了解什么时候该用 `computed` 什么时候该用 `watch`。先不回答这个问题,我们接下来从源码实现的角度来分析它们两者有什么区别。
  • Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用...
  • 1.侦听属性(watch):当有一些数据需要随着其它数据变动而变动时,用watch 可以看出上面的代码重复性很大 2.计算属性(computed):实时检测属性有没有发生变化,当发生变化时,相应computed的属性也会随之发生...
  • 计算属性(computed) 方法(methods) 侦听属性(watch) 1. 计算属性 (computed) 模板变内的表达式过于复杂时,难以维护,这时便可以使用计算属性 例如:{{ name && length &&name.length &...
  • Vue-侦听属性watchwatch选项handler方法和immediate属性deep属性字符串形式监听注销watchwatch监听路由 watch选项 当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。 <div id="app"&...
  • watch(侦听属性) 例子 cosnt app = new Vue({ //... watch:{ 要监听的属性:{ handler(新值,旧值){ //... }, 功能属性 } } }) handler 给 监听的属性 绑定了一个handler方法,之前写的 watch 方法...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,336
精华内容 20,134
关键字:

侦听属性