vue2.0中的watch和計算屬性computed

本文轉載自查看原文 2017-12-20 17:00 11586 vue.js

watch和computed均可以監控程序員想要監控的對象，當這些對象發生改變之后，可以觸發回調函數做一些邏輯處理

watch監控自身屬性變化

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="firstName" />
      <input type="text" v-model="lastName" /> 
      {{fullName}}
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          firstName: 'hello',
          lastName: 'vue',
          fullName: 'hello.ve'
        },
        watch: {
          'firstName': function(newval, oldval) {
            // console.log(newval,oldval);
            this.fullName = this.firstName + this.lastName;
          },
          'lastName': function(newval, oldval) {
            // console.log(newval,oldval);
            this.fullName = this.firstName + this.lastName;
          }
        }
      });
    </script>
  </body>
</html>

watch監控路由對象

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-link to="/login">登錄</router-link>
      <router-link to="/register/value">注冊</router-link>
      <!--組件的顯示占位域-->
      <router-view></router-view>
    </div>

    <script>
      //1.0 准備組件
      var App = Vue.extend({});

      var login = Vue.extend({
        template: '<div><h3>登錄</h3></div>'
      });

      var register = Vue.extend({
        template: '<div><h3>注冊{{name}}</h3></div>',
        data: function() {
          return {
            name: ''
          }
        },
        created: function() {
          this.name = this.$route.params.name;
        }
      });

      //2.0 實例化路由規則對象
      var router = new VueRouter({
        routes: [{
            path: '/login',
            component: login
          },
          {
            path: '/register/:name',
            component: register
          },
          {
            path: '/',
            //當路徑為/時，重定向到/login
            redirect: '/login'
          }
        ]
      });

      //3.0 開啟路由對象
      new Vue({
        el: '#app',
        router: router, //開啟路由對象
        watch: {
          '$route': function(newroute, oldroute) {
            console.log(newroute, oldroute);
            //可以在這個函數中獲取到當前的路由規則字符串是什么
            //那么就可以針對一些特定的頁面做一些特定的處理
          }
        }
      })
    </script>
  </body>
</html>

計算屬性computed的特點

計算屬性會依賴於他使用的data中的屬性，只要是依賴的屬性值有改變，則自動重新調用一下計算屬性；
如果他所依賴的這些屬性值沒有發生改變，那么計算屬性的值是從緩存中來的，而不是重新編譯，那么性能要高一些，所以vue中盡可能使用computed替代watch。

案例演示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="firstName" />
      <input type="text" v-model="lastName" /> 
      {{fullName}}
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          firstName: 'hello',
          lastName: 'vue'
        },
        computed: {
          fullName: function() {
            return this.firstName + this.lastName;
          }
        }
      });
    </script>
  </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 對vue中的computed屬性，watch監聽，計算屬性理解 vue中computed（計算屬性）和watch（數據監聽） vue computed計算屬性 watch監聽 vue2.0 watch vue2.0中watch用法 vue2.0生命周期、計算屬性、watch的執行順序 Vue之計算屬性Computed和屬性監聽Watch，Computed和Watch的區別 vue中computed計算屬性 Vue 計算屬性computed和監聽屬性watch比較 vue中的computed（計算屬性）和watch(監聽屬性)的特點，以及深度監聽