watch、computed、methods的區別

時間 2019-11-19

標籤 watch computed methods 區別简体版

原文原文鏈接

1. `computed`屬性的結果會被緩存，除非依賴的響應式屬性變化纔會從新計算。主要看成屬性來使用，要return出去一個值；
2. `methods`方法表示一個具體的操做，主要書寫業務邏輯；
3. `watch`一個對象，鍵是須要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操做；能夠看做是`computed`和`methods`的結合體，有newVal和oldVal兩個參數；html

三者比較：vue

相同點：都是一個functionvue-router

不一樣點：緩存

①computed要return出去一個值，watch不用app

②methods裏的function更側重業務邏輯（大量）的處理，computed裏的function不適合作大量業務邏輯ide

使用場景：函數

watch：適合監聽一些虛擬的東西，如路由ui

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.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>
    
    var login = {
      template:'<h1>登陸</h1>'
    }
    var register = {
      template:'<h1>註冊</h1>'
    }

    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:{
        //this.$route.path
        '$route.path':function(newval){
          console.log('ok')
          if(newval === '/login'){
            console.log('歡迎進入logon頁面')
          }
          else if(newval === '/register'){
            console.log('歡迎進入register頁面')
          }
        }
      }

    })

  </script>
</body>
</html>

View Code

methods：適合作一些方法的調用this

computed：可能須要引用一些數據，通過一系列的操做返回一個新的數據spa

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.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">

    <p>{{ fullname }}</p>
    <p>{{ fullname }}</p>
    <p>{{ fullname }}</p>

  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        middlename: ''
      },
      methods: {},
      computed: { // 在 computed 中，能夠定義一些 屬性，這些屬性，叫作 【計算屬性】， 計算屬性的，本質，就是 一個方法，只不過，咱們在使用 這些計算屬性的時候，是把 它們的 名稱，直接看成 屬性來使用的；並不會把 計算屬性，看成方法去調用；

        // 注意1： 計算屬性，在引用的時候，必定不要加 () 去調用，直接把它 看成 普通 屬性去使用就行了；
        // 注意2： 只要 計算屬性，這個 function 內部，所用到的 任何 data 中的數據發送了變化，就會 當即從新計算 這個 計算屬性的值
        // 注意3： 計算屬性的求值結果，會被緩存起來，方便下次直接使用； 若是 計算屬性方法中，因此來的任何數據，都沒有發生過變化，則，不會從新對 計算屬性求值；
        'fullname': function () {
          console.log('ok')
          return this.firstname + '-' + this.middlename + '-' + this.lastname
        }
      }
    });
  </script>
</body>

</html>

View Code

相關標籤/搜索

每日一句

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