【Vue教程十一】监听属性watch 和 计算属性computed

一、监听属性watch

1、 使用这个属性可以监听data中指定数据的变化，然后触发这个watch对应的function函数：

<template>
  <div>
    <input type="text" v-model="firstName" /> +
    <input type="text" v-model="lastName" /> =
    <input type="text" v-model="fullName" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "",
      lastName: "",
      fullName: " "
    };
  },
  props: ["title"],
  methods: {},
  watch: {
    //使用这个属性可以监听data中指定数据的变化，然后触发这个watch对应的function函数
    firstName: function(newVal, oldVal) {
      // this.fullName = this.firstName + '_' + this.lastName
      //此时的this.firstName可以用newVal代替
      this.fullName = newVal + "_" + this.lastName;
    },
    lastName: function(newVal) {
      this.fullName = this.firstName + "_" + newVal;
    }
  }
};
</script>

 2、监听路由

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  watch: {
    '$route.path': function (newVal, oldVal) {
      // console.log(newVal + '----' + oldVal);
      if (newVal === '/register') {
        console.log('欢迎来到注册页面');
      } else if (newVal === '/login') {
        console.log('欢迎来到登录页面');
      }

    },
  }
})

 

二、计算属性computed

computed中定义的属性，就是计算属性，实质就是个方法且需要有返回值，使用时当做属性来使用，不用加小括号。

<template>
  <div>
    <input type="text" v-model="firstName" /> +
    <input type="text" v-model="lastName" /> =
    <input type="text" v-model="fullName" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "",
      lastName: ""
      //data中的fullName去掉
    };
  },
  props: ["title"],
  methods: {},
  computed: {
    //computed中定义的属性，就是计算属性，实质就是个方法且需要有返回值，使用时当做属性来使用，不用加小括号
    // 只要计算属性中任意一个data数据发生变化，就会立即重新计算这个值
    fullName: function() {
      return this.firstName + "_" + this.lastName;
    }
  }
};
</script>