快捷導(dǎo)航

vue計算屬性computed、事件、監(jiān)聽器watch的使用講解

更新時間：2019年01月21日 08:58:15 作者：muzidigbig

今天小編就為大家分享一篇關(guān)于vue計算屬性computed、事件、監(jiān)聽器watch的使用講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

一.計算屬性（computed）

<template>
  <div class="box">
    <h1>計算屬性</h1>
    <hr>
    <!-- 直接渲染得到數(shù)據(jù) -->
    <p><input type="text" v-model="message"></p>
    <!-- 對data的數(shù)據(jù)進行簡單的操作
    這樣有一個不好的地方就是后期對頁面數(shù)據(jù)的維護不是那么方便 -->
    <p>{{message.toUpperCase()}}</p>
    <!-- 通過計算屬性改變mesage進行渲染 -->
    <p>{{computedMessage}}</p>
    <hr>
    <!-- 通過事件來改變屬性 -->
    <span>{{message}}</span><button @click="changeMessage()">點擊改變</button>
    <hr>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      passw2: 'sss',
    }
  },
  // computed屬性是return返回值，在使用的時候只使用函數(shù)名不是調(diào)用函數(shù)
  computed:{
    computedMessage(){
      return this.message.split('')
    }
  },
  methods:{
    changeMessage(){
      this.message = this.computedMessage+'altman'
    }
  },
}
</script>

這里需要注意的是computed中的函數(shù)名不能和所操作data中的數(shù)據(jù)一樣；computed中的函數(shù)名相當(dāng)于是操作data數(shù)據(jù)后的新數(shù)據(jù)，在模塊中直接使用這個函數(shù)名即可實現(xiàn)對data中數(shù)據(jù)改變的渲染。

二.監(jiān)聽器（watch）

首先確認(rèn) watch是一個對象，一定要當(dāng)成對象來用。

對象就有鍵，有值。

第一種鍵：就是你要監(jiān)聽的那個數(shù)據(jù)，比如說$route，這個就是要監(jiān)控路由的變化?；蛘呤莇ata中的某個變量。

值可以是函數(shù)：就是當(dāng)你監(jiān)控的家伙變化時，需要執(zhí)行的函數(shù)，這個函數(shù)有兩個形參，第一個是改變后的新值，第二個是改變之前的值。

第二種值也可以是函數(shù)名：不過這個函數(shù)名要用單引號來包裹。(不常用)

第三種情況厲害了(監(jiān)聽的那個數(shù)據(jù)值是一個對象):

值是包括選項的對象：選項包括有三個。

第一個handler：其值是一個回調(diào)函數(shù)。即監(jiān)聽到變化時應(yīng)該執(zhí)行的函數(shù)。
第二個是deep：其值是true或false；確認(rèn)是否深入監(jiān)聽。（一般監(jiān)聽時是不能監(jiān)聽到對象屬性值的變化的，數(shù)組的值變化可以聽到。）
第三個是immediate：其值是true或false；確認(rèn)是否以當(dāng)前的初始值執(zhí)行handler的函數(shù)。

用法一：基礎(chǔ)用法

<template>
  <div class="box">
    <h1>監(jiān)聽器</h1>
    <label>二次密碼:</label>
    <input v-model="watchMsg" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      watchMsg: '我是監(jiān)聽操作',
    }
  },
  watch:{
    watchMsg(newVal,oldVal){
      console.log('newVal:'+newVal,'oldVal:'+oldVal);
    },
  }
}
</script>

用法二：handler方法和immediate屬性

<template>
  <div class="box">
    <h1>監(jiān)聽器</h1>
    <label>二次密碼:</label>
    <input v-model="watchMsg" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      watchMsg: '我是監(jiān)聽操作',
    }
  },
  watch:{
    watchMsg: {
      handler(newVal,oldVal){
        console.log('newVal:'+newVal,'oldVal:'+oldVal);
      },
      immediate:true,
    }
  }
}
</script>

注意到handler了嗎，我們給 watchMsg綁定了一個handler方法，之前我們寫的 watch 方法其實默認(rèn)寫的就是這個handler，Vue.js會去處理這個邏輯，最終編譯出來其實就是這個handler。

而immediate:true代表如果在 wacth 里聲明了watchMsg之后，就會立即先去執(zhí)行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會在綁定的時候就執(zhí)行。

用法三：

deep屬性

watch 里面還有一個屬性 deep，默認(rèn)值是 false，代表是否深度監(jiān)聽，比如我們 data 里有一個obj屬性/數(shù)組：

<template>
  <div class="box">
    <h1>監(jiān)聽器</h1>
    <label>二次密碼:</label>
    <input v-model="obj.watchMsg" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      obj:{
        watchMsg: '我是監(jiān)聽操作',
      }
    }
  },
  watch:{
    // 需要注意的是這里的監(jiān)聽對象也需要變化
    'obj.watchMsg': {
      handler(newVal,oldVal){
        console.log('newVal:'+newVal,'oldVal:'+oldVal);
      },
      immediate:true,
      deep:true,
    }
  }
}
</script>

2、數(shù)組的watch

<template>
  <div class="box">
    <h1>監(jiān)聽器</h1>
    <p>{{array}}</p>
    <button @click='addArray()'>點擊改變數(shù)組</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      array:['mu','zi','dig','big']
    }
  },
  watch:{
    // 需要注意的是這里所監(jiān)聽的對象應(yīng)該是數(shù)組
    array:{
      handler(newVal,oldVal){
        console.log(newVal+'--'+oldVal)
      },
      deep:true,
      immediate:true,
    }
  },
  methods:{
    addArray() {
      this.array.push('66')
    }
  }
}
</script>

3、數(shù)組中對象的watch

<template>
  <div class="box">
    <h1>監(jiān)聽器</h1>
    <ul>
      <li v-for="(item,index) in arrayObj" :key="item.id">{{index}}--{{item.name}}---<input type="text" v-model="item.age" @keydown="change(index)"></li>
    </ul>
    <hr>
    <ul>
      <li v-for="(item,index) in arrayObj" :key="item.id">{{index}}--{{item.name}}---{{item.age}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arrayObj:[
        {name:'張三',age:'23'},
        {name:'李四',age:'22'}
      ],
    }
  },
  watch:{
    // 需要注意的是這里所監(jiān)聽的對象應(yīng)該是數(shù)組
    arrayObj:{
      handler(newVal,oldVal){
        console.log(newVal+'--'+oldVal)
      },
      deep:true,
      immediate:true,
    }
  },
  methods:{
    change(i) {
      // console.log(this.changeValue)
      this.arrayObj[i].age = this.arrayObj[i].age
    }
  }
}
</script>

4、對象具體屬性的watch［活用computed］

<template>
  <div class="box">
    <h1>監(jiān)聽器</h1>
    <p>{{obj.name}}</p>
    <input type="text" v-model="obj.name" name="" id="">
    <p>{{newName}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj:{name:'muzi',age:'23'},
    }
  },
  computed:{
    newName(){
      return this.obj.name.toUpperCase();
    }
  },
  watch:{
    newName(newVal,oldVal){
      console.log(newVal+'--'+oldVal)
    },
    // newName:{
    //   handler(newVal,oldVal){
    //     console.log(newVal+'--'+oldVal)
    //   },
    //   deep:true,
    //   immediate:true,
    // }
  },
}
</script>

從效果圖上可以看出，計算屬性最好使用在更改數(shù)據(jù)上然后進行渲染；先進行的計算屬性再進行的監(jiān)聽。