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

1、vue2創(chuàng)建實例

導入vue2

   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>

創(chuàng)建vue2實例

 new Vue({
    // el:'#app' ,
    data:{
  name:"vue2",
  age:8
}
  }).$mount('#app')

2、vue3

導入vue3

 <script src="https://unpkg.com/vue@next"></script>

vue3創(chuàng)建一個實例：vue3里面的vue是一個對象，通過對象的createApp方法，創(chuàng)建一個vue實例

vue3中取消了el選項

vue3中，無論是組件還是vue實例，data選項必須的一個方法，由方法返回對象

        Vue.createApp({
            data() {
                return {
                    name:'vue3',
                    age :2
                }
            },

    }).mount('#app')

二、vue2和vue3響應式的區(qū)別

 <div id="app">
        <div> 學生信息：{{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的響應式

 <script>
       new Vue({
             el:"#app",
             data:{
                 student:{
                 name:"張三",
                    age:39},
              foods: ['蘋果', '香蕉', '橘子', '芒果', '西瓜']
                   },
        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的響應式

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

三、vue2和vue3的響應式原理區(qū)別

<div id="app">
        <div id="name"></div>
        <div id="age"></div>
    </div>

1、vue2的響應式原理

 <script>
let obj3 = {
            name: '李四',
            age: 20
        }
 document.querySelector('#name').innerHTML = obj3.name
 document.querySelector('#age').innerHTML = obj3.age
//定義一個obj2對象，作為obj的代理對象
let obj2={}
//通過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
 }//設置屬性的值，調(diào)用set方法
})
 </script>

vue2在實例化時，會將data里面的所有數(shù)據(jù)采用Object.defineProperty進行處理，實現(xiàn)響應式，但是之后添加的數(shù)據(jù)，由于沒有采用Object.defineProperty方法進行處理，所以不具備響應式。$set方法，內(nèi)部就是對單個屬性重新采用Object.defineProperty進行處理，從而具備響應式。

2、vue3的響應式原理

<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
//通過proxy創(chuàng)建一個代理對象
        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>