精华内容
下载资源
问答
  • 计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性,只有...
  • 一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解,本文主要介绍两者的用法、使用场景及其两者的区别。 本文的代码请猛戳github博客,纸上得来终觉浅,大家动手多敲敲代码! 计算属性 1.介绍 计算属性是...

    前言

    一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解,本文主要介绍两者的用法、使用场景及其两者的区别。
    本文的代码请猛戳github博客,纸上得来终觉浅,大家动手多敲敲代码!

    计算属性

    1.介绍

    计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。它有以下几个特点:

    • 数据可以进行逻辑处理,减少模板中计算逻辑。
    • 对计算属性中的数据进行监视
    • 依赖固定的数据类型(响应式数据)

    计算属性由两部分组成:get和set,分别用来获取计算属性和设置计算属性。默认只有get,如果需要set,要自己添加。另外set设置属性,并不是直接修改计算属性,而是修改它的依赖。

    computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          //this.fullName = newValue 这种写法会报错
          var names = newValue.split(' ')
          this.firstName = names[0]//对它的依赖进行赋值
          this.lastName = names[names.length - 1]
        }
      }
    }
    

    现在再运行 vm.fullName = ‘John Doe’ 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。

    2.计算属性 vs 普通属性

    可以像绑定普通属性一样在模板中绑定计算属性,在定义上有区别:计算属性的属性值必须是一个函数。

    data:{ //普通属性
      msg:'浪里行舟',
    },
    computed:{ //计算属性
      msg2:function(){ //该函数必须有返回值,用来获取属性,称为get函数
        return '浪里行舟';
      },
      reverseMsg:function(){
      //可以包含逻辑处理操作,同时reverseMsg依赖于msg,一旦msg发生变化,reverseMsg也会跟着变化
        return this.msg.split(' ').reverse().join(' ');
     }
    }  
    

    3.计算属性 vs 方法

    两者最主要的区别:computed 是可以缓存的,methods 不能缓存;**只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存的计算结果,不会多次执行。**网上有种说法就是方法可以传参,而计算属性不能,其实并不准确,计算属性可以通过闭包来实现传参:

    :data="closure(item, itemName, blablaParams)"
    computed: {
     closure () {
       return function (a, b, c) {
            /** do something */
            return data
        }
     }
    }
    

    侦听属性

    Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性watch。watch中可以执行任何逻辑,如函数节流,Ajax异步获取数据,甚至操作 DOM(不建议)。

    1.常规用法

    <template>
      <div class="attr">
        <h1>watch属性</h1>
        <h2>{{ $data }}</h2>
        <button @click="() => (a += 1)">修改a的值</button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          a: 1,
          b: { c: 2, d: 3 },
          e: {
            f: {
              g: 4
            }
          },
          h: []
        };
      },
      watch: {
        a: function(val, oldVal) {
          this.b.c += 1;
        },
        "b.c": function(val, oldVal) {
          this.b.d += 1;
        },
        "b.d": function(val, oldVal) {
          this.e.f.g += 1;
        },
        e: {
          handler: function(val, oldVal) {
            this.h.push("浪里行舟");
          },
          deep: true //用于监听e对象内部值的变化
        }
      }
    };
    </script>
    

    watch.gif

    2.使用 watch 的深度遍历和立即调用功能

    使用 watch 来监听数据变化的时候除了常用到 handler 回调,其实其还有两个参数,便是:

    • deep 设置为 true 用于监听对象内部值的变化
    • immediate 设置为 true 将立即以表达式的当前值触发回调
    <template>
        <button @click="obj.a = 2">修改</button>
    </template>
    <script>
    export default {
        data() {
            return {
                obj: {
                    a: 1,
                }
            }
        },
        watch: {
            obj: {
                handler: function(newVal, oldVal) {
                    console.log(newVal); 
                },
                deep: true,
                immediate: true 
            }
        }
    }
    </script>
    

    以上代码我们修改了 obj 对象中 a 属性的值,我们可以触发其 watch 中的 handler 回调输出新的对象,而如果不加 deep: true,我们只能监听 obj 的改变,并不会触发回调。同时我们也添加了 immediate: true 配置,其会立即以 obj 的当前值触发回调。
    我们再看一个实际工作中常遇到的场景:组件创建的时候我们获取一次列表的数据,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表。

    created(){
        this.fetchPostList()
    },
    watch: {
        searchInputValue(){
            this.fetchPostList()
        }
    }
    

    有没有办法优化一下呢?

    watch: {
        searchInputValue:{
            handler: 'fetchPostList',
            immediate: true
        }
    }
    

    首先,在watchers中,可以直接使用函数的字面量名称;其次,声明immediate:true表示创建组件时立马执行一次。

    两者之间对比

    image.png

    从上面流程图中,我们可以看出它们之间的区别:

    • watch:监测的是属性值, 只要属性值发生变化,其都会触发执行回调函数来执行一系列操作。
    • computed:监测的是依赖值,依赖值不变的情况下其会直接读取缓存进行复用,变化的情况下才会重新计算。

    除此之外,有点很重要的区别是:计算属性不能执行异步任务,计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务,就交给侦听属性。watch也可以检测computed属性。

    接下去我们看个用watch来实现防抖的例子:直到用户停止输入超过1秒后,才更新视图。

    <template>
      <div>
        {{ fullName }}
        <div>firstName: <input v-model="firstName" /></div>
        <div>lastName: <input v-model="lastName" /></div>
      </div>
    </template>
    <script>
    import { setTimeout } from "timers";
    export default {
      data: function() {
        return {
          firstName: "浪里行舟",
          lastName: "前端工匠",
          fullName: "浪里行舟 前端工匠"
        };
      },
      watch: {
        firstName: function(val) {
          clearTimeout(this.firstTimeout);
          this.firstTimeOut = setTimeout(() => {
            this.fullName = val + " " + this.lastName;
          }, 1000);
        },
        lastName: function(val) {
          clearTimeout(this.lastTimeout);
          this.lastTimeOut = setTimeout(() => {
            this.fullName = this.firstName + " " + val;
          }, 1000);
        }
      }
    };
    

    watch1.gif

    总结

    计算属性适合用在模板渲染中,某个值是依赖了其它的响应式对象甚至是计算属性计算而来;而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。

    • computed能做的,watch都能做,反之则不行
    • 能用computed的尽量用computed

    欢迎关注公众号:前端工匠,你的成长我们一起见证!
    image

    参考资料

    展开全文
  • 主要介绍了详解vue 计算属性与方法跟侦听器区别(面试考点),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 001_XXXX(h3) watch监听单个,computed监听多个 思考业务场景: 类似淘宝,当我输入某...相关属性,改变都会触发当前函数 源代码 <html> <head> <title></title> </head> <

    001_计算属性和侦听属性(h3)

    • 模板是简单的声明式逻辑,对于任何复杂逻辑,你都应当使用计算属性。

    • watch 侦听属性 通常用来监听单个,监听多个需要写重复代码。当需要在数据变化时执行异步或开销较大的操作时,侦听属性是最有用的。

    • computed 计算属性 通常用来监听多个,多数情况下更合适

    • 我们可以通过在表达式中调用方法来达到和使用计算属性同样的效果

    • 不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

    • 当watch监听的是复杂数据类型的时候需要做深度监听

    • computed 监视对象,写在了函数内部, 凡是函数内部有this.相关属性,改变都会触发当前函数

    • 源代码

    <html>
    <head>
    	<title></title>
    </head>
    <body>
    	<div id="app">		
    		<div>watch侦听基本数据类型</div>
    		<input type="text" name="aaaaaaaaaaaaaa" class="bbbbbbbbbbbbbb" v-model='msg01_dl'>
    		<div>watch侦听复杂数据类型</div>
    		<input type="text" name="" v-model='msg02_dl.text02_dl'>
    		<div>computed计算属性</div>
    		(<input type="text" name="" v-model='n1'>+
    		<input type="text" name="" v-model='n2'>)*
    		<input type="text" name="" v-model='n3'>={{result}}
    	</div>
    
    	<script type="text/javascript" src="../js/vue.js"></script>
    	<script type="text/javascript">
    		
    		new Vue({
    			el:'#app',
    			data(){
    				return {
    					msg01_dl:'initial_value_dl',
    					msg02_dl:{text02_dl:'initial_value_dl'},
    					n1:'',
    					n2:'',
    					n3:'1'
    				}
    			},
    			// computed监听多个
    			computed:{
    				result(){
    					return (Number(this.n1)+Number(this.n2))*Number(this.n3)
    				}
    			},
    			// watch监听单个
    			watch:{
    				/* watch监基本数据类型 第一个参数是新数据,第二个参数是旧数据*/
    				msg01_dl(newval,oldval){
    					if(newval=='caojiwan'){
    						alert(newval)
    					}
    				},
    				/* watch监复杂数据类型 第一个参数是新数据,第二个参数是旧数据*/
    				msg02_dl:{
    					handler(newval,oldval){
    						if(newval.text02_dl=='caojiwan'){
    							alert(newval.text02_dl)
    						}
    					},
    					deep:true
    				}
    			}
    		})
    	</script>
    </body>
    </html>
    
    • 浏览器界面

    展开全文
  • 主要介绍了Vue.js计算属性和侦听器的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 计算属性 我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性 在双大括号中直接使用表达式获取结果 <div id="example"> {{ message.split('').reverse().join('') }} </...

    计算属性

    我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性

    1. 在双大括号中直接使用表达式获取结果
    <div id="example">
         {{ message.split('').reverse().join('') }} 
    </div>
    
    1. 在Vue定义参数中添加computed属性,或者是在methods中添加方法
    <div id="example"> 
        <p>
            Computed reversed message: {{ reversedMessage }}
        </p> 
        <p> {{reversedMessageMethod() }}</p>
    </div>
    
    
    computed: { 
        // 计算属性的 getter
         reversedMessage: function(){return this.message.split(‘’).reverse().join(‘’) } }
        methods: { 
              //计算属性的 getter 
              reversedMessageMethod: function(){return this.message.split(‘’).reverse().join(‘’) 
              } }
    

    注意点:不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数

    我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代

    计算属性的setter

    计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:

    // ...
    computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
    

    侦听属性

    当需要在数据变化时执行异步或开销较大的操作时,使用监听器是最有用的

    watch: { 
        // 如果`question`发生改变,这个函数就会运行这里如果question是引用类型,只有当引用地址发生变化才能被监测 
        question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' }, 
        // deep为true表示深度监听,如果question为对象,deep表示question内部属性值变化也可以监听到 
        question: { 
            handler:function (newQuestion, oldQuestion) { 
                this.answer = 'Waiting for you to stop typing...' 
            } ,
         deep:true 
        } }
    
    

    侦听属性的完整实例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表单</title>
        <script src="../js/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            {{msg}}
            <br>
            a:<input type="text" v-model.number="a">
            <br>
            +
            <br>
            b:<input type="text" v-model.number="b">
            <br>
            =
            <br>
            <output>{{total}}</output>
    
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    msg: "hello",
                    a: '',
                    b: '',
                    total: 0
                },
                methods: {
    
                },
                //监听  侦听
                watch: {
                    a(newValue, oldValue) {
                        this.total = newValue + this.b
                    },
                    b(newValue, oldValue) {
                        this.total = newValue + this.a
                    }
                }
            })
        </script>
    </body>
    
    </html>
    
    
    展开全文
  • 共同点,都是根据依赖变化从而发生变化 不同点: 计算属性中,返回的是一个...侦听器中,变化的值是data中存在的值,并且不包含return 在侦听器中可以执行异步操作,并控制操作的频率,这些都是计算属性无法做到的 ...

    共同点,都是根据依赖变化从而发生变化
    不同点: 计算属性中,返回的是一个data中没有的值(新值)并且必须包含return,
    侦听器中,变化的值是data中存在的值,并且不包含return 在侦听器中可以执行异步操作,并控制操作的频率,这些都是计算属性无法做到的

    展开全文
  • vue计算属性和侦听属性

    千次阅读 2018-07-12 12:58:15
    计算属性和侦听属性计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:&lt;div id="example"&gt; {{ message.split('...
  • computd 计算属性 案例: 为什么vue中要使用计算属性? 让一个字符反向 分析:<p> {{ msg.split('').reverse().join('') }} </p> 上面代码的写法,有些违背关注点分离,而且会让我们的DOM结构看起来...
  • 模板的设计初衷是为了处理简单的逻辑(声明式逻辑),在模板中加入过多的逻辑会使模板难以阅读维护
  • 一、计算属性computed 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。 多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。对比普通函数方式,每次访问都...
  • 计算属性由两部分组成getset,分别用来获取设置计算属性;默认只有get,set设置计算属性,修改属性依赖并不直接修改计算属性 computed:{ fullName:{ //getter get:function(){...return } //setter set...
  • 方法2:使用computed计算属性 方法3:使用watch侦听属性 3.可以使用上下按钮调节数字大小 使用input 属性 type=“number” 4.结果框禁止输入 input添加事件οnfοcus=“this.blur()” 一、利用原生JS事件 通过...
  • 如果导致计算属性发生变化的变量是某个对象的属性,计算属性不会监听整个对象(但侦听属性会,故有浅监听深度监听的配置),而只会监听对象中会导致计算属性发生变化的属性。所以,当可以用计算属性替代侦听属性,...
  • 计算属性和侦听计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: &lt;div id="example"&gt; {{ ...
  • 计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用。注意:计算属性里面必须要ruturn,否则无法拿到结果。计算属性本质是一个函数,...
  • 计算属性 在模板中使用
  • 利用计算属性computed做了个简单的两个数相加的效果,代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt;  &lt;head&gt;  &lt;meta charset="utf-8" /&gt;  &lt;...
  • 前天面试的时候,被问到“计算属性和侦听属性的区别”,当时一脸懵,我只知道计算属性和方法的区别。希望能帮到大家。 区别 计算属性是依赖的值改变会重新执行函数,计算属性是取返回值作为最新结果,所以里面不能...
  • 计算属性和侦听

    2019-02-18 11:06:31
    计算属性和侦听器1. 计算属性computed2. 计算属性 vs 方法3. 计算属性的setter4. 侦听器 watch 1. 计算属性computed &lt;div id="app"&gt; &lt;p&gt;Original message: "{{ message...
  • vue 计算属性和侦听计算属性是基于响应式依赖进行缓存,只在相关响应式依赖(被调用)发生改变时才会重新求值(同一函数定义为一个方法时,只有触发重新渲染时,才会再次执行函数)。 // 以下计算属性将不再...
  • 计算属性 对于任何复杂逻辑都应该使用计算属性,而不是在模板内写表达式。直接在模板内写太多了逻辑会让模板太重且难以维护。 基础例子 <div id="app"> <div>姓:{{lastName}},名:{{firstName}}&...
  • 计算属性 在我们实际开发过程中,会有很多简单运算会直接放在模板中,例如简单的三元表达式等,但是过于复杂的运算放在模板中,会导致模板过重,而且代码冗余,不方便维护,所以这个时候我们Vue 有了这个计算属性,...
  • vue中侦听器、计算属性和方法的区别 <div>watch: {{total}}</div> // 侦听器 <div>computed: {{total}}</div> // 计算属性 <div>methods: {{total()}}</div> // 方法 watch: {...
  • 计算属性 1、计算属性的使用场景 2、计算属性的缓存 3、计算属性的setter 侦听计算属性 1、计算属性的使用场景 Vue中的计算属性的设计是用来对一些数据进行简单运算的。虽然在模板语法中可以使用js表达式...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,922
精华内容 9,568
关键字:

计算属性和侦听属性