zoukankan      html  css  js  c++  java
  • Vue-比较方法、计算属性和侦听器

      分别用方法、计算属性和侦听器实现当fristName和lastName改变时,fullName跟着改变。

    一、方法:

    html:

    <div id="app">
        {{fullName()}}
        {{age}}
    </div>

     js:

      var app=new Vue({
        el:'#app',
        data:{
          firstName:'li',
          lastName:'zhao',
          age:18
        },
        methods:{
          fullName:function(){
              console.log('计算了一次')
              return this.firstName+' '+this.lastName
          }
        }
      })

     

      当age发生改变时,fullName()执行了一次。

    计算属性:

    html:

    <div id="app">
        {{fullName}}
        {{age}}
    </div>

    js:

    var app=new Vue({
        el:'#app',
        data:{
          firstName:'li',
          lastName:'zhao',
          age:18
        },
        computed:{
          fullName:function(){
            console.log('计算了一次')
            return this.firstName+' '+this.lastName
          }
        }
    })

      当age发生改变时,由于firstName,lastName没有发生改变,所以fullName读的是缓存中的,计算并没有执行,性能较好。 

    侦听器

     html:

    <div id="app">
        {{fullName}}
        {{age}}
    </div>

     js:

    var app=new Vue({
        el:'#app',
        data:{
          firstName:'li',
          lastName:'zhao',
          fullName:'li zhao',
          age:18
        },
        watch:{
          firstName:function(){
            console.log('计算了一次')
            return this.fullName = this.firstName+' '+this.lastName
          },
          lastName:function(){
            console.log('计算了一次')
            return this.fullName = this.firstName+' '+this.lastName
          }
        }
      })

     

      当age发生改变时,由于firstName,lastName没有发生改变,所以fullName读的是缓存中的,计算并没有执行,性能较好;但是需要侦听firstName和lastName,代码量多。

    总结 

      watch和computd可以从缓存中读数据,性能较好,只要相关数据没有改变就不执行;方法性能不好,只要页面数据有改变,方法就会执行;

      对于某种功能,三者都能实现读情况下,优先选computd。

  • 相关阅读:
    vue-cli常用配置
    浏览器进程线程时间循环、与vue netTick的实现原理
    WebSocket的兼容性
    hiper、sitespeed性能工具
    excel操作
    performance面板使用,以及解决动画卡顿
    axios设置了responseType: 'json‘’,ie问题
    docker服务重启
    Spring Boot AOP之对请求的参数入参与返回结果进行拦截处理
    python中几种单例模式的实现
  • 原文地址:https://www.cnblogs.com/superlizhao/p/9620906.html
Copyright © 2011-2022 走看看