欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中data和data()的區(qū)別說明

 更新時間:2022年03月03日 10:12:15   作者:lzh~  
這篇文章主要介紹了vue中data和data()的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

data和data()的區(qū)別

Vue實例中data屬性

new Vue({
? el: '#app',
? data: {
? ? message: 'message'
? }
})

組件化的項目中使用

export default{
? ? data(){
? ? ? ? return {
? ? ? ? ? ?message: 'message'
? ? ? ? }
? ? }
}

注意:

在大型項目中data會造成數(shù)據(jù)污染(data是全局的)

將data封裝成一個函數(shù),我們在實例化組件的時候只是調(diào)用了這個函數(shù)生成的數(shù)據(jù)副本,這就避免了數(shù)據(jù)污染。

詳解vue.js中的data

本文從Vue.js的官方中文文檔來逐行分析看看Vue.js的數(shù)據(jù)對象——data

官方文檔地址

文檔之一

分析一:

首先,data的類型可以是Object

其次,組件(component)里的定義的data必須是方法類型的,至于為什么接下來會介紹到;

文檔之二

分析二:

在上圖的實例中,app的data對象中有五個屬性,分別是:

  • newTodoText
  • visitCount
  • hideCompletedTodos
  • todos
  • error

Vue會把這五個屬性轉(zhuǎn)化為getter和setter來控制訪問對象app的屬性,以第一個屬性newTodoText為例設(shè)置了getter和setter:

文檔之三

分析三:

這個好理解,就是你可以在data中可以定義屬性時在屬性名開頭加上下劃線“_”或者美元符號“$”,就不可以直接訪問,

此時圖一會報錯,顯示 _first is not defined ,圖二才是正確姿勢

文檔之四

分析四:

這就是分析一要解決的問題了,為什么組件(component)里的定義的data必須是方法類型,原因就是在此,在工程中,每個組件都有可能用來被創(chuàng)建多個實例,而這個組件的實例他們的屬性是不能共用的!意思是組件A的屬性改變不能引起組件B的同一屬性改變,結(jié)合原型鏈知識很容易就能想清楚

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 關(guān)于iview按需引用后使用this.$Modal報錯的解決

    關(guān)于iview按需引用后使用this.$Modal報錯的解決

    這篇文章主要介紹了關(guān)于iview按需引用后使用this.$Modal報錯的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決

    誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決

    這篇文章主要介紹了誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 卸載vue2.0并升級vue_cli3.0的實例講解

    卸載vue2.0并升級vue_cli3.0的實例講解

    在本篇文章里小編給大家整理的是關(guān)于卸載vue2.0并升級vue_cli3.0的實例內(nèi)容,需要的朋友們可以學(xué)習(xí)參考下。
    2020-02-02
  • Vue-cli3中使用TS語法示例代碼

    Vue-cli3中使用TS語法示例代碼

    typescript不僅可以約束我們的編碼習(xí)慣,還能起到注釋的作用,當我們看到一函數(shù)后我們立馬就能知道這個函數(shù)的用法,需要傳什么值,返回值是什么類型一目了然,這篇文章主要介紹了Vue-cli3中使用TS語法示例代碼,需要的朋友可以參考下
    2023-02-02
  • vue項目中如何通過cdn引入資源并配置詳解

    vue項目中如何通過cdn引入資源并配置詳解

    生產(chǎn)環(huán)境中將項目依賴的一些第三方包替換成通過cdn方式外部加載,而不是打包到 vender,對于提升應(yīng)用的加載、響應(yīng)速度很有意義,下面這篇文章主要給大家介紹了關(guān)于vue項目中如何通過cdn引入資源并配置的相關(guān)資料,需要的朋友可以參考下
    2022-06-06
  • 在Vue中創(chuàng)建可重用的 Transition的方法

    在Vue中創(chuàng)建可重用的 Transition的方法

    這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-06
  • Vue項目優(yōu)化打包詳解

    Vue項目優(yōu)化打包詳解

    這篇文章主要為大家介紹了Vue項目的優(yōu)化打包,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • Vue.js之mixins混合組件詳解

    Vue.js之mixins混合組件詳解

    這篇文章主要介紹了Vue.js之mixins混合組件詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • antd?Vue實現(xiàn)Login登錄頁面布局案例詳解?附帶驗證碼驗證功能

    antd?Vue實現(xiàn)Login登錄頁面布局案例詳解?附帶驗證碼驗證功能

    這篇文章主要介紹了antd?Vue實現(xiàn)Login登錄頁面布局案例詳解附帶驗證碼驗證功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-05-05
  • vue音樂播放器插件vue-aplayer的配置及其使用實例詳解

    vue音樂播放器插件vue-aplayer的配置及其使用實例詳解

    本篇文章主要介紹了vue音樂播放器插件vue-aplayer的配置及其使用實例詳解,具有一定的參考價值,有興趣的可以了解一下
    2017-07-07

最新評論