1. 程式人生 > >vue2.0中的watch和計算屬性computed

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

str rect register rst 定向 one 特點 created doc

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/[email protected]/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>

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