VueComponent组件与Vue之间的重要内置关系

最新推荐文章于 2023-01-03 19:07:10 发布

“玫瑰无原则 ”

最新推荐文章于 2023-01-03 19:07:10 发布

阅读量877

点赞数 3

分类专栏： Vue 文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/m0_60273757/article/details/122121102

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言

前提

讲解：VueComponent . prototype._ _proto_ _ === Vue . prototype

总结

前言

想要知道VueComponent组件与Vue之间的重要内置关系，首先要知道他们分别是什么。我这里就是简单带过一下，不展开讲解。

VueComponent组件：

1. 组件本质是一个名为VueComponent的构造函数，是Vue. extend生成的。

2.写组件标签的时候， Vue解析时会帮我们创建VueComponent的实例对象，即Vue帮我们执行的: new VueComponent (options)。

Vue：一套用于构建用户界面的渐进式JavaScript框架。

前提

VueComponent组件是由Vue. extend生成的，即在我们定义组件的时候。我们都明白构造函数是需要new关键字来进行实例化的，初步使用Vue.extend只是构建，并不在这里进行实例化而是在使用组件标签的时候进行实例化。比如说，下列代码在root容器中解析到</student>标签的时候进行实例化，而不是在 const student的时候进行实例化。需要明白就是studen是VueComponent的实例对象！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    
</head>

<body>
    <div id="root">

       <student></student>

    </div>

    <script>
        Vue.config.productionTip = false;

        const student = Vue.extend({
            template: `
    <div>
        <h2>学生名称:{{name}}</h2>
        <h2>学生地址:{{address}}</h2>
   </div>
    `,
            data() {
                return {
                    name: "张三",
                    address: "北京"
                }
            }
        })

        const vm = new Vue({
            el: '#root',
            components: {
                student
            }
        });

    </script>
</body>

</html>

此时我们在浏览器控制台查看一下，student和vm。结果如下，vm的构造函数是Vue是毋庸置疑的，但是我们其实没有去new一个VueComponent，但是这里显示student的构造函数就是VueComponent，也就证实了：组件本质是一个名为VueComponent的构造函数，是Vue. extend生成的。

讲解：VueComponent . prototype._ _proto_ _ === Vue . prototype

我们要知道一句话：实例的隐式原型属性（__proto__）永远指向自己缔造者的显示原型（prototype）,也就是说 vm.__proto__===vue.prototype，验证如下：

验证成立我们就可以知道：

同理可得：

按道理来讲，VueComponent的__proto__应该指向Object原型对象，但是！Vue里面并不是这样的，而是让VueComponent的__proto__指向了Vue的原型对象，即如下图所示：

此时我们就得到了：VueComponent.prototype.__proto__ === Vue . prototype ，我们在控制台验证一下：

这里要注意，不是关系不成立，而是因为VueComponent只是一个构造函数不可以直接这样输出！所以我们用student这个实例VueComponent的实例对象代替一下，再次验证：

此时我们发现验证成功了！说明当你在Vue的原型身上定义一个属性的时候，VueComponent肯定也是能拿到的！我们再试一下：

为什么可以拿到？因为会顺着原型链查找，当VueComponent自己没有，就会找VueComponent . prototype，还是没有就会去查找VueComponent . prototype._ _proto_ _ ，还是没有机会找Object原型对象，还没有就说明确实不存在就会报错！整体的一个顺序就是这个样子：