Vue中如何定義數據示例詳解

Posted on by

前言

在開發的過程中，定義變量是一件非常高頻且十分基礎的事情，如何合理的根據變量的使用場景和作用域范圍進行定義變量，是一件很小缺很容易犯錯的事情

Vue2已經流行使用瞭這麼多年，多數開發者在開發過程中喜愛在data選項中梭哈定義很多變量，這樣做非常不利於代碼的閱讀性、維護性和性能，想要很好的使用變量，需要結合Vue和JS的特性

在Vue中，按照是否需要雙向數據綁定，可以將變量分為兩種：

一種是需要被Vue的數據劫持，將data的變化實時響應到view上

隻要data隻能夠的msg變化， template中綁定的msg會實時響應

<template>
  <div>{{msg}}</div>
</template>

<script>
export default {
  data() {
    msg: "" 
  }
};
</script>

還有一種不需要被Vue數據劫持:

僅在script中生效，在template中沒有使用，不需要數據劫持

name僅在concatName函數中生效，那麼將其作為局部變量定義即可

age在函數getAge和concatName中都需要使用，作為局部變量使用不合適，那麼可以將其作用域提升，方便在多個地方使用

<script>
const age = 'bar'
export default {
  methods: {
    getAge() {
      return age
    },
    concatName() {
      let name = 'nordon'
      reutrn `name:${name}, age: ${age} `
    }
  },
};
</script>

僅僅是在template中作為渲染數據使用，自定義之後便不會在後續的操作中對其修改，這種數據如果使用Vue對其數據劫持會浪費一些性能

<template>
  <div v-for="item in arr">{{item.name}}</div>
</template>

<script>
const arr = Object.freeze([{
  name: 'nordon',
  age: 18
}])
export default {
  data() {
    return {
      arr
    }
  }
};
</script>

使用Object.freeze將不需要數據劫持的數據進行凍結操作，在Vue中遞歸遍歷數據進行數據劫持的時候便不會對其進行數據劫持，特別對於大量的表格類的數據性能提升會顯著一些

可以從Vue源碼中看到，為何使用瞭Object.freeze對數據處理之後，便不會再進行數據劫持

function defineReactive (obj, key) {
  // 刪除無關代碼 隻保留瞭判斷條件
  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }
}

總結

到此這篇關於Vue中如何定義數據的文章就介紹到這瞭,更多相關Vue定義數據內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：