前言

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

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

在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中都需要使用，作為區域性變數使用不合適，那麼可http://www.cppcns.com以將其作用域提升，方便在多個地方使用

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

    }
  },};
</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中遞迴遍歷資料進行資料劫持的時候便不會對其進行資料劫持www.cppcns.com，特別對於大量的表格類的資料效能提升會顯著一些

可以從Vue原始碼中看到，為何使用了Object.freeze對資料處理之後，便不會再進行資料劫持

function defineReactive (obj,key) {
  // 刪除無關程式碼 只保留了判斷條件
  const pr客棧operty = Object.getOwnPropertyDescriptor(obj,key)
  if (property && property.configurable === false) {
    return
  }
}

總結

到此這篇關於Vue中如何定義資料的文章就介紹到這了,更多相關Vue定義資料內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！