2019-06-22名称案例

我们要天监听到文本框数据的改变，这样才能知道什么时候才能拼接出一个fullname
如何监听到文本框数据的改变：用keyup事件，或者操作原生节点（ref属性），或者用computed属性，或者监听

• 1.keyup事件

  <div id="app">
    <input type="text" v-model:value="firstname" @keyup.enter="getFullName">+
    <input type="text" v-model:value="lastname" @keyup.enter="getFullName">=
    <input type="text" v-model:value="fullname">
  </div>
.......
var vm = new Vue({
  el: "#app",
  data:{
    firstname:"",
    lastname: "",
    fullname: "",
  },
  methods:{
    getFullName(){
      console.log("执行了函数！");
      this.fullname = this.firstname + "-" + this.lastname;
    },
  }
});

如果把@keyup.enter换成了@keyup的话，那么每点击一下键盘就执行一次函数，会有失误。

• 2.watch监听
  watch是Vue实例的属性，使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的处理函数。

    <!-- watch监听 -->
    <input type="text" v-model:value="firstname">+
    <input type="text" v-model:value="lastname">=
    <input type="text" v-model:value="fullname">
......
var vm = new Vue({
  el: "#app",
  data:{
    firstname:"",
    lastname: "",
    fullname: "",
  },
  watch: {
    firstname: function(){
      //当firstname变化了的时候，会触发这个函数。
      //firstname也可以写成“firstname”,如果名称为first-name则必须写为“first-name”形式，不能省去引号
      this.fullname = this.firstname + "-" + this.lastname;
    },
    "lastname": function(newVal, oldVal){
      this.fullname = this.firstname + "-" + newVal;
    }
  },
});

看了这个案例，会觉得wacth太复杂了，不如methods方式好。但，watch有专属于自己的用途，即是当我们的数据是非DOM元素的数据；我们没办法给它一个事件去监听它的改变的时候，就可以使用watch监听。
比如说我们登陆/注册组件切换案例中，用方法没法监听到路由的改变，进到登陆页面输出“欢迎进入登陆界面”，进入注册界面输出“欢迎进入注册界面”。这时我们可以采用watch监听。

  <div id="app">
   <!-- watch监听路由地址的改变 -->
    <div class="container">
        <router-link to="/login" tag="span">登陆</router-link>
        <router-link to="/register" tag="span">注册</router-link>
    </div>
    <router-view></router-view>
  </div>

  <template id="login">
    <div class="container">
      <div class="h1">登陆</div>
      <form action="" class="form form-inline">
        <label for="">用户名：<input type="text" class="form-control"></label>
        <label for="">密码：<input type="paassowrd" class="form-control"></label>
      </form>
    </div>
  </template>
  <template id="register">
    <div class="container">
      <div class="h1">注册</div>
      <form action="" class="form form-inline">
        <label for="">用户名：<input type="text" class="form-control"></label>
        <label for="">密码：<input type="password" class="form-control"></label>
        <label for="">确认密码：<input type="password" class="form-control"></label>
      </form>
    </div>
  </template>
</body>
</html>
<script>
  //（ 路由）模板对象
var myLogin = {
  template: "#login",
}
var myRegister = {
  template: "#register",
}
//路由对象，以及路由匹配规则
var router = new VueRouter({
  routes:[
    {path:"/login",component:myLogin},
    {path:"/register",component:myRegister},
  ]
});

var vm = new Vue({
  el: "#app",
  data:{
    firstname:"",
    lastname: "",
    fullname: "",
  },
  watch: {
    "$route.path": function(newVal, oldVal){
        if(newVal === "/login"){
          console.log("欢迎进入登陆界面");
        } else {
          console.log("欢迎进入注册界面");
        }
    }
  },
  //注册到Vue实例身上去
  router
});
</script>

• 3.computed属性
  在computed中，可以定义一些属性，这些属性叫做【计算属性】。它的本质就是一个方法，只不过我们在使用这些计算属性的时候是把他们的名字直接当作属性来使用的，而不是方法。

    <input type="text" v-model:value="firstname">+
    <input type="text" v-model:value="lastname">=
    <input type="text" v-model:value="fullname">
......
var vm = new Vue({
  el: "#app",
  data:{
    firstname:"",
    lastname: "",
    // fullname: "",
  },
  computed:{
    "fullname": function(){
     return this.firstname + "-" + this.lastname;
    }
  },
}

计算属性的特性:

1.在引用的时候，一定不要加小括号，就当成属性去引用。
2.计算属性内部所依赖的data里边的数据发生了变化，就会立即重新计算计算属性的值。
3.计算属性的求职结果会被缓存起来，方便下次直接调用。如果我们计算属性里的值都没有发生变化，不管在页面中调用了多少次计算属性，都不会被重新计算。这样提高了程序运行效率

methods ，watch，computed三者之间的比较

只要是watch或者计算属性，都是一个function；但计算属性无论如何都要返回一个值出去并且缓存起来，而watch不用；
methods里也是一个function，但它里面的函数更侧重于业务逻辑的处理；而watch的键是需要观察的表达式，值是对应的回调函数，回调函数有两个值（newVal，oldVal），主要用于监听到某些特定数据变化后，执行特性的业务逻辑， 像是conputed和methods的结合体。