vue之watch(监听属性)与computed(计算属性)

watch: 用于监听 某个属性 的变化侧重于某件事;

　　只要被监听的数据方式变化, 就会自动的触发 watch 中指定的处理函数

//  监听 password 的变化
watch: {
  // password 是在data中定义的
  password:function(newVal, oldVal) {
     // 参数:  newVal  是新的值
     //          oldVal  旧值
     console.log('密码发生了变化!!!')     
  }  
}

computed计算实现

计算属性的特点: 同时监听 多个数据 的变化, 侧重于得到新的值

只要依赖的任何一个数据发生变化, 都会自动触发计算属性的重新求值

computed使用的时候不能当做一个方式来使用, 要当做一个属性来使用

定义的计算属性: 计算属性, 在定义的时候,需要被定义为 function , 但是, 在页面UI结构轴, 计算属性是直接当做 普通属性 来使用的

在计算属性中, 必须 return一个返回值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="vue-2.5.16.js"></script>
</head>
<body>
  <div id="app">
    firstname <br>
    <input type="text" v-model="fname"><br>
    lastname<br>
    <input type="text" v-model="lname"><br>
    fullname<br>
    <input type="text" disabled v-model="fullname">
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        fname: '',
        lname: ''
      },
      computed: {
        fullname:function() {
          return this.fname+ '--' +this.lname
        }
      }
    })
  </script>
</body>
</html>

监听属性