精华内容
下载资源
问答
  • Vue计算属性与监听属性 目录Vue计算属性与监听属性Vue.JS计算属性Vue.js监听属性 Vue.JS计算属性 关键词:computed 作用:处理一些复杂逻辑时很有用 例子:反转字符串 <div id="app"> <p>原始字符串: {...

    Vue计算属性与监听属性

    Vue.JS计算属性

    关键词:computed
    作用:处理一些复杂逻辑时很有用
    例子:反转字符串

    <div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>  //如果没用计算属性则应该是Message.split('').reverse().join('')
    </div>
     
    <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      computed: {   //computed声明了一个计算属性reversedMessage
        // 计算属性的 getter,提供的函数将用作属性 vm.reversedMessage 的 getter 
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
          //mv.reversedMessage依赖于mv.Message,在mv.Message发生变化时,mv.reversedMessage也会更新
        }
      }
    })
    </script>
    

    computed与methods
    两者本效果上是一样的,可以相互代替。

    区别:
    (1)computed是基于他的依赖缓存 ,只有相关依赖发生改变时才会重新取值。
    methods在重新渲染的时候,函数纵湖重新调用执行。
    (2)获取computed声明的属性的值:{{ 属性名 }}
    例子:{{reversedMEssage}}
    获取methods函数的值:{{ 函数名() }}
    例子:{{reversedMessage()}}
    (3)使用computed性能会更好,但如果不希望缓存,可以使用methods属性

    <div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
      <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>   //与computed的区别
    </div>
    <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      },
      methods: {
        reversedMessage2: function () {
          return this.message.split('').reverse().join('')
        }
      }
    })
    </script>
    

    computed的setter
    computed属性的默认值是getter,但在需要的时候可以停工一个setter

    <div id="app">
      <p>{{ site }}</p>
    </div>
    var vm = new Vue({
      el: '#app',
      data: {
        name: 'Google',
        url: 'http://www.google.com'
      },
      computed: {
        site: {
          // getter
          get: function () {
            return this.name + ' ' + this.url
          },
          // setter
          set: function (newValue) {
            var names = newValue.split(' ')   //以空格进行分割,形成字符串数组,与split('')是有区别的
            this.name = names[0]
            this.url = names[names.length - 1]
          }
        }
      }
    })
    // 运行vm.site是会调用 setter, vm.name 和 vm.url 也会被对应更新
    vm.site = '菜鸟教程 http://www.runoob.com';
    document.write('name: ' + vm.name);
    document.write('<br>');
    document.write('url: ' + vm.url);
    

    运行结果:
    在这里插入图片描述

    Vue.js监听属性

    vue.js的监听属性watch,可以通过watch来响应数据的变化
    实例:通过watch实现计数器

    <div id = "app">
        <p style = "font-size:25px;">计数器: {{ counter }}</p>
        <button @click = "counter++" style = "font-size:25px;">点我</button>  //v-on监听事件,监听“点击按钮,后自加”,进行响应
    </div>
    <script type = "text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            counter: 1
        }
    });
    vm.$watch('counter', function(nval, oval) {  //监听,响应数据变化
        alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
    });
    </script>
    

    监听属性格式:

    vm.$watch('变量名',function(参数1,参数2){  
    //参数1数据变量数据改变前的值,参数2是变量数据改变后的值
    	//响应数据
    });
    

    例子:千米和米之间进行换算

    <div id = "computed_props">
        千米 : <input type = "text" v-model = "kilometers">: <input type = "text" v-model = "meters">
    </div>
    <p id="info"></p>
    <script type = "text/javascript">
        var vm = new Vue({
        el: '#computed_props',
        data: {
            kilometers : 0,
            meters:0
        },
        methods: {
        },
        computed :{
        },
        watch : {
            kilometers:function(val) {
                this.kilometers = val;
                this.meters = this.kilometers * 1000
            },
            meters : function (val) {
                this.kilometers = val/ 1000;
                this.meters = val;
            }
        }
        });
        // $watch 是一个实例方法
        vm.$watch('kilometers', function (newValue, oldValue) {
        // 这个回调将在 vm.kilometers 改变后调用
        document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
    })
    </script>
    

    运行结果:
    在这里插入图片描述

    展开全文
  • Vue 计算属性与监听属性

    千次阅读 2019-05-16 10:01:04
    这篇文章将介绍计算属性与监听属性去解决该问题。 计算属性 [什么是计算属性?] 首先,来看一个字符串反转的例子: <div id="app1"> {{ message.split('').reverse().join('') }} </div> <s...

    前面的话

    模板内的表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护。这篇文章将介绍计算属性与监听属性去解决该问题。

    计算属性

    [什么是计算属性?]

    首先,来看一个字符串反转的例子:

    
        <div id="app1">
             {{ message.split('').reverse().join('') }}
        </div>
        <script>
        	new Vue({
                el: "#app1",
                data: {
                    message: 'xiaoqi'
                }
            })
        </script>
    
    

    上面这个例子,在模板中表达式包括3个操作,相对比较复杂,也不容易看懂。

    所以在遇到复杂的逻辑时应该使用计算属性。

    将上例进行改写:

    <div id="app2">
        <p>原字符串:{{message}}</p>
        <p>计算后反转字符串: {{reverseMessage}}</p>
     </div>
    <script>
    new Vue({
            el: "#app2",
            data: {
                message: 'xiaoqi'
            },
            computed: {
                // 计算属性的getter
                reverseMessage: function() {
                    return this.message.split('').reverse().join('');
                }
            }
        })
    </script>
    

    在这里插入图片描述
    上面的模板中声明了一个计算属性reverseMessage。
    提供的函数将用作属性reverseMessage的getter(用于读取)。
    reverseMassage依赖于massage,在massage发生变化时,reverseMassage也会更新。

    [ computed Vs methods]

    我们发现computed属性完全可以由methods属性所代替,效果时完全一样的。既然使用methods就可以实现,那么为什么还需要计算属性呢?原因就是computed是基于它的依赖缓存,只有相关依赖发生改变时,才会重新取值。而使用methods,在重新渲染的时候,函数总会重新调用执行。可以说使用computed性能会更好。

    [ 依赖缓存]

    举一个更好说明computed是基于依赖缓存的例子:

     <div id="app3">
            <p>原字符串:{{message}}</p>
            <p>计算反转字符串:{{reverseMessage1}}</p>
            <p>计算反转字符串:{{reverseMessage1}}</p>
            <p>计算反转字符串:{{reverseMessage2()}}</p>
            <p>计算反转字符串:{{reverseMessage2()}}</p>
    </div>
    <script>
      var num = 1;
        new Vue({
            el: "#app3",
            data: {
                message: 'xiaoqi'
            },
            computed: {
                reverseMessage1:function () {
                    num += 1;
                    return num +  this.message.split('').reverse().join('');
                }
            },
            methods: {
                reverseMessage2() {
                    num += 1;
                    return num + this.message.split('').reverse().join('');
                }
            }
            
        })
    </script>
    

    在这里插入图片描述
    这个例子中,num是一个独立的变量。在使用reverseMessage1这个计算属性时,num会变成2 。但是当再使用reverseMessage1属性时,num没有变化,依然是2。因为Vue实例的message数据没有发生变化 于是DOM渲染就直接用这个值,不会重复执行代码。而reverseMessage2这个方法只要用一个,就要执行一次,于是每次返回的结果都不一样。

    [computed setter]

    每一个计算属性都包含一个getter与一个setter,上面的实例中都是计算属性的默认用法,只是利用getter来读取。
    computed属性默认只有getter,不过在需要时可以自己提供一个setter函数,当手动修改计算属性的值时,就会触发setter函数,执行自定义的操作。
    例如:

    <div id="app4">
        <p>{{ site }}</p>
    </div>
    <script>
     var vm =  new Vue({
            el: "#app4",
            data: {
                name: '淘宝',
                url: "http://www.Taobao.com"
            },
            computed: {
                site: {
                    // getter
                    get: function() {
                        return this.name + ' '+this.url;
                    },
                    // setter
                    set: function(newValue) {
                        var names = newValue.split(' ');
                        this.name = names[0];
                        this.url = names[names.length -1];
                    }
                }
            }
        });
        // vm.site的值是newValue对应的实参
        vm.site = 'baidu http://www.baidu.com';
        document.write('name:' + vm.name );
        document.write('<br>');
        document.write('url:'+ vm.url );
        </script>
    
    

    在这里插入图片描述
    上面的代码,当我们执行vm.site=‘baidu http://www.baidu.com’时,数据name与url都会相对更新,视图也会更新。

    监听属性 watch

    通过watch来响应数据的变化。
    虽然大多数情况计算属性都可以满足需要,但有时还是需要使用侦听器。当需要在数据发生变化时执行异步操作或者开销较大的操作时,就需要自定义监听器。

    [实例1]:通过使用watch实现计数器:

     <div id="app5">
            <p style = "font-size: 25px;">计数器:{{ counter }}</p>
            <button @click = "counter++" style="font-size: 25px"> 点击我</button>
     </div>
     <script> 
        var vm1 = new Vue({
            el: "#app5",
            data: {
                counter: 1
            }
        });
        vm1.$watch('counter',function(nval,oval) {
            alert('计数器值的变化:' + oval + '变为' + nval + "!");
        })
     </script>
    

    注意:$watch是一个实例方法,后面是一个回调函数,这个回调函数将在counter值改变之后调用
    在这里插入图片描述
    在这里插入图片描述

    [实例2]:千米与米之间的换算

      <div id="app6">
            千米:<input type="text" v-model='kilometers'>
            米:<input type="text" v-model='meters'>
            <p id="info"></p>
        </div>
         <script> 
         var vm2  = new Vue({
            el: '#app6',
            data: {
                kilometers:0,
                meters:0
            },
            watch: {
                // 监听kilometers数据
                kilometers: function(val) {
                    console.log(val);
                    this.kilometers = val;
                    this.meters = this.kilometers * 1000;
                },
                // 监听meters数据
                meters: function(val) {
                    this.meters = val;
                    this.kilometers = val /1000;
                }
            }
        });
        // $watch是一个实例方法
        vm2.$watch("kilometers",function(newValue,oldValue) {
            // 这个回调函数在vm2.kilometers改变后调用
            document.getElementById('info').innerHTML =  "修改前值为: " + oldValue + ",修改后值为: " + newValue;
        })
     </script>
    

    在这里插入图片描述

    [computed与watch的区别]

    简单来说:
    1:computed是同步的,watch可以实现异步
    2:computed中的函数都是带返回值的,wacth里面的函数可以不写返回值。

    我们可以在watch属性的方法里执行异步操作,使用定时器来限制操作的频率吧,添加中间状态等等,这些操作都是无法用计算属性实现的。

     <div id="app">
          {{count}}
          <button @click="count++">点击加一</button>
     </div>
    <script>
    new Vue({
    	el: "#app",
    	data: {
    	count: 1
    	},
    	watch: {
           count: function(val) {
     			var  that = this;
    			window.setTimeout(function() {
    				that.count = 0;
    		},2000)
    }
    }
    })
    </script>
    

    在这里插入图片描述
    当watch监听到count值发生变化时,2秒之后归零
    在这里插入图片描述

    计算属性、指令实现简单实战

    实例:通过计算属性、指令等实现简单的购物车

     <style>
            table {
                 border: 1px solid black;
                 width: 100%;
                }
          
            th {
                height: 50px;
                }
            th, td {
                border-bottom: 1px solid #ddd;
                }
        </style>
        <div id="app7">
            <table>
                <tr>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>购买价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="iphone in IP_Json">
                    <td>{{iphone.id}}</td>
                    <td>{{iphone.name}}</td>
                    <td>{{iphone.price}}</td>
                    <td>
                        <!-- v-bind指令的参数disabled,当iPhone.count === 0时,不可再点击 -->
                        <button :disabled="iphone.count === 0" @click="iphone.count-=1">-</button>
                        {{iphone.count}}
                        <button @click="iphone.count+=1">+</button>
                    </td>
                    <td>
                        <button @click="iphone.count=0">移除</button>
                    </td>
                </tr>
            </table>
            总价:${{totalPrice}}
        </div>
        <script>
         var shop = new Vue({
            el:"#app7",
            data: {
                IP_Json: [{
                    id: 1,
                    name: "huawei",
                    price: 5099,
                    count: 1
                  },
                  {
                      id:2,
                      name: "xiaomi",
                      price: 4899,
                      count: 1
                  },
                  {
                      id:3,
                      name: "iphone x",
                      price: 8900,
                      count: 1
                  },
                ]
            },
            computed : {
                totalPrice: function() {
                    var totalP = 0;
                    var len = this.IP_Json.length;
                    for( var i= 0; i<len;i++){
                        totalP += this.IP_Json[i].price * this.IP_Json[i].count;
                    }
                    return totalP;
                }
            }
        })
    </script>
    
    展开全文
  • 一、什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。 比如,我们在一个Vue实例里面设置data,myname的值为tom。这个值是未经过处理的...

    一、什么是计算属性

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

    比如,我们在一个Vue实例里面设置data,myname的值为tom。这个值是未经过处理的,所以在页面上显示tom。

    <div id="box">
            {{myname}}
    </div>
    
     var vm = new Vue({
            el:"#box",
            data:{
                myname:"tom"
            }
    

    但现在我们的要求是需要在页面上呈现首字母大写的姓名。我们可以在双大括号的模板里进行处理。

    <div id="box">
        {{myname.substring(0,1).toUpperCase()+myname.substring(1)}}
    </div>
    

    可以看出这样会造成模板非常复杂,难以更改和维护,可读性差,所以需要我们使用Vue的计算属性。

    二、计算属性的使用

    计算属性写在Vue实例之中的computed选项内,最终返回计算后的结果。

    <div id="box">
    	<p>{{getMyName}}</p>
    </div>
    
    var vm = new Vue({
    	el:"#box",
    	data:{
    		myname:"tom"
        },
        computed:{
    		getMyName() {
            	return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1)
            }
    }
    

    这样就成功在computed属性中完成了对属性的计算。在这里插入图片描述
    改变data值,计算属性也会重新计算,重新渲染界面。
    在控制台输入vm.myname=‘jack’,改变myname的值,可以看到:在这里插入图片描述
    在这里插入图片描述
    计算属性将jack更改为Jack,并且重新渲染在界面上。
    这个例子是改变字符串,如果不够直观,我们可以看一个操作加法的例子。

      <div id="app">
            <button @click="add()">给num1加1</button>
            <p>计数{{getSum}}</p>
      </div>
    
    var app = new Vue({
                el:"#app",
                data:{
                    num1:{
                        count:1
                    },
                    num2:{
                        count: 10
                    }
                },
                computed:{
                    getSum(){
                        return this.num1.count+this.num2.count
                    }
                },
                methods:{
                    add(){
                        this.num1.count++
                    }
                }
            })
    

    我们用add方法改变了num1的count值,计算属性也会相应做出改变。可以看到,计算属性可以依赖多个Vue 实例的数据。只要其中任一数据变化,计算属性就会重新执行计算。

    一个Vue实例的计算属性也可以依赖其他Vue实例的数据。

    三、计算属性缓存

    回到一开始的例子

        <div id="box">
            <p>使用计算属性:{{getMyName}}</p>
            <p>使用方法:{{getMyNameWithMethod()}}</p>
        </div>
    
    var vm = new Vue({
            el:"#box",
            data:{
                myname:"tom"
            },
            computed:{
                getMyName() {
                    console.log("计算属性调用")
                    return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1)
    
                }
            },
            methods:{
                getMyNameWithMethod() {
                    console.log("方法调用")
                    return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1);
                }
            }
        })
    

    可以看到,计算属性与方法都可以实现我们的操作。使用方法时需要加上(),而计算属性就像属性一样使用双大括号调用。
    计算属性更优越的地方在于计算属性可以实现缓存。
    我们现在将计算属性与方法分别都调用两次。

        <div id="box">
            <p>使用计算属性:{{getMyName}}</p>
            <p>使用方法:{{getMyNameWithMethod()}}</p>
    
            <p>使用计算属性:{{getMyName}}</p>
            <p>使用方法:{{getMyNameWithMethod()}}</p>
        </div>
    

    在这里插入图片描述
    可以看到控制台中显示,计算属性只调用一次,而方法调用了两次。计算属性计算后会进行缓存,再次调用时直接使用缓存数据,效率提高。计算属性只有在他的相关依赖发生改变的时候才会重新求值。
    在这里插入图片描述
    我们现在改变myname的值,看出计算属性因为数据的更改重新计算。而此时方法已经调用了4次。当在遍历一个大的数组以执行很多操作时,频繁调用方法,就会导致大量不必要的运算。

    四、监听属性

    Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:监听属性watch,它监听的是data中的各个属性。

       <div id="app">
            <input type="text" v-model="msg">
            <h3>{{msg}}</h3>
       </div>
    
    new Vue({
            el:"#app",
            data(){
                return {
                    msg:''
                }
            },
            watch:{
                msg:function(newMsg,oldMsg){
                    console.log(newMsg,oldMsg);
                    if(newMsg === 'hello'){
                        console.log("你好,我监听到了")
                    }
                }
        })
    

    在这里插入图片描述
    在这里插入图片描述
    在我们输入hello的过程中,控制台实时监听到我们的输入,并且显示新旧值。

    watch是对基本数据类型的简单监听。当我们需要监听对象、数组等复杂数据类型时,就需要深度监视。

        <div id="app">
    		<h4>{{stu[0].name}}</h4>
            <button @click="stu[0].name = 'tom'">改变</button>
        </div>
    
    new Vue({
            el:"#app",
            data(){
                return {
                    stu:[{name:'jack'}]
                }
            },
            watch:{
                stu:{
                    deep:true,
                    handler:function (newV,oldV){
                        console.log(newV[0].name)
                    }
                }
        	}
        })
    

    在需要监听的stu对象中把deep的值写为true,这样当我们点击按钮改变stu对象中数组的值的时候,就会执行handler这个方法。

    展开全文
  • vue计算属性与监听

    2021-03-05 15:19:52
    计算属性computed 减少模板计算逻辑 数据缓存 依赖固定的数据类型(响应式数据) 计算属性只在数据改变的时候执行计算 监听watch 更加灵活,通用 watch中可以执行任何逻辑,如函数节流,Ajax异步获取数据,...

    计算属性computed

    • 减少模板计算逻辑

    • 数据缓存

    • 依赖固定的数据类型(响应式数据)

      计算属性只在数据改变的时候执行计算

    监听watch

    • 更加灵活,通用
    • watch中可以执行任何逻辑,如函数节流,Ajax异步获取数据,甚至操作DOM

    vs

    • computed能做的,watch都能做,反之则不行
    • 能用computed的尽量用computed
    展开全文
  • 在自己做一些小功能的时候,老是用错了计算属性与监听属性的用法。虽然可以达到目的,但是还是使用正确的方式比较好。 <!-- VUE 语法练习 --> <template> <div class=""> <yd-cell-group :...
  • 本文通过基本实例给大家介绍了vue计算属性监听器的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 今天小编就为大家分享一篇vue计算属性无法监听到数组内部变化的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue计算属性监听

    2019-08-10 17:25:47
    Vue计算属性监听器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性和监听器</title> </head> <script src="./vue.js"><...
  • <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...Vue计算属性 方法 监听器</title> <script src="./vue.js"><.
  • Vue 计算属性,监听器,过滤器计算属性监听器过滤器计算属性和监视器的区别计算属性和过滤器的区别 计算属性 computed计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新。计算属性适合一个变量或者多...
  • 1.只需要一个就行 因为 计算属性依赖于数据源data 里面的属性的但是一次可以依赖多个 2. 因为新增属性 所以要写 return 监听: //监听的一种方式 vue 对象创建完成后直接写到实例属性上 //参数1:监听的对象 数据源 ...
  • 官方定义及用法 计算属性(computed) 对于任何复杂逻辑,你都...观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取...
  • 一、计算属性(computed) 当依赖的data对象中的属性值发生变化时,将会触发计算方法,在data对象中生成新的变量,并且会将新的变量缓存起来;(只要依赖的data对象属性值不发生改变,将不会触发计算方法;) ...
  • Vue计算属性VS监听器VS函数方法 new Vue({ el: '#app', data: { num: 1, //被监听,被函数调用,被属性调用 msg: 'hello', //页面中的无关数据 watchNum: '' }, watch:{ //监听器 num:{ //...
  • vue计算属性监听器、过滤器、生命周期 例子 值不发生变化,缓存在,不用计算逻辑,节省性能 计算属性的方法 过滤器
  • Vue 计算属性监听

    2020-03-21 11:22:25
    计算属性 一般情况下属性都是放到data中的,但是有些属性可能是需要经过一些逻辑计算后才能得出来,那么我们可以把这类属性变成计算属性。比如以下: <div id="app"> <label for="length">长:</...
  • vue计算属性 计算属性可以帮助我们简化代码,做到实时更新,不用再自己添加function去修改data。 首先看一下计算属性的基本写法(摘自官网) var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', ...
  • vue计算属性监听

    2020-07-22 21:07:39
    计算属性 computed computed 选项定义计算属性计算属性类似于 methods 选项中的函数。 比较: 计算属性:会进行缓存,只在相关响应式依赖发生改变的时候才会重新求值。 函数:每次都会执行函数体进行计算。 ...
  • 计算属性可以防止监听属性的滥用,但一些异步请求,计算属性做不到,还得watch来完成。 例如:解决element-ui分页中删除页面最后一条数据时,currentPage没有减一,页面列表为空问题时,就可以用到监听属性 监听...
  • vue 计算属性监听

    2019-05-28 11:09:07
    计算属性 写在computed中 1. 写起来像一个方法,用起来像一个属性(本质就是一个属性) 2. 注意点: - 只要跟计算属性相关的数据发生了改变,计算属性就会重新计算, 不相关的值发生变化,不会重新计算计算属性 ...
  • 有时在工作用用到计算属性监听属性,可以写少很多行的代码,对开发效率有很大的提高; 计算属性 computed 计算属性时根据实例的数据项计算而来的结果 优点是可以使用缓存,性能高 使用实例,属性fullName是由...

空空如也

空空如也

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

vue计算属性与监听

vue 订阅