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

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

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)徐州,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

<template>
  <div class="box">
    <h2>計(jì)算屬性</h2>
    <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">
    <h2>監(jiān)聽器</h2>
    <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">
    <h2>監(jiān)聽器</h2>
    <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">
    <h2>監(jiān)聽器</h2>
    <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">
    <h2>監(jiān)聽器</h2>
    <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">
    <h2>監(jiān)聽器</h2>
    <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">
    <h2>監(jiān)聽器</h2>
    <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)聽。

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

若有不足請(qǐng)多多指教！希望給您帶來幫助！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

網(wǎng)站欄目：vue計(jì)算屬性computed、事件、監(jiān)聽器watch的使用講解
URL鏈接：http://bm7419.com/article22/gihdjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、App設(shè)計(jì)、企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化