vue計算屬性和watch有什么區別

這篇文章給大家分享的是有關vue計算屬性和watch有什么區別的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

我們提供的服務有：成都網站建設、網站建設、微信公眾號開發、網站優化、網站認證、臨河ssl等。為近1000家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的臨河網站制作公司

區別：1、計算屬性在調用時需要在模板中渲染，修改計算所依賴元數據；watch在調用時只需修改元數據。2、計算屬性默認深度依賴，watch默認淺度觀測。3、計算屬性適合做篩選，不可異步；watch適合做執行異步或開銷較大的操作。

computed

computed 是計算屬性，它會根據你所依賴的數據動態顯示新的計算結果

計算屬性將被加入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例

通過計算出來的屬性不需要調用直接可以在 DOM 里使用

基礎例子

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

結果：

我是原始值: "Hello"
我是計算屬性的值: "olleH"

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

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

所以，如果數據要通過復雜邏輯來得出結果，那么就推薦使用計算屬性

watch

一個對象，鍵是 data 對應的數據，值是對應的回調函數。值也可以是方法名，或者包含選項的對象，當 data 的數據發生變化時，就會發生一個回調，他有兩個參數，一個 val （修改后的 data 數據），一個 oldVal（原來的 data 數據）
Vue 實例將會在實例化時調用$watch()，遍歷 watch 對象的每一個屬性

基礎例子

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 = 新對象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 變了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 變了")
    },
      deep: true // 該屬性設定在任何被偵聽的對象的 property 改變時都要執行 handler 的回調，不論其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 變了")
    },
      immediate: true // 該屬性設定該回調將會在偵聽開始之后被立即調用
    }
  }
}).$mount("#app");

注意：不應該使用箭頭函數來定義 watcher 函數，因為箭頭函數沒有 this，它的 this 會繼承它的父級函數，但是它的父級函數是 window，導致箭頭函數的 this 指向 window，而不是 Vue 實例

• deep 控制是否要看這個對象里面的屬性變化
• immediate 控制是否在第一次渲染是執行這個函數

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

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

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

vue計算屬性和watch的區別

計算屬性 vs 屬性檢測

計算屬性（computed）	屬性檢測（watch）
首次運行	首次不運行
調用時需要在模板中渲染，修改計算所依賴元數據	調用時只需修改元數據
默認深度依賴	默認淺度觀測
適合做篩選，不可異步	適合做執行異步或開銷較大的操作

如果一個數據需要經過復雜計算就用 computed

如果一個數據需要被監聽并且對數據做一些操作就用 watch

感謝各位的閱讀！關于vue計算屬性和watch有什么區別就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文名稱：vue計算屬性和watch有什么區別
文章轉載：http://m.kartarina.com/article34/jecope.html

成都網站建設公司_創新互聯，為您提供網站導航、網站排名、網站收錄、虛擬主機、ChatGPT、營銷型網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