Vue3——組合式api中的ref&reactive

Vue3引入了全新的功能牵触,組合式api
組合式api的作用是:將原來分散開來定義的數(shù)據(jù),方法陪踩,計算屬性杖们,監(jiān)聽器,組合起來定義一個完整的業(yè)務
setup是組合式api的舞臺肩狂,所有的組合式都要在setup里面使用
ref用于定義響應式數(shù)據(jù)let {ref}=Vue
使用ref()方法摘完,定義一個響應式對象。直接定義的數(shù)據(jù)不具備響應式傻谁,想要有響應式就要使用組合式api里的ref方法包裹一下
修改ref對象的值要通過value屬性
所有的組合式api要在setup方法里面使用,最后記得要return出去孝治,這一點很棒,vue3的打包體積是vue2的一半(用組合式api的方式寫).不是所有的數(shù)據(jù)在頁面中顯示和調(diào)用(方法調(diào)方法)审磁。之前定義是整體暴露√胳現(xiàn)在是按需導出。

一态蒂、基本類型數(shù)據(jù)用ref包杭措,引用類型用reactive包。使用ref和reactive包的數(shù)據(jù)具有響應式

    <li>車名:{{car.name}}</li>   在模本中使用不用點vaule钾恢,在setup中使用需要點value
    <li>車價:{{car.price}}</li>
        // 組合式api的作用是:將原來分散開來定義的數(shù)據(jù)手素,方法,計算屬性赘那,監(jiān)聽器刑桑,組合起來定義一個完成的業(yè)務 
         // vue2中方式寫代碼,vue3中也可以這樣寫代碼(可以用Vue3開發(fā)募舟,但不用vue3的語法)
        // vue3中引入了全新的功能,組合式API
        // ref用于定義響應式數(shù)據(jù)
        // 以前定義數(shù)據(jù)需要包data函數(shù)闻察,現(xiàn)在不需要了可以在setup中定義數(shù)據(jù)
        let {ref}=Vue
        Vue.createApp({
            // setup是組合式api的舞臺拱礁,所有的組合式api都要在setup里面使用
            setup() {
                // 好處可以分開寫數(shù)據(jù),分組相關的數(shù)據(jù)
                    let carName=ref('保時捷')
                    // 直接定義的數(shù)據(jù)沒有響應式辕漂,需要想要具有響應式就要用ref()包裹一下
                    // 可以把ref當成響應式對象
                    let carPrice=ref('100W')
                    // 模塊中的數(shù)據(jù)想要使用一定要返回出去呢灶,
                    // 組合式api方式寫會大大節(jié)約打包體積
                  function updateCar(){  //函數(shù)申明式
                    //   通過ref對象綁定的數(shù)據(jù),修改對象的值钉嘹,要通過value屬性
                      console.log(carName);
                      carName.value="特斯拉"
                      carPrice.value="80W"
                  }
                //   所有模塊在一起鸯乃,后期修改起來很方便
                    let planeName=ref('波音747')
                    let planePrice=ref('10y')
                    function updatePlane(){
                    phoneName.value="B52轟炸機"
                    phonePrice.value="30y"
                 }
             
                    // 模塊需要幾個暴露幾個,在頁面中執(zhí)行就要return出去
                    return{
                        carName,
                        carPrice,
                        planeName,
                        planePrice,
                        watchName,
                        watchPrice,
                        phoneName,
                        phonePrice,
                        updateCar,
                        updatePlane,
                        updateWatch,updatePhone
                    }
            },
vue2
            // data() {
            //     return {
            //         carName:'保時捷',
            //         carPrice:'100W',
            //     }
            // },
            // 這種方法寫是整體暴露
            // methods: {
            //     updateCar(){
            //         this.carName='特斯拉',
            //         this.carProce="80w"
            //     }
            // },
        }).mount('#app')

使用ref既可以定義基本數(shù)據(jù)類型跋涣,又可以定義引用類型數(shù)據(jù)(用ref定義的不管是基本類型數(shù)據(jù)或引用類型的數(shù)據(jù)都需要點value)
Vue3又退出了組合式api ——reactive專門用來定義引用類型數(shù)據(jù)
使用方法在對象上用reactive包一下缨睡,修改時不需要再通過value同步數(shù)據(jù)鸟悴,寫法上操作更簡單(注意:reactive不能定義基本數(shù)據(jù)類型)

    //  ref和reactive用于定義響應式數(shù)據(jù)
         let {ref,reactive}=Vue
Vue.createApp({
    // 所有的組合式api要在setup方法里面使用
setup() {
    // 使用ref定義基本類型數(shù)據(jù)
    let name=ref('張三')
    let updateName=()=>{  //字面量或表達式
        // 修改值時要點value
        name.value='李四'
    }
    // 使用ref定義引用類型數(shù)據(jù)
    let car=ref({
    name:'奔馳',
    price:30
    })
    let updateCar=()=>{
  car.value.name="奧迪"
  car.value.price=40
    }
    // 使用reactive定義引用類型數(shù)據(jù)
    // 注意:reactive只能定義引用類型數(shù)據(jù)  值類型用ref
    let plane=reactive({
        name:'長城',
        price:300

    })
    let updatePlane=()=>{
        plane.name="東風",
        plane.price=400
    }
    console.log(car);
    // stup方法,放回出的對象里面的成員奖年,可以在模板中使用细诸,可以按需導出
    return{
        name,updateName,car,updateCar,plane,updatePlane
    }
}
}).mount('#app')

ref原理

        // 原生對象不具備響應式,Vue3會對原生對象進行處理陋守,返回一個proxy
        let obj={
            name:'奔馳',
            price:30
        }
        let o=ref(obj)
        // 01.將源對象震贵,生成一個對應的代理對象
        let proxy=new Proxy({
            get(){},
            set(){},
            deleteProperty(){}
        })
        // 02.將代理對象給o對象的value屬性.只有點value才能獲取到代理對象
        o.value=proxy

reactive原理

        let obj={
            name:'奔馳',
            price:30
        }
        let o=reactive(obj)
        //直接返回一個對象,所以不需要點value
        o=new Proxy(obj,{
        })
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末水评,一起剝皮案震驚了整個濱河市猩系,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌中燥,老刑警劉巖蝙眶,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異褪那,居然都是意外死亡幽纷,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門博敬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來友浸,“玉大人,你說我怎么就攤上這事偏窝∈栈郑” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長合是。 經(jīng)常有香客問我咒唆,道長,這世上最難降的妖魔是什么驮肉? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮已骇,結果婚禮上离钝,老公的妹妹穿的比我還像新娘。我一直安慰自己褪储,他們只是感情好卵渴,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鲤竹,像睡著了一般浪读。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天碘橘,我揣著相機與錄音互订,去河邊找鬼。 笑死蛹屿,一個胖子當著我的面吹牛屁奏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播错负,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼坟瓢,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了犹撒?” 一聲冷哼從身側響起折联,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎识颊,沒想到半個月后诚镰,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡祥款,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年清笨,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刃跛。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡抠艾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出桨昙,到底是詐尸還是另有隱情检号,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布蛙酪,位于F島的核電站齐苛,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏桂塞。R本人自食惡果不足惜凹蜂,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望藐俺。 院中可真熱鬧炊甲,春花似錦、人聲如沸欲芹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽菱父。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間浙宜,已是汗流浹背官辽。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留粟瞬,地道東北人同仆。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像裙品,于是被迫代替她去往敵國和親俗批。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容