vue計(jì)算屬性和watch有什么區(qū)別

這篇文章給大家分享的是有關(guān)vue計(jì)算屬性和watch有什么區(qū)別的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

區(qū)別：1、計(jì)算屬性在調(diào)用時(shí)需要在模板中渲染，修改計(jì)算所依賴元數(shù)據(jù)；watch在調(diào)用時(shí)只需修改元數(shù)據(jù)。2、計(jì)算屬性默認(rèn)深度依賴，watch默認(rèn)淺度觀測(cè)。3、計(jì)算屬性適合做篩選，不可異步；watch適合做執(zhí)行異步或開銷較大的操作。

computed

computed 是計(jì)算屬性，它會(huì)根據(jù)你所依賴的數(shù)據(jù)動(dòng)態(tài)顯示新的計(jì)算結(jié)果

計(jì)算屬性將被加入到 Vue 實(shí)例中。所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為 Vue 實(shí)例

通過計(jì)算出來的屬性不需要調(diào)用直接可以在 DOM 里使用

基礎(chǔ)例子

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  template: `
  <div>
  <p>我是原始值: "{{ message }}"</p>
  <p>我是計(jì)算屬性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要調(diào)用
  </div>
  `,
  computed: {
    // 計(jì)算屬性的 getter
    computedMessage: function () {
      // `this` 指向 vm 實(shí)例
      return this.message.split('').reverse().join('')
    }
  }
})

結(jié)果：

我是原始值: "Hello"
我是計(jì)算屬性的值: "olleH"

如果不使用計(jì)算屬性，那么 message.split('').reverse().join('') 就會(huì)直接寫到 template 里，那么在模版中放入太多聲明式的邏輯會(huì)讓模板本身過重，尤其當(dāng)在頁面中使用大量復(fù)雜的邏輯表達(dá)式處理數(shù)據(jù)時(shí)，會(huì)對(duì)頁面的可維護(hù)性造成很大的影響

而且計(jì)算屬性如果依賴不變的話，它就會(huì)變成緩存，computed 的值就不會(huì)重新計(jì)算

所以，如果數(shù)據(jù)要通過復(fù)雜邏輯來得出結(jié)果，那么就推薦使用計(jì)算屬性

watch

一個(gè)對(duì)象，鍵是 data 對(duì)應(yīng)的數(shù)據(jù)，值是對(duì)應(yīng)的回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象，當(dāng) data 的數(shù)據(jù)發(fā)生變化時(shí)，就會(huì)發(fā)生一個(gè)回調(diào)，他有兩個(gè)參數(shù)，一個(gè) val （修改后的 data 數(shù)據(jù)），一個(gè) oldVal（原來的 data 數(shù)據(jù)）
Vue 實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用$watch()，遍歷 watch 對(duì)象的每一個(gè)屬性

基礎(chǔ)例子

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
      <button @click="obj = {a:'a'}">obj = 新對(duì)象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 變了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 變了")
    },
      deep: true // 該屬性設(shè)定在任何被偵聽的對(duì)象的 property 改變時(shí)都要執(zhí)行 handler 的回調(diào)，不論其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 變了")
    },
      immediate: true // 該屬性設(shè)定該回調(diào)將會(huì)在偵聽開始之后被立即調(diào)用
    }
  }
}).$mount("#app");

注意：不應(yīng)該使用箭頭函數(shù)來定義 watcher 函數(shù)，因?yàn)榧^函數(shù)沒有 this，它的 this 會(huì)繼承它的父級(jí)函數(shù)，但是它的父級(jí)函數(shù)是 window，導(dǎo)致箭頭函數(shù)的 this 指向 window，而不是 Vue 實(shí)例

• deep 控制是否要看這個(gè)對(duì)象里面的屬性變化
• immediate 控制是否在第一次渲染是執(zhí)行這個(gè)函數(shù)

vm.$watch() 的用法和 watch 回調(diào)類似

• vm.$watch('data屬性名', fn, {deep: .., immediate: ..})

vm.$watch("n", function(val, newVal){
      console.log("n 變了");
},{deep: true, immediate: true})

vue計(jì)算屬性和watch的區(qū)別

如果一個(gè)數(shù)據(jù)需要經(jīng)過復(fù)雜計(jì)算就用 computed

如果一個(gè)數(shù)據(jù)需要被監(jiān)聽并且對(duì)數(shù)據(jù)做一些操作就用 watch

感謝各位的閱讀！關(guān)于vue計(jì)算屬性和watch有什么區(qū)別就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！