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

時間 2019-11-08

標籤 vue2.0 vue watch 計算屬性 computed 简体版

原文原文鏈接

watch和computed都可以監控程序員想要監控的對象，當這些對象發生改變以後，能夠觸發回調函數作一些邏輯處理html

watch監控自身屬性變化vue

<!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的特色vue-router

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

案例演示npm

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。