一、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>