Vue的计算属性与监视

crainyday

前端 / Vue

发布于：2019年7月29日

字数：945字

时长：4分钟

计算属性—>computed 监视—>watch

1.计算属性

在computed属性对象中定义计算属性的方法, 在页面中使用{{方法名}}来显示计算的结果.

在使用计算属性时, 都会用到缓存. 如果你不希望有缓存, 请用方法来替代.

<body>
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" readonly="readonly" v-model="fullName1"><br>
  <p>{{fullName1}}</p><!--注意:fullName1计算属性不一定每次都会调用-->
  <p>{{fullName()}}</p><!--注意:这里用方法也可以实现想要达到的效果,不同的是方法没有缓存-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
  const vm = new Vue({
    el:"#demo",
    data:{
      firstName:"A",
      lastName:"B",
    },
    methods:{
      fullName(){
        return this.firstName + " " + this.lastName;
      }
    },
    computed:{
      fullName1(vmObj){//当前vm对象,即this
        return this.firstName + " " + vmObj.lastName;
      }
    }
  });
</script>
</body>

2.监视属性

通过vm对象的$watch()或watch配置来监视指定的属性, 当属性变化时, 回调函数自动调用, 在函数内部进行计算

在计算一些页面中的数据时, 计算属性与监视相比更简单一些. 但监视常用来做深度监视.

①配置监视

<body>
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名2(单向): <input type="text" placeholder="Full Name2" readonly="readonly" v-model="fullName2"><br>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
  const vm = new Vue({
    el:"#demo",
    data:{
      firstName:"A",
      lastName:"B",
      fullName2:"A B"
    }
    watch:{
      //监视firstName
      firstName:function (newVal,oldVal) {
        this.fullName2 = newVal + " " + this.lastName;
      }
    }
  });
</script>
</body>

②$watch()监视

<body>
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名2(单向): <input type="text" placeholder="Full Name2" readonly="readonly" v-model="fullName2"><br>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
  const vm = new Vue({
    el:"#demo",
    data:{
      firstName:"A",
      lastName:"B",
      fullName2:"A B"
    },
    watch:{
      //监视firstName
      firstName:function (newVal,oldVal) {
        this.fullName2 = newVal + " " + this.lastName;
      }
    }
  });
  vm.$watch("lastName",function (newVal,oldVal) {
    //监视lastName
    this.fullName2 = this.firstName + " " + newVal;
  });
</script>
</body>

3.计算属性高级

通过getter/setter实现对属性数据的显示和监视, 计算属性存在缓存, 多次读取只执行一次getter计算

<body>
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
  const vm = new Vue({
    el:"#demo",
    data:{
      firstName:"A",
      lastName:"B",
    }
    computed:{
      fullName3:{
        //回调函数,计算当初始化或该属性的相关属性值改变时,计算当前的属性值
        get(){
          return this.firstName + " " + this.lastName;
        },
        //回调函数,监视当前的属性值,当其改变时,更新与它相关的属性值
        set(value){
          const names = value.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        }
      }
    }
  });
</script>
</body>