Vue3 (1)

一、vue2与vue3的区别

1、vue2创建实例

导入vue2

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

创建vue2实例

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

2、vue3

导入vue3

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

vue3创建一个实例：vue3里面的vue是一个对象，通过对象的createApp方法，创建一个vue实例

vue3中取消了el选项

vue3中，无论是组件还是vue实例，data选项必须的一个方法，由方法返回对象

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

    }).mount('#app')

二、vue2和vue3响应式的区别

 <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的响应式原理区别

<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 },//读取属性的值，调用get方法
set(val){ obj.name=val
document.querySelector('#name').innerHTML = obj3.name
 }//设置属性的值，调用set方法
})
 </script>

vue2在实例化时，会将data里面的所有数据采用Object.defineProperty进行处理，实现响应式，但是之后添加的数据，由于没有采用Object.defineProperty方法进行处理，所以不具备响应式。$set方法，内部就是对单个属性重新采用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创建一个代理对象
        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>