vue 的vc与vm_vue vm vc-程序员宅基地

技术标签: 1024程序员节  vue  

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]] 来表示,只是这个属性没有办法直接访问到。

​ 看下面的代码:

说明:

  1. 从上面的图示中可以看到,创建p1对象虽然使用的是Person构造函数,但是对象创建出来之后,这个p1对象其实已经与Person构造函数没有任何关系了,p1对象的[[ prototype ]]属性指向的是Person构造函数的原型对象。
  2. 如果使用new Person()创建多个对象,则多个对象都会同时指向Person构造函数的原型对象。
  3. 我们可以手动给这个原型对象添加属性和方法,那么p1,p2,p3…这些对象就会共享这些在原型中添加的属性和方法。
  4. 如果我们访问p1中的一个属性name,如果在p1对象中找到,则直接返回。如果p1对象中没有找到,则直接去p1对象的[[prototype]]属性指向的原型对象中查找,如果查找到则返回。(如果原型中也没有找到,则继续向上找原型的原型—原型链。
  5. 如果通过p1对象添加了一个属性name,则p1对象来说就屏蔽了原型中的属性name。 换句话说:在p1中就没有办法访问到原型的属性name了。
  6. 通过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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_64655972/article/details/127500273

智能推荐

分享面经 竞争对手,Android多线程,Android岗面试12家大厂成功跳槽-程序员宅基地

文章浏览阅读968次,点赞15次,收藏30次。Java里已内置4种常用的线程池(即 已经配置好核心参数),下面会详细说明。

Android使用自己的字体库让你的APP更漂亮_android 漂亮字库-程序员宅基地

文章浏览阅读1.9k次。Android系统是一个相对开放的系统,在我们平常开发的时候有时候会直接使用原生的控件更换下背景图片。如果想让我们的APP变得大漂亮,那么我们会对UI进行深度定制,变成我们所希望的那样。而一个APP的大漂亮除了UI的漂亮,很多时候字体也是影响大漂亮的因素之一。最近在开发中就有客户的需求是数字要显示为那种液晶仪表盘的那种方正一些的样子。OMG,可难为死我了。试了下Android自带的字体库,支持三种字体:Sans、serif、monospace,然后试了下。格劳资滴,看不出太明显的变化嘛,更别说要满足客户的_android 漂亮字库

操作系统期末复习知识点总结-程序员宅基地

文章浏览阅读4w次,点赞289次,收藏2.5k次。1. 操作系统的定义OS是一组控制和管理计算机硬件和软件资源,合理地对各类作业进行调度,方便用户使用计算机的程序集合。即为用户程序提供服务,是用户与硬件系统之间的接口。2. 操作系统的作用OS是计算机系统的核心,负责管理整个计算机系统的软硬件资源,制定各种资源的分配策略,调度系统中运行的用户程序,协调用户对资源的需求,从而使真个计算机系统高效有序的工作3. 操作系统的常见的分类①批处理操作系统:单道批处理(自动、顺序and单道性),多道批处理(宏观上并行,微观上串行,资源利用率高系统吞吐量大;用户响应时间长_操作系统期末复习

【异常解决】java: 无法访问org.springframework.boot.SpringApplication的解决方案_java: 无法访问org.springframework.boot.context.propert-程序员宅基地

文章浏览阅读2.1k次,点赞3次,收藏4次。对应的jdk11(如果maven里面设置了就不用改这个信息会自动生成对应的jdk编译版本)这里把所有的项目设置和对应的版本号全改成。报错原因:SpringBoot版本太高了。把这里的3.0.6改为2.7.4即可。_java: 无法访问org.springframework.boot.context.properties.configurationprope

Linux 内核优化简笔 - 高并发的系统-程序员宅基地

文章浏览阅读1.3k次,点赞31次,收藏17次。Linux 服务器在高并发场景下,默认的内核参数无法利用现有硬件,造成软件崩溃、卡顿、性能瓶颈。当然,修改参数只是让Linux更好软件的去利用已有的硬件资源,如果硬件资源不够也无法解决问题的。而且当硬件资源不足的时候,某些参数过大可能也会占用多余资源,或者影响稳定性。或者让单个进程占用过多资源,影响整体系统的运行。写本文的起因主要是对zabbix 服务器的高并发需求,还有数据库、Nginx、ES集群的高并发需求。more。

手把手教你如何使用Zotero自定义参考文献格式(csl)_zotero csl-程序员宅基地

文章浏览阅读7.1w次,点赞119次,收藏312次。一、使用Zotero如何查找合适的引用和参考文献格式?通过下面这个网站可以找到合适的格式https://editor.citationstyles.org/about/假如你有一份参考文献格式要求,可以通过search by example(红色箭头位置)查找格式的名称。例如:在左边区域选择文献的类型(箭头位置)。文献的类型分为以下几种:论文(thesis)、专著章节或文集(chapter)、杂志论文(article-journal)、报道(report)、著作(book)、网络(webpa_zotero csl

随便推点

vue基础指令_在vue中,可以通过____语法将数据输出到页面中。-程序员宅基地

文章浏览阅读1k次。指令概述:指令:英文单词,描述了一种简单的功能操作,如获取焦点;简单的DOM操作在Vue中统一的被封装成指令进行操作;什么是指令:包含了简单的DOM操作功能的组件!Vue中提供了自己的内建指令(掌握)、根据实际情况自定义指令(了解)Vue中的指令都是: 固定语法格式一、v-text指令指令名称:文本渲染指令指令描述:输出指令对应表达式的数据,即使数据中包含了标签,不会进行编译解释直接原样输出二、v-html指令名称:超文本/富文本渲染指令指令描述:输出指令对应表达式的数据,数据中一旦包含,会进行渲染解_在vue中,可以通过____语法将数据输出到页面中。

Navicat将Oracle数据导入到MySQL_navicate导出的oracel脚本可以导入到其它数据库内吗-程序员宅基地

文章浏览阅读1.1k次。本文介绍如何使用Navicat这款数据库工具,将Oracle上的数据导入到MySQL中。我是想将Oracle数据中的boot_init数据库数据传输到MySQL中。首先,你要有两个已经打开的Oracle和MySQL的数据库连接。然后点击 工具 》 数据传输 :然后进入数据传输界面,设置好源和目标。源连接——选择Oracle连接源模式——选择boot_init数据库..._navicate导出的oracel脚本可以导入到其它数据库内吗

有道云生成html,有道云笔记添加收藏功能实现原理-程序员宅基地

文章浏览阅读670次。有道云笔记收藏功能的本质就是在浏览器上执行一段js脚本,用js脚本来实现收藏功能,这和sec-wiki的快速分享到wiki功能类似。通过执行js这种方法而不是采用插件方式的好处是不用考虑浏览器的兼容性,具有通用性(虽然具体每个浏览器的js代码不一样,但可以写出具有通用性的js代码来兼容所有的浏览器)。使用js进行收藏的缺点是对某些网站失效,如github等https网站.下面是针对有道云笔记的收藏..._有道云网页收藏

Kali安装完成后的基本配置_kali tab预选-程序员宅基地

文章浏览阅读3.6k次,点赞2次,收藏9次。原文:https://blog.csdn.net/chaootis1/article/details/84137460Vmware tool安装,安装好的kali你会发现不能全屏,也不能从虚拟机到本机或者本机到虚拟机复制文件和文本,这样很不方便。。。我在初学的时候以为虚拟机就是这么难用。事实上,虚拟机为我们提供了一个工具可以解决这些问题。安装方法点击虚拟机上方的 虚拟机选项,倒数..._kali tab预选

【Android】APK的打包流程_apk源码怎么打包-程序员宅基地

文章浏览阅读1.7k次。APK打包流程apk其实就是一个压缩包,里面有lib,META-INF,classes.dex,res,resources.arsc等文件,我们对一个apk文件进行解压,可以发现里面其实有许多文件:每个文件对应的描述如下:res文件夹:包含了工程中res目录下除values以外的所有内容,一般包括各种layout文件,drawable。其中,layout文件内容是以二进制xml的方式进行保存的,而所有的drawable图像资源都是未经压缩过的原始文件。classes.dex文件:Android系_apk源码怎么打包

防火墙之Firewalld_firewalld清除所有规则-程序员宅基地

文章浏览阅读435次。1 firewalld 防火墙简介1.1​ firewalld 和 iptables 的关系1.2 firewalld 和 iptables 的区别1.3 firewalld 区域的概念1.3.1 firewalld 防火墙预定义了9个区域1.3.2 firewalld 网路区域1.3.3 firewalld 数据处理流程2 firewalld 防火墙的配置方法2.1 firewalld 服务管理2.2 区域管理2.3 服务管理2.4 端口管理补充 firewalld 设置 SNAT_firewalld清除所有规则

推荐文章

热门文章

相关标签