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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。