詳解Vue與VueComponent的關系

Posted on by

下面這個案例 復習我們之前學過的原型鏈的知識點

       // 定義一個構造函數
        function Demo() {
            this.a = 1
            this.b = 2
        }
        //創建一個Demo實例對象
        const d = new Demo()
        console.log(Demo.prototype); //顯示原型屬性
        console.log(d.__proto__); //隱式原型屬性
        console.log(Demo.prototype === d.__proto__); //true
        //程序員通過顯示原型屬性操作原型對象，追加一個x屬性，值為99
        Demo.prototype.x = 99
        console.log('@',d.__proto__.x);

根據下面這個組件來分析 VueComponent

<body>
    <div id="root">
         <school></school>
    </div>
    <script>
        Vue.config.productionTip = false
        //定義school組件
        const school = Vue.extend({
            name: 'school',
            template: `
              <div>
                <h2>學校名稱：{{name}}</h2>
                <h2>學校地址：{{address}}</h2>
              </div>
            `,
            data() {
                return {
                    name: '尚矽谷',
                    address: '北京'
                }
            }   
        })
        //創建Vue
        new Vue({
            el:'#root',
            components:{
                school,
            }
        })
    </script>
</body>

1、school組件本質是一個名為VueComponent的構造函數，且不是程序員定義的，是Vue.extend生成的

2、我們隻需要寫<school/>或<school</school>,vue解析時會幫我們創建school組件的實例對象；即Vue幫我們執行的：new VueComponent(options)

3、特別註意：每次調用Vue.extend，返回的都是一個全新的VueComponent

4、關於this指向：

  • 組件配置中：data函數、methods中的函數、watch中的函數、computed中的函數 它們的this均是 VueComponent實例對象
  • new Vue(options)配置中：data函數、methods中的函數、watch中的函數、computed中的函數 它們的this均是 Vue實例對象

5、VueComponent的實例對象，以後簡稱vc —- 組件實例對象

重點

  • 一個重要的內置關系：VueComponent.prototype._proto_===Vue.prototype
  • 為什麼要有這個關系：讓組件實例對象vc可以訪問到Vue原型上的屬性、方法

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：