vue 的vc与vm

vc 与 vm 的区别：

vm和vc在某种程度上确实有很多相像之处，但又有着本质的区别，vc差不多像是vm的小弟，可以理解为类似生活中的一对双胞胎，一个稍微早出生几分钟的是大哥，也就是vm，另外一个就是小弟vc，虽然会很像，但是还是有区别的。

总体上来说，vm身上有的，vc基本也有。

data函数、methods中的函数、watch中的函数、computed中的函数在vm和vc里边都有，生命周期也都是一样的，以及相同的数据代理模式。

vc有的vm都有，vm可以通过el决定为哪一个容器服务，但是vc是没有 el 的！且 vc 的data要写成函数式，在vm中的data写成对象或者函数都行

Vue和VueComponent的内置关系

VueComponent.prototype.proto === Vue.prototype (这里的proto前后都是有__的)

即构造函数的显示原型属性 === 实例对象的隐式原型属性

atguigu张老师

prototype：显示原型属性

__proto__：隐式原型属性

显示原型属性和隐式原型属性都指向原型对象

`prototype`显示原型属性和`__proto__`隐式原型属性

js中创建对象的几种（4种）方式：

我们先来了解一下js中创建对象的几种（4种）方式：

通过Object()方法来创建
通过字面量法创建对象
通过自定义函数创建对象
通过工厂模式创建对象

我们来看看第三种方式你就知道了——通过函数创建！！！

什么意思？函数就是对象？不错！！！

函数就是对象？

在js中对象就是神一般的存在，什么都是对象（包括函数），万物皆对象。

在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说：constructor属性的值是函数A )。

看下面的代码：

1.2 使用构造函数创建对象

当把一个函数作为构造函数 (理论上任何函数都可以作为构造函数) 使用new创建对象的时候，那么这个对象就会存在一个默认的不可见的属性，来指向了构造函数的原型对象。这个不可见的属性我们一般用 [[prototype]] 来表示，只是这个属性没有办法直接访问到。

看下面的代码：

说明：

从上面的图示中可以看到，创建p1对象虽然使用的是Person构造函数，但是对象创建出来之后，这个p1对象其实已经与Person构造函数没有任何关系了，p1对象的[[ prototype ]]属性指向的是Person构造函数的原型对象。
如果使用new Person()创建多个对象，则多个对象都会同时指向Person构造函数的原型对象。
我们可以手动给这个原型对象添加属性和方法，那么p1,p2,p3…这些对象就会共享这些在原型中添加的属性和方法。
如果我们访问p1中的一个属性name，如果在p1对象中找到，则直接返回。如果p1对象中没有找到，则直接去p1对象的[[prototype]]属性指向的原型对象中查找，如果查找到则返回。(如果原型中也没有找到，则继续向上找原型的原型—原型链。
如果通过p1对象添加了一个属性name，则p1对象来说就屏蔽了原型中的属性name。换句话说：在p1中就没有办法访问到原型的属性name了。
通过p1对象只能读取原型中的属性name的值，而不能修改原型中的属性name的值。 p1.name = “李四”; 并不是修改了原型中的值，而是在p1对象中给添加了一个属性name。

看下面的代码：

二、与原型有关的几个属性和方法

2.1 prototype属性

prototype 存在于构造函数中 (其实任意函数中都有，只是不是构造函数的时候prototype我们不关注而已) ，他指向了这个构造函数的原型对象。

参考前面的示意图。

2.2 constructor属性

constructor属性存在于原型对象中，他指向了构造函数

看下面的代码：

我们根据需要，可以Person.prototype 属性指定新的对象，来作为Person的原型对象。

但是这个时候有个问题，新的对象的constructor属性则不再指向Person构造函数了。

看下面的代码：

2.3 proto 属性(注意：左右各是2个下划线)

用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 [[prototype]] , 这个属性就指向了构造方法的原型对象。

但是在个别浏览器中，也提供了对这个属性[[prototype]]的访问(chrome浏览器和火狐浏览器。ie浏览器不支持)。访问方式：p1.proto

但是开发者尽量不要用这种方式去访问，因为操作不慎会改变这个对象的继承原型链。

2.4 hasOwnProperty() 方法

大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[prototype]]属性指向的原型。

那么如何判断这个对象的来源呢？

hasOwnProperty方法，可以判断一个属性是否来自对象本身。

所以，通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。

也即是说，在原型中的属性和不存在的属性都会返回fasle。

2.5 in 操作符

in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true

vue 的vc与vm相关推荐

Vue源码: 关于vm.$watch()内部原理
vm.$watch()用法关于vm.$watch()详细用法可以见官网. 大致用法如下: <script>const app = new Vue({el: "#app" ...
vue $ 符号（例如vm.$data vs vm.data）：读取实例属性 vs 读取 data 数据
vm.$ 读取实例中属性列表(第一层) vm.data 直接读取实例 data 数据属性中的数据值(第二层).等价于 vm.$data.data <script>var ok=new Vu ...
Vue中的vm和VueComponent的实例对象
关于vm和vc,vm为Vue的实例对象,vc为VueComponent的是对象. 一.vm 1.Vue的实例对象,以后简称vm. (1) vm的隐式原型属性指向Vue的原型对象. (2) VueCom ...
VUE | key的内部原理、Vue监测数据的原理、Vue.set()和vm.$set()的使用
目录目录一.react.vue中的key有什么作用?(key的内部原理) 1.虚拟DOM中key的作用: 2.对比规则: 3.用index作为key可能会引发的问题: 4.开发中如何选择key? ...
Vue组件化之VueComponent介绍
简介这篇文章主要介绍的是VueComponent函数. <!DOCTYPE html> <html lang="en"> <head>< ...
【尚硅谷】Vue.js从入门到精通笔记
目录第1章:Vue核心 1-1.Vue简介 1-1-1.什么是Vue 1-1-2.Vue的特点 1-1-3.搭建Vue开发环境 1-1-4.创建Vue对象 1-2.模板语法 1-3.数据绑定 1-4 ...
[Study]Vue
文章目录一.基础语法 1.1 概述 1.2 入门案例 1.3 el 与 data 1.4 MVVM 1.5 数据代理 1.6 事件处理 1.7 计算属性 1.8 监视属性 1.9 绑定样式 1.10 ...
Vue 2.0/3.0
vue核心 vue官网 1. 英文官网: https://vuejs.org/ 2.中文官网: https://cn.vuejs.org/ 模板语法插值语法(双大括号表达式) 指令语法(以 v-开头 ...
vue详细知识，语法和必备知识
文章目录目录 1.vue简介 1.1 vue是什么 1.2 Vue的特点 1.3 学习Vue之前需要掌握哪些JavaScript基础知识 1.4 初识vue需要知道的地方 2. vue的核心基础 2 ...

vue 的vc与vm

vc 与 vm 的区别：

Vue和VueComponent的内置关系

显示原型属性和隐式原型属性都指向原型对象

函数就是对象？

vue 的vc与vm相关推荐

最新文章

热门文章