溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue的watch和computed方法的使用及區(qū)別介紹

發(fā)布時間：2020-08-30 22:12:34 來源：腳本之家 閱讀：156 作者：鎮(zhèn)屌 欄目：web開發(fā)

Vue的watch屬性

Vue的watch屬性可以用來監(jiān)聽data屬性中數(shù)據的變化

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/vue.min.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="firstname" />
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el:"#app",
        data:{
          firstname:"",
          lastname:""
        },
        methods:{},
        watch:{
          firstname:function(){
            console.log(this.firstname)
          }
        }
      })
    </script>
  </body>
</html>

可以從上述代碼中實踐得知，輸入框內的值變化多少次，控制臺就會打印多少次

同時還可以直接在監(jiān)聽的function中使用參數(shù)來獲取新值與舊值

watch:{
          firstname:function(newValue,OldValue){
            console.log(newValue);
            console.log(OldValue);
          }
        }

其中第一個參數(shù)是新值，第二個參數(shù)是舊值

同時Watch還可以被用來監(jiān)聽路由router的變化，只是這里的監(jiān)聽的元素是固定的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/vue.min.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
    <style type="text/css">
    </style>
  </head>
  <body>
    
    <div id="app">
      <!--
        由于Vue-router的hash匹配原則所以我們需要在原定義的路徑上加一個#號
      -->
<!--      <a href="#/login" rel="external nofollow" >登錄</a>
      <a href="#/register" rel="external nofollow" >注冊</a>-->
      <router-link to="/login" tag="span">登錄</router-link>
      <router-link to="/register">注冊</router-link>
      <router-view></router-view>
    </div>
  </body>
  <script>
    var login={
      template:'<h2>登錄組件</h2>'
    }
    var register={
      template:'<h2>注冊組件</h2>'
    }
    var routerObj = new VueRouter({
      routes:[
      //此處的component只能使用組件對象，而不能使用注冊的模板的名稱
        {path:"/login",component:login},
        {path:"/register",component:register}
      ]
    })
    var vm = new Vue({
      el:'#app',
      data:{
      },
      methods:{
        
      },
      router:routerObj,//將路由規(guī)則對象注冊到VM實例上
      watch:{
        '$route.path':function(newValue,OldValue){
            console.log(newValue);
            console.log(OldValue);
        }
      }
    })
  </script>
</html>

計算屬性Computed的作用

computed屬性的作用與watch類似，也可以監(jiān)聽屬性的變化

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/vue.min.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="firstname" />
      <input type="text" v-model="lastname" />
      <input type="text" v-model="fullname" />
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el:"#app",
        data:{
          firstname:"",
          lastname:""
        },
        methods:{},
/*       watch:{
          firstname:function(newValue,OldValue){
            console.log(newValue);
            console.log(OldValue);
          }
        }*/
        computed:{
          fullname:function(){
            return this.firstname +"-"+this.lastname
          }
        }
      })
    </script>
  </body>
</html>

只是他會根據他依賴的屬性，生成一個屬性，讓vm對象可以使用這個屬性

methods,watch,computed的區(qū)別

  1. computed 屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用；
  2. methods 方法表示一個具體的操作，主要書寫業(yè)務邏輯；
  3. watch 一個對象，鍵是需要觀察的表達式，值是對應回調函數(shù)。主要用來監(jiān)聽某些特定數(shù)據的變化，從而進行某些具體的業(yè)務邏輯操作；可以看作是 computed 和 methods 的結合體；

總結

以上所述是小編給大家介紹的Vue的watch和computed方法的使用及區(qū)別介紹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手