Vue中怎么定義數(shù)據(jù)

小編給大家分享一下Vue中怎么定義數(shù)據(jù)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

一種是需要被Vue的數(shù)據(jù)劫持，將data的變化實時響應(yīng)到view上

只要data只能夠的msg變化， template中綁定的msg會實時響應(yīng)

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

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

還有一種不需要被Vue數(shù)據(jù)劫持:

僅在script中生效，在template中沒有使用，不需要數(shù)據(jù)劫持

name僅在concatName函數(shù)中生效，那么將其作為局部變量定義即可

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

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

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

<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將不需要數(shù)據(jù)劫持的數(shù)據(jù)進行凍結(jié)操作，在Vue中遞歸遍歷數(shù)據(jù)進行數(shù)據(jù)劫持的時候便不會對其進行數(shù)據(jù)劫持，特別對于大量的表格類的數(shù)據(jù)性能提升會顯著一些

可以從Vue源碼中看到，為何使用了Object.freeze對數(shù)據(jù)處理之后，便不會再進行數(shù)據(jù)劫持

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

以上是“Vue中怎么定義數(shù)據(jù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！