快捷導(dǎo)航

watch(監(jiān)視屬性)和computed(計(jì)算屬性)的區(qū)別及實(shí)現(xiàn)案例

更新時(shí)間：2023年05月29日 10:26:53 作者：前端小二哥

watch和computed是vue實(shí)例對象中的兩個(gè)重要屬性，watch是監(jiān)視屬性，用來監(jiān)視vue實(shí)例對象上屬性和方法的變化，computed被稱為計(jì)算屬性，可以將data對象中的屬性進(jìn)行計(jì)算得到新的屬性，這篇文章主要介紹了watch(監(jiān)視屬性)和computed(計(jì)算屬性)的區(qū)別,需要的朋友可以參考下

前言

watch 和 computed 是vue實(shí)例對象中的兩個(gè)重要屬性，watch是監(jiān)視屬性，用來監(jiān)視vue實(shí)例對象上屬性和方法的變化，computed被稱為計(jì)算屬性，可以將data對象中的屬性進(jìn)行計(jì)算得到新的屬性；由于watch屬性監(jiān)視data對象中的屬性變化時(shí)，也能拿到data對象中的屬性進(jìn)行計(jì)算；因此產(chǎn)生疑問既然兩者都能實(shí)現(xiàn)同一功能，兩者有什么區(qū)別呢？下面將以此疑問為突破點(diǎn)結(jié)合實(shí)例詳述兩者的區(qū)別；

watch 實(shí)現(xiàn)案例

  <!-- 準(zhǔn)備好一個(gè)容器-->
    <div id="root">
      姓：<input type="text" v-model="firstName" /> <br /><br />
      名：<input type="text" v-model="lastName" /> <br /><br />
      全名：<span>{{fullName}}</span> <br /><br />
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
    const vm = new Vue({
      el: '#root',
      data: {
        firstName: '張',
        lastName: '三',
        fullName: '張-三',
      },
      watch: {
        firstName(val) {
          setTimeout(() => {
            this.fullName = val + '-' + this.lastName
          }, 1000)
        },
        lastName(val) {
          setTimeout(() => {
            this.fullName = this.firstName + '-' + val
          }, 1000)
        },
      },
    })
  </script>

以上為watch通過監(jiān)視data中的firstName和lastName的變化改變fullName

computed 實(shí)現(xiàn)案例

<body>
    <!-- 準(zhǔn)備好一個(gè)容器-->
    <div id="root">
      姓：<input type="text" v-model="firstName" /> <br /><br />
      名：<input type="text" v-model="lastName" /> <br /><br />
      全名：<span>{{fullName}}</span> <br /><br />
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
    const vm = new Vue({
      el: '#root',
      data: {
        firstName: '張',
        lastName: '三',
      },
      computed: {
        fullName() {
          return this.firstName + '-' + this.lastName
        },
      },
    })

以上為通過computed計(jì)算屬性實(shí)現(xiàn)fullName和firstName、lastName產(chǎn)生聯(lián)系；

對比

通過對比可以看出，watch和computed都能實(shí)現(xiàn)相同的功能，但是首先第一眼看去，computed計(jì)算屬性實(shí)現(xiàn)的案例明顯代碼更少更精簡；但是watch能將fullName的變化改成異步；因此對watch和computed屬性做出如下總結(jié)：
1、computed能完成的功能watch也能完成
2、watch能完成的功能computed不一定能完成，比如watch可以進(jìn)行異步操作；
??注意：
1.所被Vue管理的函數(shù)，最好寫成普通函數(shù)，這樣this的指向才是vm 或組件實(shí)例對象。
2.所有不被Vue所管理的函數(shù)（定時(shí)器的回調(diào)函數(shù)、ajax的回調(diào)函數(shù)等、Promise的回調(diào)函數(shù)），最好寫成箭頭函數(shù)，這樣this的指向才是vm 或組件實(shí)例對象。

到此這篇關(guān)于watch(監(jiān)視屬性)和computed(計(jì)算屬性)的區(qū)別的文章就介紹到這了,更多相關(guān)watch(監(jiān)視屬性)和computed(計(jì)算屬性)的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: