vm 和 vc 的不同点

vm 是 vc 的大哥。

  • vm 可以用 el , vc 不可以;
  • vm 中的 data 可以写成 对象式 或 函数式， vc 中的 data 只能写成函数式。

源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>一个重要的内置关系</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype  //★★★
            2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue的原型对象 上的属性、方法。
        -->
        <!-- 准备好一个容器-->
        <div id="root">
            <school></school>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        //在 Vue的原型对象 上，增加 属性x，并赋值为 99
        Vue.prototype.x = 99

        //整一个vc:
        //定义school组件
        const school = Vue.extend({
            name:'school',
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>    
                    <h2>学校地址：{{address}}</h2>    
                    <button @click="showX">点我输出x</button>
                </div>
            `,
            data(){
                return {
                    name:'尚硅谷',
                    address:'北京'
                }
            },
            methods: {
                showX(){
                    console.log(this.x)    //this指向的是本组件实例school ,因为 组件实例对象vc 可以访问 Vue原型上的属性、方法，所以此处也就可以放到 x
                }
            },
        })

        //创建一个vm
        const vm = new Vue({
            el:'#root',
            data:{
                msg:'你好'
            },

            components:{
                school
            }
        })

        console.log(school.prototype.__proto__ === Vue.prototype) //true

        //定义一个构造函数
        /* function Demo(){
            this.a = 1
            this.b = 2
        }
        //创建一个Demo的实例对象
        const d = new Demo()

        //无论是 显式 还是 隐式 原型属性，统统属于 原型对象。
        console.log(Demo.prototype) //.prototype 显式 原型属性(记住：显式原型属性，只有 函数 才配拥有)
        //记住： 只要是一个对象，那么这个对象必然有 隐式原型属性 __proto__ ，该属性始终指向 缔造者的原型对象。
        console.log(d.__proto__)     //.__proto__ 隐式 原型属性。  

        console.log(Demo.prototype === d.__proto__) //true

        //程序员 通过 显示原型属性 操作 原型对象，追加 一个x属性，值为99
        Demo.prototype.x = 99
        console.log('@', d.__proto__.x) //演示: 上一句通过 显示原型对象 设置了99， 然后再通过 隐式原型属性 找到这个值。 从此证明两者是同一个东西。
        //.__proto__ 这种下划线一看这么多，就是不想被外部调用。 那么直接省掉，直接写行不行呢?
        console.log('@',d) 

        */

    </script>
</html>

Vue 和 vc 的关系

058_Vue实例与组件实例 - 图1