Vue3 (1)

一、vue2與vue3的區(qū)別

1挽铁、vue2創(chuàng)建實(shí)例

導(dǎo)入vue2
   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>
創(chuàng)建vue2實(shí)例
 new Vue({
    // el:'#app' ,
    data:{
  name:"vue2",
  age:8
}
  }).$mount('#app')

2袋倔、vue3

導(dǎo)入vue3
 <script src="https://unpkg.com/vue@next"></script>

vue3創(chuàng)建一個(gè)實(shí)例:vue3里面的vue是一個(gè)對(duì)象坦辟,通過(guò)對(duì)象的createApp方法鳄橘,創(chuàng)建一個(gè)vue實(shí)例

vue3中取消了el選項(xiàng)
vue3中声离,無(wú)論是組件還是vue實(shí)例,data選項(xiàng)必須的一個(gè)方法瘫怜,由方法返回對(duì)象
        Vue.createApp({
            data() {
                return {
                    name:'vue3',
                    age :2
                }
            },

    }).mount('#app')

二术徊、vue2和vue3響應(yīng)式的區(qū)別

 <div id="app">
        <div> 學(xué)生信息:{{student}} </div>
        <button @click="student.name='李四'">修改姓名</button>
        <button @click="student.age++">修改年齡</button>
        <button @click="addSex">增加性別</button>
        <button @click="delName">刪除姓名</button>

        <div>食物:{{foods}}</div>
        <button @click="addFood">添加食物</button>
        <button @click="delFood">刪除食物</button>
    </div>

1、vue2的響應(yīng)式

 <script>
       new Vue({
             el:"#app",
             data:{
                 student:{
                 name:"張三",
                    age:39},
              foods: ['蘋(píng)果', '香蕉', '橘子', '芒果', '西瓜']
                   },
        methods:{
           addSex(){ 
               this.$set(this.student,'sex','男')}
                 }鲸湃,
            addFood(){ 
                this.$set(this.foods,5,'櫻桃')}
                 }赠涮,
         delName(){
                this.$delete(this.student,'name')
             },
          delFood(){
                this.$delete(this.foods,3)
               }
          }, 
            })

2、vue3的響應(yīng)式

<script>
        Vue.createApp({
            data() {
                return {
                    student: {
                        name: '張三',
                        age: 23
                    },
                    foods: ['蘋(píng)果', '香蕉', '橘子', '芒果', '西瓜']
                }
            },
            methods: {
                addSex() {
                    this.student.sex = '男'
                },
                delName() {
                    delete this.student.name
                },
                addFood() {
                    this.foods[3] = '櫻桃'
                },
                delFood() {
                    this.foods[4] = ''
                }
            },
        }).mount('#app')
    </script>

三暗挑、vue2和vue3的響應(yīng)式原理區(qū)別

<div id="app">
        <div id="name"></div>
        <div id="age"></div>
    </div>
1笋除、vue2的響應(yīng)式原理
 <script>
let obj3 = {
            name: '李四',
            age: 20
        }
 document.querySelector('#name').innerHTML = obj3.name
 document.querySelector('#age').innerHTML = obj3.age
//定義一個(gè)obj2對(duì)象,作為obj的代理對(duì)象
let obj2={}
//通過(guò)Object.defineProperty方法炸裆,給obj2,添加屬性
Object.defineProperty(obj2,'name',{
get(){ return obj.name },//讀取屬性的值垃它,調(diào)用get方法
set(val){ obj.name=val
document.querySelector('#name').innerHTML = obj3.name
 }//設(shè)置屬性的值,調(diào)用set方法
})
 </script>
vue2在實(shí)例化時(shí)烹看,會(huì)將data里面的所有數(shù)據(jù)采用Object.defineProperty進(jìn)行處理国拇,實(shí)現(xiàn)響應(yīng)式,但是之后添加的數(shù)據(jù)惯殊,由于沒(méi)有采用Object.defineProperty方法進(jìn)行處理酱吝,所以不具備響應(yīng)式。$set方法靠胜,內(nèi)部就是對(duì)單個(gè)屬性重新采用Object.defineProperty進(jìn)行處理掉瞳,從而具備響應(yīng)式。
2浪漠、vue3的響應(yīng)式原理
<div id="app">
        <div id="name2">{{name}}</div>
        <div id="age2">{{age}}</div>
    </div>

 <script>
        let obj3 = {
            name: '李四',
            age: 20
        }
        document.querySelector('#name2').innerHTML = obj3.name
        document.querySelector('#age2').innerHTML = obj3.age
