Vue中如何定義數(shù)據(jù)示例詳解

更新時(shí)間：2021年09月24日 12:42:21 作者：Nordon

這篇文章主要給大家介紹了關(guān)于Vue中如何定義數(shù)據(jù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

在開(kāi)發(fā)的過(guò)程中，定義變量是一件非常高頻且十分基礎(chǔ)的事情，如何合理的根據(jù)變量的使用場(chǎng)景和作用域范圍進(jìn)行定義變量，是一件很小缺很容易犯錯(cuò)的事情

Vue2已經(jīng)流行使用了這么多年，多數(shù)開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中喜愛(ài)在data選項(xiàng)中梭哈定義很多變量，這樣做非常不利于代碼的閱讀性、維護(hù)性和性能，想要很好的使用變量，需要結(jié)合Vue和JS的特性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

到此這篇關(guān)于Vue中如何定義數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Vue定義數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

一文詳解vue生命周期在uniapp中的用法
在uniapp中,vue的生命周期的用法基本都得以保留,但是對(duì)于特殊的需求以及特殊的情況,uniapp還引入了一些特有的生命周期鉤子,本文給大家詳細(xì)介紹了vue生命周期在uniapp中的用法,感興趣的朋友可以參考下
2024-01-01
Vue首頁(yè)界面加載優(yōu)化實(shí)現(xiàn)方法詳解
如果你也遇到在 vue 應(yīng)用中，首頁(yè)加載資源過(guò)多，導(dǎo)致加載緩慢的問(wèn)題，下面的方法也許能幫到你，主要的處理思想是：讓首頁(yè)多余的資源能在需要它的時(shí)候再加載
2022-09-09
Vuex?Actions多參數(shù)傳遞的解決方案
在?Vuex?中,actions?的設(shè)計(jì)默認(rèn)只支持單個(gè)參數(shù)傳遞,這有時(shí)會(huì)限制我們的使用場(chǎng)景,下面我將詳細(xì)介紹幾種處理多參數(shù)傳遞的解決方案,從基礎(chǔ)到高級(jí),幫助您靈活應(yīng)對(duì)各種需求,需要的朋友可以參考下
2025-04-04
vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)(最新推薦)
這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù),這里就是vue3中setup組合式api中如何定義響應(yīng)式數(shù)據(jù)并且修改賦值全部?jī)?nèi)容，需要的朋友可以參考下
2022-12-12
vue3?HTTP請(qǐng)求中的axios示例詳解
Axios?是一個(gè)簡(jiǎn)單的基于?promise?的?HTTP?客戶端，適用于瀏覽器和?node.js。Axios?在具有非?？蓴U(kuò)展的接口的小包中提供了一個(gè)簡(jiǎn)單易用的庫(kù)，這篇文章主要介紹了vue3-HTTP請(qǐng)求之a(chǎn)xios,需要的朋友可以參考下
2022-12-12
前端單獨(dú)實(shí)現(xiàn)vue動(dòng)態(tài)路由的示例代碼
Vue動(dòng)態(tài)路由權(quán)限涉及根據(jù)用戶權(quán)限動(dòng)態(tài)生成路由配置,實(shí)現(xiàn)此功能可增強(qiáng)應(yīng)用安全性、靈活性,提升用戶體驗(yàn)和開(kāi)發(fā)效率,本文就來(lái)介紹一下前端單獨(dú)實(shí)現(xiàn)vue動(dòng)態(tài)路由的示例代碼,感興趣的可以了解一下
2024-09-09
element-ui tooltip修改背景顏色和箭頭顏色的實(shí)現(xiàn)
這篇文章主要介紹了element-ui tooltip修改背景顏色和箭頭顏色的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
Vue3父組件訪問(wèn)子組件方法/屬性的五種方案
在Vue3的組件化開(kāi)發(fā)中,父子組件間的通信是核心功能之一,本文將詳細(xì)介紹五種父組件訪問(wèn)子組件屬性/方法的實(shí)現(xiàn)方案,包含最新的<script setup>語(yǔ)法糖實(shí)踐,需要的朋友可以參考下
2025-03-03
vue Cli 環(huán)境刪除與重裝教程 - 版本文檔
這篇文章主要介紹了vue Cli 環(huán)境刪除與重裝教程 - 版本文檔，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別
本篇文章主要介紹了vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09