探索学习 Vue 组件篇第六篇一个重要的内置关系(重要)

一平米

已于 2022-07-24 16:44:32 修改

阅读量278

点赞数

分类专栏： vue 文章标签：学习 vue.js javascript

于 2022-07-24 07:21:15 首次发布

本文链接：https://blog.csdn.net/pymxb1991/article/details/125942873

版权

vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

探索学习 Vue 组件篇
- 第六篇一个重要的内置关系(重要)

探索学习 Vue 组件篇

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

第六篇一个重要的内置关系(重要)

这一节以原型对象引出问题，然后分析Vue与VueComponent的关系

1、知识点

这一小节主要是说一下显式原型属性，隐式原型属性，原型对象，最终目的是：创建一个对象可以明确实例对象的缔造者究竟是谁

1.1. 定义一个构造函数，并创建实例对象

  function Demo(){
          this.a = 1
          this.b = 2
     }
 const d = new Demo();      // d 为Demo 的实例对象

1.2. 认识函数的`prototype` 属性和对象的 `proto`属性

只要是一个函数，那么肯定身上会有一个prototype属性

       console.log("Demo函数的原型属性：",Demo.prototype);   //函数身上 显式原型属性
       console.log("Demo函数构造出来的d实例对象：",d.__proto__);   //实例对象 隐式原型属性

无论是 函数 身上的 显式原型属性 Demo.prototype，还是 实例 身上的 隐式原型属性 d.__proto__ 他们统统都指向了一个对象，那就是 原型对象；
程序员通过显式原型属性，触碰到原型对象，通过操作原型对象，为其追加一个x 属性，值为99
```
   Demo.prototype.x = 99;
```
1. 当程序员通过Demo.prototype.x = 99 给原型对象追加属性的同时，
2. 程序执行的过程中会通过 d.__proto__ 去寻找原型对象上的相应的属性
  如下图流程图
- 通过隐式原型属性显示对象
```
    console.log('实例对象：隐式原型属性：',d.__proto__.x);
```
- 显式属性对象 === 隐式属性对象
```
    console.log("确认显式属性对象 === 隐式属性对象 ： ",Demo.prototype === d.__proto__ );
```
- 如下图两者比较

1.3. _实例对象缔造者

   console.log('实例对象d：',d);     
   function Person(){}
   function Dog(){}
   const person = new Person();
   const dog = new Dog();
   console.log(person);
   console.log(dog);

我们且来先观察一下实例对象d ,然后再来观察person dog 想像一下，如果没有实例对象的缔造者，将会是什么样子的后果；

2、Vue中的内置关系

内置的关系到底是啥呢，一行代码就能把内置关系说明白
就是这行代码 VueComponent.prototype.____proto__ === Vue.prototype
上代码，观察F12打印结果

// 定义组件
  const school = Vue.extend({
      template:`
          <div>
              <h2>学校名称：{{schoolName}}</h2>
              <h2>学校地址：{{schoolAddress}}</h2>
              <button @click='showName'>点我显示学校名</button>
          </div>
      `,
      data(){
          return {
              schoolName: '天津安锐捷大学',
              schoolAddress: '普天科技园'
          }
      },
      methods: {
          showName(){
              console.log("组件实例对象：",this)
          }
      },
   })
   console.log("school 本质：",school)

   console.log("=======school.prototype.__proto__ === Vue.prototype========",school.prototype.__proto__ === Vue.prototype);
   const vm = new Vue({
      el: "#root",
      data: {
         name: "安锐捷",
      },
    })

示例代码效果图

验证完毕内置的关系其实就是下面这段代码
VueComponent.prototype.____proto__ === Vue.prototype

3、Vue中的内置关系详解

下面以一些图例来详细的分析Vue与VueComponent 的关系

3.1.Vue 构造函数，原型对象

Vue 构造函数，原型对象
- Vue 构造函数身上有很多属性(config、component……)，
  - 其中最重要的一个属性叫prototype; prototype的值呢？他是一个显式原型属性，
  - 还有一个属性叫__proto__ ,他是一个隐式原型属性
  - 无论是函数身上的显式原型属性，还是实例身上的隐式原型属性他们统统都指向了一个对象，那就是原型对象
- Vue 原型对象身上也有很多我们用过的属性 $mount $watch 等等

3.2. `new Vue({...})`

Vue 的原型对象上的所有属性和方法，Vue 实例对象都可以使用
- const vm = new Vue({…… })
- vm 是一个实例对象，那么他身上肯定会有隐式原型属性__proto__,那么也就是说，他也会指向自己的原型对象，也就是 Vue 的原型对象
- 需要注意的是，函数身上才会有prototype 对象身上只会有__proto__
  如下以图例形式直观的展示vm Vue Vue原型对象间的关系

3.3. Vue 的原型对象 Object 原型对象

Vue 的原型对象，他也是一个对象，他就是一个普普通通的Object 对象, 所以说Vue 身上也会有一个隐式原型属性 __proto__ 同时他会指向自己的原型对象那就是Object 原型对象
- 核心：实例的隐式原型属性，永远指向自己缔造者的原型对象
- Vue 的实例对象vm 的缔造者是Vue 所以沿着隐式原型链 __proto__ 寻找，那就找到了自己的原型对象Vue 原型对象
- Vue 的原型对象 的 缔造者是Object 所以沿着隐式原型链 __proto__ 寻找，那就找到了自己的原型对象Object 原型对象
- Object 继续沿着自己的隐式原型属性 __proto__ 找，那就是是隐式原型链的尽头 null
  如下以图例形式直观的展示vm Vue Vue原型对象 object的原型对象间的关系

3.4. VueComponent 构造函数

VueComponent 他身上也有很多属性，
- 需要注意的是，他是一个构造函数，所以说他身上肯定会有一个prototype 属性同理，他肯定也会指向自己的原型对象 VueComponent原型对象
- 如下以图例形式直观的展示VueCompoente 与VueComponent原型对象间的关系
当要使用组件的时候，编写组件标签，例如<school></school>
- 使用<school> 组件的时候，Vue肯定会帮我们new VueComponent 对象我们且叫VueComponent实例对象为vc
- VueComponent实例对象名叫vc 他也是一个对象，那么他身上也会有隐式原型属性__proto__ 同时他会指向自己缔造者的原型对象那就是VueComponent 原型对象
- ```
   如下以图例形式直观 的展示**VueCompoente 与VueComponent原型对象**间的关系
```

3.5. VueComponent原型对象的指向

VueComponent原型对象也是对象，并且是一个object 的原型对象
- 正常来说由于VueComponent 隐式原型属性是 __proto__,那么接下来，__proto__应该沿着隐式原型链寻找自己Object 的原型对象，但其实并不是如此，我们先看如下图关系
其实Vue并没有让 VueComponent 隐式原型属性 __proto__,这条线指向 Object 而是让VueComponent的原型对象的隐式原型属性 __proto__,指向了Vue 的原型对象
- VueComponent.prototype.____proto__ 指向了 Vue的原型对象
- 当出现上面这样的指向的时候，也就有了这行代码 VueComponent.prototype.____proto__ === Vue.prototype
- 为什么要这么搞尼？？？？
- 我们想这么一个问题，首先我们在Vue 原型对象上放一个属性 X=99
- 那么VueComponent实例对象vc在找属性的时候，
- 首先在自己身上_data上找，发现自己身上没有，
- 于是就沿着隐式原型属性 __proto__ 自己缔造者的原型对象的身上去找，发现也没有找到，
- 则继续进行查找沿着隐式原型属性 __proto__ 自己缔造者的原型对象的身上去找，于是找就到了Vue 原型对象，就找到了