//通過(guò)proxy創(chuàng)建一個(gè)代理對(duì)象
        let obj4 = new Proxy(obj3, {
            get(target, property) {
                // return target[property]
                return Reflect.get(target, property)
            },
            set(target, property, value) {
                // target[property]=value
                Reflect.set(target, property, value)
                document.querySelector(`#${property}2`).innerHTML = Reflect.get(target, property)
            },
            deleteProperty(target, property) {
                // return delete target[property]
                document.querySelector(`#${property}2`).remove()
                return Reflect.deleteProperty(target, property)
            }
        })
        Vue.createApp({


        }).mount('#app')
    </script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末陕习,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子址愿,更是在濱河造成了極大的恐慌该镣,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件响谓,死亡現(xiàn)場(chǎng)離奇詭異损合,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)娘纷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)嫁审,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人赖晶,你說(shuō)我怎么就攤上這事律适》茫” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵捂贿,是天一觀的道長(zhǎng)纠修。 經(jīng)常有香客問(wèn)我,道長(zhǎng)厂僧,這世上最難降的妖魔是什么扣草? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮颜屠,結(jié)果婚禮上辰妙,老公的妹妹穿的比我還像新娘。我一直安慰自己汽纤,他們只是感情好上岗,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著蕴坪,像睡著了一般肴掷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上背传,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天呆瞻,我揣著相機(jī)與錄音,去河邊找鬼径玖。 笑死痴脾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的梳星。 我是一名探鬼主播赞赖,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼冤灾!你這毒婦竟也來(lái)了前域?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤韵吨,失蹤者是張志新(化名)和其女友劉穎匿垄,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體归粉,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡椿疗,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了糠悼。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片届榄。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖倔喂,靈堂內(nèi)的尸體忽然破棺而出铝条,到底是詐尸還是另有隱情童擎,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布攻晒,位于F島的核電站,受9級(jí)特大地震影響班挖,放射性物質(zhì)發(fā)生泄漏鲁捏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一萧芙、第九天 我趴在偏房一處隱蔽的房頂上張望给梅。 院中可真熱鬧,春花似錦双揪、人聲如沸动羽。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)运吓。三九已至,卻和暖如春疯趟,著一層夾襖步出監(jiān)牢的瞬間拘哨,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工信峻, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留倦青,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓盹舞,卻偏偏與公主長(zhǎng)得像产镐,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子踢步,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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

  • ![Flask](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAW...
    極客學(xué)院Wiki閱讀 7,253評(píng)論 0 3
  • 不知不覺(jué)易趣客已經(jīng)在路上走了快一年了贾虽,感覺(jué)也該讓更多朋友認(rèn)識(shí)知道易趣客逃糟,所以就謝了這篇簡(jiǎn)介,已做創(chuàng)業(yè)記事蓬豁。 易趣客...
    Physher閱讀 3,425評(píng)論 1 2
  • 雙胎妊娠有家族遺傳傾向绰咽,隨母系遺傳。有研究表明地粪,如果孕婦本人是雙胎之一取募,她生雙胎的機(jī)率為1/58;若孕婦的父親或母...
    鄴水芙蓉hibiscus閱讀 3,705評(píng)論 0 2
  • 今天理好了行李蟆技,看到快要九點(diǎn)了玩敏,就很匆忙的洗頭洗澡斗忌,(心存一份念想,你總會(huì)打給我的??)然后把洗頭液當(dāng)成沐浴液了??旺聚,...
    bevil閱讀 2,773評(píng)論 1 1
  • 那年我們15织阳,像陽(yáng)光一樣溫暖的年紀(jì)。每天我都會(huì)騎自行車(chē)上學(xué)砰粹,路過(guò)田野唧躲,工廠,醫(yī)院碱璃,村莊弄痹,有微風(fēng),有陽(yáng)光嵌器,有綠...
    木偶說(shuō)愛(ài)你閱讀 2,521評(píng)論 0 3