Vue学习之监听methods、watch及computed比较小结…

2019-08-14 10:03:08来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、三者之间的对比:

1、methods方法表示一个具体的操作,主要书写业务逻辑;

2、watch;一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体业务逻辑操作;可以看作是”computed"和“methods”的结合体;

3、computed属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用。

二、methods:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>methods实现名称拼接</title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="firstname" @keyup="getFullname" /> +
      <input type="text" v-model="lastname" @keyup="getFullname" /> =
      <input type="text" v-model="fullname" />
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          firstname: "",
          lastname: "",
          fullname: ""
        },
        methods: {
          getFullname() {
            this.fullname = this.firstname + "-" + this.lastname;
          }
        }
      });
    </script>
  </body>
</html>

2、watch:

使用这个属性,可以监视 data中指定数据的变化,然后触发这个watch中对应的function处理函数。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>methods实现名称拼接</title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- <input type="text" v-model="firstname" @keyup="getFullname" /> +
      <input type="text" v-model="lastname" @keyup="getFullname" /> = -->
      <input type="text" v-model="firstname" /> +
      <input type="text" v-model="lastname" /> =
      <input type="text" v-model="fullname" />
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          firstname: "",
          lastname: "",
          fullname: ""
        },
        methods: {
          // getFullname() {
          //   this.fullname = this.firstname + "-" + this.lastname;
          // }
        },
        watch: {
          firstname: function(newVal, oldval) {
            this.fullname = newVal + "-" + this.lastname;
          },
          lastname: function(newVal) {
            this.fullname = this.firstname + "-" + newVal;
          }
        }
      });
    </script>
  </body>
</html>

3、watch监听路由地址的变化:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>methods实现名称拼接</title>
    <script src="./lib/vue.js"></script>
    <!-- 1.导包 -->
    <script src="./lib/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
      <router-view></router-view>
    </div>
    <script>
      //2.创建子组件
      var login = {
        template: "<h3>这是登录子组件</h3>"
      };

      var register = {
        template: "<h3>这是注册子组件</h3>"
      };
      //3.创建一个路由对象
      var router = new VueRouter({
        routes: [
          //路由规则数组
          { path: "/", redirect: "/login" },
          { path: "/login", component: login },
          { path: "/register", component: register }
        ],
        linkActiveClass: "myactive" //和激活有关的类
      });
      var vm = new Vue({
        el: "#app",
        data: {
     
        },
        methods: {},
   
        router,

  
        watch: {
      
          "$route.path": function(newVal, oldVal) {
            if (newVal === "/login") {
              console.log("欢迎进入登录页面");
            } else if (newVal === "/register") {
              console.log("欢迎进入注册页面");
            }
          }
        }
      });
    </script>
  </body>
</html>

4、computed:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>methods实现名称拼接</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="firstname" /> +
      <input type="text" v-model="middlename" /> +
      <input type="text" v-model="lastname" /> =
      <input type="text" v-model="fullname" />
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          firstname: "",
          middlename: "",
          lastname: ""
        },
        methods: {},
        watch: {},
        computed: {
          fullname: function() {
            console.log("ok");
            return this.firstname + "-" + this.middlename + "-" + this.lastname;
          }
        }
      });
    </script>
  </body>
</html>

在computed 中,可以定义一些属性,这些属性 ,叫做 【计算属性】,计算属性的本质就是一个方法。

只不过,我们在使用这些计算属性的时候,是把它们的名称,直接当作属性来使用的;并不会把计算属性当作方法去调用。

需要注意的是:

①、计算属性在引用的时候,一定不要加()去调用,直接把它当作 普通属性去使用就好了;

②、只要计算属性,这个 function 内部,所用到的任何 data 中的数据发送了变化,就会立即重新计算这个计算属性的值;

③、计算属性的求值结果,会被缓存起来,方便下次直接使用;如果计算属性方法中,所以来的任何数据,都没有发生过变化,则 不会重新对 计算属性求值。


原文链接:https://www.cnblogs.com/21-forever/p/11109762.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:剑指前端(前端入门笔记系列)——DOM(元素节点)

下一篇:窗口缩放导致页面排版错乱的解决方法