Vue2 和 Vu3 区别(根实例部分)

vue根实例的创建

• vue2

new Vue({
})

• vue3

 const {createApp}=Vue;
 createApp({
 });

vue根实例的挂载

• vue2 通过实例的$mount方法

   const app=new Vue({            
            data(){
                return {
                    obj:{
                        foo:1
                    }
               }
            }                     

     });
    app.$mount('#app');

• vue2 通过options选项el

      const app=new Vue({
            el:'#app',
            data(){
                return {
                    obj:{
                        foo:1
                    }
                }
            } 
        });

• vue3 通过实例的mount方法

        createApp({
            data(){
                return {
                     title:'title2'
                 }
             }
        }).mount('#demo');

根实例中data的创建

vue2 写法一

const app=new Vue({
         el:'#app',
         data(){
                return {
                    obj:{
                        foo:1
                    }
           	}           
          }       

        });

vue2 写法二

const app=new Vue({
         el:'#app',
         data： {
                  obj:{
                      foo:1
                  }
           	           
          }       

        });

vue2支持两种写法

vue3 只支持函数方式不支持对象的方式

 createApp({
            //不能使用对象 
            // data:{
            //     title:'title2'
            // }
            
            //只能使用 data函数 
            data(){
                return {
                    title:'title2'
                }
            }
        }).mount('#demo');

不能使用此方式，页面报错

 createApp({
            //不能使用对象 
             data:{
                title:'title2'
            }
        }).mount('#demo');

总结：

1. 根实例的创建 vue2 使用new Vue ，vue3使用createApp方法；
2. 实例的挂载vue2有两种方式el和$mount()方法，vue3只有一种mount()方法；
3. 根实例中vue2中的data支持两种方式，vue3只支持函数方式；