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

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

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

一.計(jì)算屬性（computed）

<template>
  <div class="box">
    <h1>計(jì)算屬性</h1>
    <hr>
    <!-- 直接渲染得到數(shù)據(jù) -->
    <p><input type="text" v-model="message"></p>
    <!-- 對(duì)data的數(shù)據(jù)進(jìn)行簡(jiǎn)單的操作
    這樣有一個(gè)不好的地方就是后期對(duì)頁面數(shù)據(jù)的維護(hù)不是那么方便 -->
    <p>{{message.toUpperCase()}}</p>
    <!-- 通過計(jì)算屬性改變mesage進(jìn)行渲染 -->
    <p>{{computedMessage}}</p>
    <hr>
    <!-- 通過事件來改變屬性 -->
    <span>{{message}}</span><button @click="changeMessage()">點(diǎn)擊改變</button>
    <hr>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      passw2: 'sss',
    }
  },
  // computed屬性是return返回值，在使用的時(shí)候只使用函數(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ù)，在模塊中直接使用這個(gè)函數(shù)名即可實(shí)現(xiàn)對(duì)data中數(shù)據(jù)改變的渲染。

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

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

對(duì)象就有鍵，有值。

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

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

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

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

值是包括選項(xiàng)的對(duì)象：選項(xiàng)包括有三個(gè)。

第一個(gè)handler：其值是一個(gè)回調(diào)函數(shù)。即監(jiān)聽到變化時(shí)應(yīng)該執(zhí)行的函數(shù)。
第二個(gè)是deep：其值是true或false；確認(rèn)是否深入監(jiān)聽。（一般監(jiān)聽時(shí)是不能監(jiān)聽到對(duì)象屬性值的變化的，數(shù)組的值變化可以聽到。）
第三個(gè)是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綁定了一個(gè)handler方法，之前我們寫的 watch 方法其實(shí)默認(rèn)寫的就是這個(gè)handler，Vue.js會(huì)去處理這個(gè)邏輯，最終編譯出來其實(shí)就是這個(gè)handler。

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

用法三：

deep屬性

watch 里面還有一個(gè)屬性 deep，默認(rèn)值是 false，代表是否深度監(jiān)聽，比如我們 data 里有一個(gè)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)聽對(duì)象也需要變化
    '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()'>點(diǎn)擊改變數(shù)組</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      array:['mu','zi','dig','big']
    }
  },
  watch:{
    // 需要注意的是這里所監(jiān)聽的對(duì)象應(yīng)該是數(shù)組
    array:{
      handler(newVal,oldVal){
        console.log(newVal+'--'+oldVal)
      },
      deep:true,
      immediate:true,
    }
  },
  methods:{
    addArray() {
      this.array.push('66')
    }
  }
}
</script>

3、數(shù)組中對(duì)象的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)聽的對(duì)象應(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、對(duì)象具體屬性的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>

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