源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Vue.js计算属性computed与watch(5)

  • 时间:2022-02-17 19:16 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Vue.js计算属性computed与watch(5)
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用**计算属性**。 [b]Vue实例的computed的属性[/b]
 <div class="test">
    <p>原始的信息{{message}}</p>
    <p>计算后的信息{{ComputedMessage}}</p>
  </div>
js代码
 var myVue = new Vue({
    el: ".test",
    data: {
      message:12
    },
    computed:{
      ComputedMessage:function () {
        return this.message+10;
      }
    }
  });
界面会显示 12 和 22 上述的方式是一种缓冲的实现的效果,这种实现的方式依赖于它的缓寸,计算得到的属性只有在相关依赖(message)改变的时候才会重新取值,这就意味着只要message没有发生改变的时候,多次访问ComputedMessage都不会再重新执行计算的这个属性。。 计算后的ComputedMessage属性始终是依赖于message的 [b]通过调用函数实现同样的效果[/b]
 <div class="test">
    <p>原始的信息{{message}}</p>
    <p>计算后的信息{{MessageFunction()}}</p>
  </div>
js代码
 var myVue = new Vue({
    el: ".test",
    data: {
      message:12
    },
    methods:{
      MessageFunction:function () {
        return this.message+10;
      }
    }
  });
得到的结果和上面的结果是一样的,但是每次被重新渲染的时候都会被重新调用。 所以使用上述两种方式的时候,首先要确定你是否需要借助缓存 [b]使用vue实例的watch[/b] 这个没有看懂呀 但是使用computed这个属性更加的方便和快捷
  <div class="test">
    <p>原始的信息{{fullName}}</p>
  </div>
js代码
  var myVue = new Vue({
    el: ".test",
    data: {
      firstName:"fur",
      lastName:"bool"
    },
    computed:{
      fullName:function () {
        return this.firstName+this.lastName
      }
    }
  });
而且你可以computed属性设置setter getter是默认就有的。 演示set和get的调用过程
  <div class="test">
    <p>原始的信息{{fullName}}</p>
    <button @click="fu">test</button>
  </div>
js代码
 var myVue = new Vue({
    el: ".test",
    data: {
      firstName:"fur",
      lastName:"bool",
      fullName:"sasas dsdsd dsds"
    },
    computed:{
      fullName:{
        get:function () {
          console.log("get")
          return this.firstName+this.lastName
        },
        set:function(value){
          var names=value.split(" ");
          this.firstName=names[0];
          this.lastName=names[names.length-1];
          console.log("set");
        }
      }
    },
    methods:{
      fu:function () {
        myVue.fullName="sasas dsdsd dsds";
        console.log(myVue.firstName);   //sasas
        console.log(myVue.lastName);  //dsds
      }
    }
  });
首先会输出get; 在点击按钮为fullName赋值的时候首先调用set 再调用get方法。 [b]自定义的Watcher[/b] 虽然计算属性在大多数情况下是非常合适的,但是有的时候也需要自定义一个watcher。这是因为你想要在数据变化响应的时候,执行异步操作胡总和其他的操作是非常有用的。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部