谈谈什么叫vue实例 vue应用 vue组件

new 一个vue对象就形成一个 vue实例//用于挂载vue应用的dom元素

 

//定义用于挂载vue应用的dom元素
<div id="app">
    //自定义组件
　　<component01></component01>
　　<component02></component02>
　　</div>
//用于创建vue根组件的配置对象 ：包含data methods watch computed component等属性和方法
const helloVueApp = {

        data(){
            return {
                message:"Hello Vue!",
            }
        },
        methods:{
            fun1(){
                return this.message;
            },
            fun2(){},
            fun3(){}
            // ...
        },
        watch:{
            message:function(newValue,oldValue){
                this.message = newValue;
            }
        },
        computed:{
            fun4:function(){}
        },
　　　　//定义组件--这里定义的是局部组件
        component:{
            "component01":{
                props:["value1","value2..."],
                data(){},
                template:``
                // .....
            }
        }
    }
//创建vue实例：将vue应用挂载到dom元素上
const  vm = Vue.createApp(helloVueApp).mount("#app")

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

const helloVueApp = {}

比如 const  vm = Vue.createApp(helloVueApp).mount("#app") 这就是创建vue实例的过程  

* vm就是创建好的实例 （他可以饮用配置对象中的方法和数据）

* #app指向dom元素 vue实例将在该元素中生效

* helloVueApp 是用于生成根组件的配置对象

* mount方法将挂载vue应用到dom元素上 

* 实例和实例中定义的各种组件形成了完整的vue应用