vue核心原理学习
前言
最近想深入了解一下vue.js(后面简称vue)的核心原理,无意中看到了一个用于学习vue原理的项目。在深入了解之后,发现它短小精悍,对于渐进式地了解vue的核心原理的实现大有帮助,于是乎就正式开始了对它探索之旅。
概念
概念代表着人类意识上的共识。所以,要想通过沟通交流来产生一些成果,对同一个概念达成共识是十分必要,要不然就是鸡跟鸭讲,不知所云。在对vue原理的了解过程中,需要了解哪些概念呢?下面,我们一起来梳理一下。
DocumentFragment
准确来讲,DocumentFragment是一个web API。因为它几乎成为了高效地操作大批量dom节点的代名词,而vue在模板解析的实现里面也用到了它,所以我们有必要了解它。
The following interfaces all inherit from Node’s methods and properties: Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
因为我们最常用的Element API 和DocumentFragment API都是继承自Node这个接口,所以,DocumentFragment对象与普通的Element对象拥有这相同的方法和属性。从这个角度来看,DocumentFragment对象跟普通的Element对象是“一样”的。
但是从全方位的角度来看,这两者是不一样的。从表象看来,DocumentFragment对象与Element对象有两个不同点:
- DocumentFragment对象没有
parent node
。即使你将它append到文档中的一个element中去,这个element并不能成为它的parent node
。 - 与Element对象不同的是,对DocumentFragment对象执行相关的DOM操作并不会马上反应到界面上,也即是说不会引起reflow和render(或者说layout和paint)。 下面我们一起来看看简单的示例代码:
const FG = document.createDocumentFragment();
const textNode = document.createTextNode('hello,documentFragment');
FG.appendChild(textNode) // 在这一步,界面并不会得到更新
document.body.appendChild(FG); // 直到把它append到真实的文档流,界面才会有反应 console.log(FG.parentNode) // 虽然FG插入到真实的文档中了,但是FG.parentNode仍然为null复制代码
上面说的是表面现象。那造成这种差异表象的本质原因是啥呢?答曰:“本质原因是DocumentFragment对象并不是真实文档流的一部分,它只常驻在内存当中的。”所以,我们可以这么理解:它只是dom节点的暂存器,当你把它(指的是DocumentFragment对象)append或者insert到真实文档流的时候,它把自己所有的一切都掏空,还给真实的文档流,然后自己功成告退。
基于这个DocumentFragment对象这个特质,很多类库用它进行大批量dom节点操作,vue也不例外。
模板
模板是将一个事物的结构规律予以固定化、标准化的成果,它体现的是结构形式的标准化。
在vue这个类库里面,模板有三种类型:
- DOM模板
- 字符串模板
- 单文件模板
无论是哪种类型“模版”,它本质上就是“HTML模板”-一堆由html标签和特殊占位字符组成的标记。这里的“html标签”代表着的就是一种固化的页面结构,而“特殊占位字符”组成就是一套“模板语法”。
“模板”都是要被解析(或者说编译)的,而解析的对象就是那些“特殊占位字符”。在vue里面,江湖人称之为“魔符”。最后,负责实现解析功能的那些代码我们称之为“模板引擎”。从jquery时代的mustache和handlerbar到现在的angular和vue,“模板”一直伴随我们左右。从使用者的角度来看,它们是不一样的。但是从实现者的角度来看,它们都是一样的,都是“模板语法” + “模板引擎”。
因为这个mvvm类库是用于学习vue的原理的,所以,我们得假设“模版语法”已经设计好了。我们需要思考的问题就是:“给定一套模板语法的前提下,我们该如何编程实现该模板的模板引擎呢?”。
注意:该学习库为代码的精简,实现上做了调整。
- 把属性绑定指令名中的“bind:”去掉了。也就是说原本的“v-bind:class”变为现在的 “v-class”。
- 只实现了几个最基本的属性绑定指令(“v-text”,“v-class”,“v-html”,“v-model”)和事件绑定指令(v-on:xxx)。
表达式
表达式(expression)是JavaScript中的一个短语,JavaScript解释器会将其计算(evaluate)出一个结果。
JavaScript犀牛书如是说。换而言之,一切能计算出值的语句都是表达式。
在vue模板里面,无论双重花括号里面的字符串还是属性绑定指令值,都是表达式。而表达式的核心要素就是[变量],这个变量就是对应于某个viewModel实例属性。如果A使用B,我们就说“A依赖B”的话,那么我们可以将上面的表述转化为这样结论:“在vue里面, [模板]依赖[表达式],[表达式]依赖[viewModel实例属性]”。其实,更深入地讲[表达式]依赖的是我们实例化vue对象时传入的data对象的属性。只不过,在后期,我们将data对象的属性代理到viewModel实例属性而已。
对表达式概念以及它在模板和viewModel实例之间的枢纽作用的理解是至关重要。因为这一点关系到你对mvvm模式中各个角色命名语义上的理解(比如,源码中“watcher”,“dependency”等等)。
数据代理
讲mvvm模式,自然是离不开数据代理了。那什么是数据代理呢?
数据代理其实就是变量读写的代理,换句话说就是把对原变量的[读和写]交由另外一个变量来完成。举个例子,有个对象,它层次很深:
const obj = {a:{b:{c : 'xxx'}}
}
复制代码
我们每次访问c属性都要通过obj.a.b.c
来完成的话,如果次数多了就会显得很麻烦。我们可以将对obj.a.b.c
的读写委托到到obj对象新的第一层属性上,也就是说我们写下这么一行代码时候:
obj.c = 'xxx'
复制代码
js引擎在解析的过程中会帮助我们将读写操作转接到obj.a.b.c
身上,实际执行的是一下语句:
obj.a.b.c = 'xxx'
复制代码
简单的实现如下:
Object.defineProperty(obj,"c",{get(){return obj.a.b.c},set(value){obj.a.b.c = value;}
})复制代码
要理解“数据代理”这个概念,具体到这里例子就是要理解obj.a.b.c
和obj.c
的关系。 废话不多说,我们来总结一下这两者的关系。那就是:obj.a.b.c
将自己的“读和写”业务委托给obj.c
来完成了,obj.c
是obj.a.b.c
的代理。
vue2.x之前的数据代理是基于ES5的Object.defineProperty这个API来实现的,我相信这是人尽皆知的啦,这里就不展开说了(听说,3.x是基于原生接口Proxy来实现)。不过,我想强调的一点是,数据代理并不是mvvm模式的必要特征,它只是一个便利之举而已。具体为什么这么说,在分析源码的过程中,我再来解释这其中的理由。
数据绑定
我们天天提“数据绑定”,那么“数据绑定”到底是什么意思?简而言之,在mvvm模式的话题背景下,“数据绑定”就是指将viewModel实例属性绑定到HTML模板中,一旦属性值发生改变,界面就会“自动”更新。时刻注意,“自动”并是真的自动,“自动”是需要我们去用代码去实现的。
我们除了提“数据绑定”外,也经常提“数据单向绑定”和“数据双向绑定”。其实一般来说,“数据单向绑定”就是指我们上面所提到的“数据绑定”(viewModel实例属性 -》 HTML模板
),而“数据双向绑定”就是在“数据单向绑定”的基础上增加另外一个方向(HTML模板 -》 viewModel实例属性
)的绑定而已。一般来说,“数据双向绑定”只是针对表单元素input,select,textarea等等而已。通过监听这些元素的input事件,在类库的内部手动地给viewModel实例属性赋值就可以实现这个“双向数据绑定”。
时刻记住,“数据双向绑定”是建立在“数据单向绑定”之上的。等会我们在讲解代码实现的时候,我们会先讲如何实现“数据单向绑定”,再讲如何实现“数据双向绑定”就是这个理。
数据劫持
从因果的角度来看,“数据绑定”是一种结果,而数据劫持是达成这种结果的手段。它们两者的关系可以表述为数据绑定是通过数据劫持来实现的。
那么到底什么是“数据劫持”呢?“数据劫持”就是剥夺原变量读写方面的话语权。剥夺之后,我想干嘛就干嘛。具体的话,“数据劫持”还是通过Object.defineProperty这个API来实现的。
const obj = {a:'xxx',b:'yyy'
}Object.defineProperty(obj,"a",{get(){// 劫持原属性的读的权利// 目前我什么都不干},set(){// 劫持原属性的写的权利// 目前我什么都不干}
})console.log(obj.a) // undefined
obj.a = "zzz"
console.log(obj.a) // undefined
复制代码
这个劫持是完完全全的。什么意思呢?就像上面这个例子那样,我劫持之后,我什么都不干,那就js引擎是不会为此搞个兼容降级的机制(比如说,js引擎一旦判断你getter返回undefined
,它会帮你缺省地返回个原来的值“xxx”)。不,它不会这么干的。它是100%地放权给你。这就充分地体现了“劫持”这个词的语义了。
也许你会问:“数据代理和数据劫持都是通过Object.defineProperty这个API来实现的,感觉原理一样啊,它们有什么不同吗?”
答曰:“这两个概念还是不一样的。因为“数据代理”是在对象上产生一个新的属性,而“数据劫持”则是对对象已存在的属性进行重新定义。”刚开始我看源码的时候,也有类似的困惑,后面反复查看这两者的代码实现,才发现两者的不同。如果你有同样的疑问,不怪你,多看几次源码就好了。
到这里,我们将涉及的概念梳理得差不多了,下面我们接着介绍各个功能模块的实现流程。
总体流程
我画的细致化的流程图:
在这里,我把vue这个类库的代码生命周期分为两个阶段: 初始化阶段和运行时阶段。
而初始化阶段又细分为三个小阶段:
- 数据代理阶段
- 数据绑定阶段
- 模板解析阶段。
所以,如上图所示,总共加起来就四个阶段。下面,我们来探讨一下各个阶段的实现流程和原理。
1. 数据代理阶段
这个阶段其实没什么好讲的,其核心原理是Object.defineProperty这个API-即通过这个API来将vm._data的读写权代理到vm的实例属性上。在这里,值得注意的两点是:
- 数据代理并不是mvvm模式的必要特征,它只是一个便利之举而已。
- 数据代理相对数据劫持是不同的。不同点表现为:
- 不像数据劫持需要递归遍历到数据对象的所有层次,数据代理只是针对vm._data的第一层属性代理即可。
- 不像数据劫持是对原有的属性进行重新定义,数据代理是vm实例上生成新的属性。
下面,我们来具体探讨一下以上的两点。
针对第一点,我们来试验一下,看看禁掉数据代理,程序是否还能正常运行。怎么做呢?
第一步:把mvvm.js构造函数MVVM中的与实现数据代理相关的代码注释掉。
第二步:去到Watcher类的get方法里面,把对this.getter方法的调用传参时的第二个参数从“this.vm”替换为"this.vm._data"。
第三步:去到Compile类的bind方法里面,把对this._getVMVal方法的调用传参时的第一个参数从“vm”替换为“vm._data”。
最后,保存更新,刷新页面。你会发现,数据绑定功能并没有受到影响,程序正常运行。这也佐证了我的第一个观点。
只不过,现在你如果想要在改变data的值的时候,你就不能直接对vm实例进行操作了。也就是说,你不能这么写了:this.xxx = 'yyy'
或者vm.xxx = 'yyy'
。而是,要这么写::this._data.xxx = 'yyy'
或者vm._data.xxx = 'yyy'
。这么做,我们会面临一个问题。假如,我们要访问的属性处在很深的层次呢?比如:a.b.c
, 那么你就得写this._data.a.b.c = 'yyy'
或者vm._data.a.b.c = 'yyy'
。一次还好,次数多了,就显得不够便利,而一个简单的数据代理就能帮助我们减少一个属性层次,从而让我们的数据访问更加直观。我想,这就是数据代理存在的意义吧。
至于第二点,我们细心地观察【数据代理】和【数据劫持】的实现代码就可以发现。
// 数据代理实现代码
// 这个data就是我们传递到Vue构造函数的的option对象的data字段Object.keys(data).forEach(function(key) {me._proxyData(key);});_proxyData: function(key, setter, getter) {var me = this;setter = setter || Object.defineProperty(me, key, {configurable: false,enumerable: true,get: function proxyGetter() {return me._data[key];},set: function proxySetter(newVal) {me._data[key] = newVal;}});}// 数据劫持实现代码
Observer.prototype = {walk: function(data) {var me = this;Object.keys(data).forEach(function(key) {me.convert(key, data[key]);});},convert: function(key, val) {this.defineReactive(this.data, key, val);},defineReactive: function(data, key, val) {var dep = new Dep();var childObj = observe(val);Object.defineProperty(data, key, {enumerable: true, // 可枚举configurable: false, // 不能再defineget: function() {if (Dep.target) {dep.depend();}return val;},set: function(newVal) {if (newVal === val) {return;}val = newVal;// 新的值是object的话,进行监听childObj = observe(newVal);// 通知订阅者dep.notify();}});}
};
复制代码
虽然数据代理和数据劫持都是通过Object.defineProperty这个API来实现的,但是两者针对的【对象】(也就是调用时,传递的第一个参数)明显是不一样的。
对于数据代理而言,我们的【对象】是vm实例,而定义的【属性】却是data对象的属性。我们从MVVM的构造函数来看,vm实例在此之前并没有定义这些属性,这些属性在调用Object.defineProperty()方法的时候是不存在的。所以,它们是vm实例的全新属性;而对于数据劫持而言,我们的【对象】是data对象,定义的【属性】还是data对象的属性,所以这是重新定义了。正是这个重新定义,才很好地呼应了“劫持”这个词的语义,不是吗?
至于数据代理和数据劫持所操作的对象属性层次数上差异,主要是体现在数据代理只是进行过一次Object.keys().forEach()
调用来遍历data对象的第一层属性。而数据劫持则通过在defineReactive方法里面的var childObj = observe(val);
调用,间接递归调用了多次Object.keys().forEach()
来实现对data对象所有层次属性的劫持。
到这里,我们通过对比数据劫持特性的实现来将数据代理的实现细节梳理了一遍。可以这么说,数据代理只是mvvm模式的前菜,数据绑定才是它的核心部分,下面一起来瞧瞧它的实现过程。
2. 数据绑定阶段
正如在概念介绍部分所讲的,“数据绑定”是我们要实现的一个结果,它并不是重点。重点是,实现这个结果的手段-数据劫持。所以在这小节,与其说是讲“数据绑定 ”,不如说是讲“数据劫持”。
“数据劫持”的实现代码都放在了observer.js文件里面了。整个文件代码行数不多,但是因为这个类库的作者从vue源码中摘抄得恰到好处,所以显得短小精悍,十分利于阅读。
无论在概念介绍部分,还是上个阶段,我们都对数据劫持的过程简单地介绍了一遍。将这个过程简单地用一句来说,那就是:遍历我们传入data对象的每一层属性,对每一个属性设置相应的访问器(getter和setter)。尽管里面涉及到了稍微复杂一点的【间接递归调用】,但是这个过程还算简单直观,没啥好讲的。我们要讲就要讲在数据劫持过程中所设下的访问器,因为这里面隐藏着一条很重要的的关系链:
dep实例 -》 属性 -》 表达式 -》 watcher实例
纵观初始化阶段,这条关系链的建立分为四个阶段:
- 建立
属性 《-》 表达式
的多对多关系(模板书写阶段) - 建立
属性 《-》 dep实例
的一对一关系(数据绑定阶段) - 建立
表达式 《-》 watcher实例
的一对一关系(模板解析阶段) - 建立
dep实例 《-》 watcher实例
的多对多关系(模板解析阶段)
属性与表达式多对多的关系是在我们的模板书写阶段确立的。多对多关系,什么意思呢?意思就是:一个表达式有可能“依赖”或者“使用”多个属性,而同一个属性可以被多个表达式所使用。看具体的例子:
<div><div>第一个表达式:{{a.b.c}}</div><div>第二个表达式:{{a.b.c}}</div><div>第三个表达式:{{a.b.c}}</div>
</div>
复制代码
我们先只看第一个表达式。因为这个表达式使用了三个属性,分别是“a”,"a.b"和“a.b.c”,所以我们说一个表达式有可能对应多个属性。然后,我们再看模板的全部。同一个属性“a.b.c”被三个表达式所使用,所以我们说一个属性有可能对应多个表达式。
综上所述,属性与表达式是“多对多”的关系。
在数据绑定阶段,之所以要分析属性与表达式的关系,是因为这个关系是整条关系链的根源,是[属性与dep实例的关系]的铺垫。好,现在我们已经讲完了。那么我们可以把重点聚焦到这个阶段所发生的属性与dep实例的关系建立。这个关系的建立是在劫持属性-定义访问器的时候发生的。那么,下面一起来看看相关代码:
Observer.prototype = {walk: function(data) {var me = this;Object.keys(data).forEach(function(key) {me.convert(key, data[key]);});},convert: function(key, val) {// 记住,this.data只是vm._data的一个引用// 引用链是这样的: this.data -> vm.$option.data -> vm._data this.defineReactive(this.data, key, val);},defineReactive: function(data, key, val) {var dep = new Dep();var childObj = observe(val);Object.defineProperty(data, key, {enumerable: true, // 可枚举configurable: false, // 不能再define// 这里通过闭包,将key所对应的dep实例以及对之间的对应关系保存在内存当中了get: function() {if (Dep.target) {dep.depend();}return val;},set: function(newVal) {if (newVal === val) {return;}val = newVal;// 新的值是object的话,进行监听childObj = observe(newVal);// 通知所有订阅者。这里的订阅者就是watcher实例dep.notify();}});}
}复制代码
我们时刻要记住,我们实例化vue传进去的data对象是按引用传递的,Object.defineProperty中的形参中的data对象就是我们传进去data对象。在defineReactive方法
中,通过var childObj = observe(val);
这条语句对defineReactive方法
进行了间接递归调用,从而实现了对data对象所有层次中的遍历。而遍历过程中,它做的第一件事就是new一个Dep实例
。但是到这里,属性和Dep实例
一对一的关系还无法建立起来,因为如你所见,new一个Dep实例
的时候,我们并没有传递任何跟该属性相关的数据给Dep实例
。那它们之间的关系是怎么建立的呢?答曰:“闭包”。
在defineReactive方法
中有两层词法作用域。第一层是defineReactive方法
本身,第二层是该属性的getter和setter函数。因为这两层嵌套作用域都访问了dep
这个变量,所以,我们的代码就形成了一个可见的闭包。当defineReactive方法
在运行时被真正调用的时候,我们的代码就产生了一个闭包。就是这个闭包,将当前属性与当前dep实例的一一对应关系保存在内存当中,等待这我们后面的使用。
可以这么说,数据劫持阶段,完成了属性与dep实例之间一一对应关系的建立。不但如此,还为后面watcher实例与dep实例的关系建立埋下了伏笔。这个伏笔在哪里呢?对的,就在getter里面:
// ....此前省略了很多代码get: function() {// 对的,就是这三行简简单单的代码if (Dep.target) {dep.depend();}return val;},
// ....此后省略了很多代码
复制代码
当程序在下个阶段(模板解析阶段)进入我们刚刚提及的闭包,执行到dep.depend()
这条语句时,watcher实例与dep实例关系的建立正式拉开帷幕。那行,我们一起进入下个阶段的流程分析吧。
3. 模板解析阶段
if (this.$el) {this.$fragment = this.node2Fragment(this.$el);this.init();this.$el.appendChild(this.$fragment);
}
复制代码
从该学习库的实现代码来看,模板解析又可以分为三个步骤:
- 从真实容器节点中,把所有的节点挪至DocumentFragment容器中。
- 在DocumentFragment容器中,完成所有的模板解析和DOM操作工作。
- 把DocumentFragment容器中的节点挪回到真实容器节点中去。
要想理解步骤1的实现代码,主要要理解好DocumentFragment对象和appendChild()这个API。对于DocumentFragment对象的理解,我们已经在“概念梳理”部分讲解过,这里就不再赘述了。而对于appendChild()这个API,最为关键的第一点是,要理解“每一个element node只能有一个父节点”这句话。如果你不理解这句话,那么你就对步骤1的核心实现代码有困惑:
node2Fragment: function(el) {var fragment = document.createDocumentFragment(),child;// 将原生节点拷贝到fragmentwhile (child = el.firstChild) {fragment.appendChild(child);}return fragment;
},
复制代码
当你看到fragment.appendChild(child)
这条语句的时候,你可能会想,append一个现存的节点到fragment
对象之后,不用删除它吗?答曰:“不用”。这正是appendChild()这个API负责干的事。这个API还是要遵循“每一个element node只能有一个父节点”的原则。所以,一番循环下来,真实节点容器里面的节点都被转移到了fragment
对象里面了。
步骤1讲完了,步骤2才是重中之重。下面我们来看看步骤2。
在这个步骤里面,我们主要承接着上个阶段还没讲到的两个关系来讲解:
- 建立
表达式 《-》 watcher实例
的一对一关系(模板解析阶段) - 建立
dep实例 《-》 watcher实例
的多对多关系(模板解析阶段)
正如我在上文中给出的细致化的流程图所描述那样,整个模板解析流程的最底部做了两件事情:
- 完成了界面的初始化显示
- 开始着手实例化watcher
换成专业的话说,就是compileElement()函数的调用栈的最顶部函数bind()做了两件事:
......
bind: function(node, vm, exp, dir) {var updaterFn = updater[dir + 'Updater'];// 1. 完成了界面的初始化显示updaterFn && updaterFn(node, this._getVMVal(vm, exp));// 2. 开始着手实例化watchernew Watcher(vm, exp, function(value, oldValue) {updaterFn && updaterFn(node, value, oldValue);});
},
......
复制代码
从上面实现代码中,我们很直观地看到了这两件事所对应的代码:
updaterFn && updaterFn(node, this._getVMVal(vm, exp));
new Watcher(vm, exp, function(value, oldValue) { updaterFn && updaterFn(node, value, oldValue); });
第一件事的实现代码没啥好讲的,因为代码执行到了这里,DOM操作的三要素都确定了:节点(node),操作(updaterFn)和值(this._getVMVal(vm, exp)),所以接下来就是在特定的节点上对某个属性赋予某个值。
第二件事的实现代码才是模板解析阶段的精华之所在。
// 实例化Watcher类
new Watcher(vm, exp, function(value, oldValue) {updaterFn && updaterFn(node, value, oldValue);
});// Watcher类的构造函数
function Watcher(vm, expOrFn, cb) {this.cb = cb;this.vm = vm;this.expOrFn = expOrFn;this.depIds = {};if (typeof expOrFn === 'function') {this.getter = expOrFn;} else {this.getter = this.parseGetter(expOrFn.trim());}this.value = this.get();
}复制代码
无论是形参exp还是expOrFn,都是指代的是模板上的某个表达式。从new Watcher(vm, exp,...)
到this.expOrFn = expOrFn;
,我们可以很直观地看到了watcher实例与表达式已经建立一一对应关系了。
好,到目前为止,我们还剩下dep实例与watcher实例之间的关系没有分析到。要想搞清楚这两者之间的关系是如何建立的,我们得继续往watcher实例化所涉及的函数调用栈追查下去。
在追查之前,我们脑海里面得有个概念,那就是dep实例已经存在内存中了,它正在等待在watcher实例化过程中去点燃那根建立两者关系的导火索。
还记得我们在上一阶段所说的那个闭包吗?
当
defineReactive方法
在运行时被真正调用的时候,我们的代码就产生了一个闭包。就是这个闭包,将当前属性与当前dep实例的一一对应关系保存在内存当中,等待这我们后面的使用。
显然,这个闭包的内层词法作用域就是getter函数。而我们所说的导火索就是getter函数里面的dep.depend();
语句。既然导火索是在属性的getter函数中(也可以称之为属性访问器),顾名思义,那么一旦去读取该属性值的时候,我们就会“点燃”这个根导火索。那在watcher实例化过程中,哪里需要读取属性的值呢?
我们顺着watcher实例化所涉及的代码往下找,看到这么一条语句:
this.value = this.get();
复制代码
没错,就是这里,就是这条语句(目的是计算当前watcher实例所对应表达式的值)点燃了watcher实例与dep实例关系建立的导火索。严谨地来说,在dep实例真正与watcher实例建立关系之前,其实要“敲开两道门”的。哪两道门呢?
第一道门是Dep.target
,它就在属性的getter访问器里面:
if (Dep.target) {dep.depend();
}
复制代码
第二道门是this.depIds.hasOwnProperty(dep.id)
, 它就在watcher实例的addDep方法里面:
if (!this.depIds.hasOwnProperty(dep.id)) {dep.addSub(this);this.depIds[dep.id] = dep;
}
复制代码
可以看出,只有Dep类的静态属性target的值不是falsy值的时候,第一道门才会打开;只有当前dep实例没有跟当前watcher实例建立过关系的前提下,第二道门才会打开。
好,首先我们来看看第一道门开关的状态。第一道门一开始是关闭的。对应的代码是observer.js文件里面的最后一行代码:
Dep.target = null;
复制代码
那什么时候打开了呢?我们不妨回到this.value = this.get();
这行代码里面,继续往this.get()函数调用栈的顶部追溯。果不其然,在watcher实例的get()方法的实现代码里面,我们看到这么一条语句:
Dep.target = this;
复制代码
你没看错,第一道门已经打开了。紧接着的一条语句是this.getter.call(this.vm, this.vm);
,对它的执行,程序会进入到属性的getter访问器里面,开始关系建立之旅。
我们可以把接下来的事情想象为一个电影片段。这个电影片段里面的第一个镜头就是一个人站在了一道门面前。这个人就叫做“(内存中的)dep实例”。只见dep实例轻轻地敲了敲watcher实例的“闺房门”,说:“亲爱的watcher实例儿,你终于开门啦,那我们建立关系吧”。watcher实例犹抱琵琶半遮面地说:“客官莫急,你还有第二道门要打开呢?”。
于是乎,dep实例来到了第二道门的门口。他一看,原来门是打开的(没有建立过关系之前,watcher实例的depIds属性当然没有当前dep实例的引用)。心里就寻思着想:“这娘们挺能装的,还骗我。门根本就没有关着”。于是,dep实例就单枪直入。镜头来到这里就完了.......
好了,现在dep实例已经通过了两道门,顺利进入watcher实例的闺房了。它们俩准备建立关系了。而负责建立双边关系的核心语句只有两行行代码,也就是:
dep.addSub(this);
this.depIds[dep.id] = dep;
复制代码
最后,我们以回答“dep实例和watcher实例建立关系是啥意思呢?”这个问题来结束这个阶段的分析吧。
第一行代码的作用就是实现dep实例主动向watcher实例建立关系。用代码的语言来说就是,把当前watcher实例存放到dep实例的属性subs(subscriber)数组中,等待被通知(调用watcher实例的update()方法);
第二行代码的作用是实现watcher实例主动向dep实例建立关系。用代码的语言来说就是,在watcher实例属性depIds对象里面建立对应的key-value来保存当前dep实例的引用。这个作用相当于对dep实例的访问存根。当下一次再来建立关系的时候,发现这个dep实例已经有存根了,则可以将它拒之门外。
以上,我们算是梳理完了dep实例与watcher实例之间多对多关系建立的整个流程了。至于为什么是多对多呢?我们上面概念梳理阶段已经说过了,现在我们再来重复一遍。我们也要牢牢记住,因为表达式是可以由n个属性组成的。所以,读取某个表达式的值很有可能导致n次的属性值的读取 。n个属性则对应n个dep实例,而n次属性值的读取则意味着在一次的watcher实例化过程中发生n次的关系建立。而另外一个角度来看,一个模板可以有m个表达式,m个表达式则意味着m次的watcher实例化。m *n,最终, dep实例与watcher实例形成了多对多的关系。
好,到这里,这个阶段的流程分析已经完毕了。如果从是否干了实事的角度总结这个阶段,那么这个阶段只做了一件实事。那就是完成界面的初始化显示。其余的都是为运行期阶段做所的准备工作。行,我们一起来看看,这个阶段做的准备工作是如何接到到下个阶段的。
4. 运行期阶段
所谓的运行期说白了就是对属性进行赋值而触发相关代码执行这么的一个阶段。在vue里面,无论是在事件处理器还是在我们自定义的method,对于vue而言,其核心操作依然“对属性进行赋值”。这就这么一个简简单单地赋值,让我们对接上个阶段所做的一切准备工作。
其实在进入数据劫持属性的setter之前,是先经过数据代理所注册的getter,再经过数据劫持属性的getter,最后才进入数据劫持属性的setter的。但是,因为此时的Dep.target为null,所以,这种属性值读取是无法通过dep实例与watcher实例关系建立的第一道大门。因此,这种冲击到这里戛然而止了。我们只需要关注这段旅程(对属性进行赋值)的终点站就好-也就是数据劫持属性的setter访问器。下面来看具体的代码:
set: function(newVal) {if (newVal === val) {return;}val = newVal;// 新的值是object的话,进行监听childObj = observe(newVal);// 通知订阅者dep.notify();
}
复制代码
其实,setter就做了三件事。
- 如果设置的新值跟老值相等,则什么都不做。
- 否则,对新值所包含的属性进行劫持。
- 最后,通知订阅了该dep实例的所有watcher实例。负责更新界面的updater在上一个阶段已经通过回调的方式关联到每个watcher实例身上了,所以到这里,watcher实例就能轻而易举地调用updater,实现界面的整体更新。
对vm实例赋值之所以能进入到数据劫持属性的setter,dep实例之所以能通知到watcher实例,watcher实例之所以能调用到updater,种种的一切,都是因为我们在上三个阶段做足了准备,所以才让这些事情的发生成为可能。
到此,四个阶段都分析完了。最大的重点就是dep实例与watcher实例的多对多关系的建立。其实“dep实例与watcher实例的多对多关系的建立”还有个另外一个叫法“依赖收集”。现在回过头来,我们可以这么理解“依赖收集”这个概念:如果说:“谁使用了谁,谁就依赖谁”的话。那么现在表达式使用了属性,我们就说:“表达式依赖了属性”。接下来,我们可以把dep实例看做是属性的经纪人,把watcher看做是表达式的管家。管家负责收集表达式的所有依赖的属性,当它逐一去找到对应属性的时候,这些属性跟watcher管家说:“有什么事,你跟我的经纪人dep实例说吧”。到最后,“依赖收集”变成了dep实例和watcher实例之间的事了。简而言之,“依赖收集”可以理解为“watcher实例代替表达式去收集后者所依赖属性的dep实例”。
小结
如果从data对象属性这个视角出发,我们能看到的属性,表达式,dep实例和watcher实例这四者之间的关系建立泳道图大概如下:
技术点
这个学习库涉及到了不少技术点的应用,下面做个简单的记录。
闭包
比较明显和重要的闭包有以下三个:
1.在被嵌套的词法作用域getter或者setter访问了嵌套词法作用域defineReactive的dep变量:
//在observer.js文件里面
defineReactive: function(data, key, val) {var dep = new Dep();var childObj = observe(val);Object.defineProperty(data, key, {enumerable: true, // 可枚举configurable: false, // 不能再defineget: function() {if (Dep.target) {dep.depend();}return val;},set: function(newVal) {if (newVal === val) {return;}val = newVal;// 新的值是object的话,进行监听childObj = observe(newVal);// 通知订阅者dep.notify();}});
}复制代码
- 在被嵌套的词法作用域回调函数里面访问了嵌套词法作用域bind函数的updaterFn和node变量:
//在compile.js文件里面
bind: function(node, vm, exp, dir) {var updaterFn = updater[dir + 'Updater'];updaterFn && updaterFn(node, this._getVMVal(vm, exp));new Watcher(vm, exp, function(value, oldValue) {updaterFn && updaterFn(node, value, oldValue);});
},
复制代码
- 在被嵌套的词法作用域返回函数里面访问了嵌套词法作用域parseGetter函数的exps变量:
//在watcher.js文件里面
parseGetter: function(exp) {if (/[^\w.$]/.test(exp)) return;var exps = exp.split('.');return function(obj) {for (var i = 0, len = exps.length; i < len; i++) {if (!obj) return;obj = obj[exps[i]];}return obj;}
}
复制代码
递归
直接递归或者间接递归有两个:
- 通过observe(val)间接递归调用defineReactive()
//在observer.js文件里面
defineReactive: function(data, key, val) {var dep = new Dep();var childObj = observe(val);Object.defineProperty(data, key, {enumerable: true, // 可枚举configurable: false, // 不能再defineget: function() {if (Dep.target) {dep.depend();}return val;},set: function(newVal) {if (newVal === val) {return;}val = newVal;// 新的值是object的话,进行监听childObj = observe(newVal);// 通知订阅者dep.notify();}});
}
复制代码
- 在模板解析的过程中,对子节点遍历过程中,直接递归调用compileElement()
//在compile.js文件里面compileElement: function(el) {var childNodes = el.childNodes,me = this;[].slice.call(childNodes).forEach(function(node) {var text = node.textContent;var reg = /\{\{(.*)\}\}/;if (me.isElementNode(node)) {me.compile(node);} else if (me.isTextNode(node) && reg.test(text)) {me.compileText(node, RegExp.$1.trim());}if (node.childNodes && node.childNodes.length) {me.compileElement(node);}});},
复制代码
引用传递
针对我们传入的option对象的data字段,有一条较长的引用传递链:
我们实例化传入的option对象 => mvvm实例的this.$options => mvvm实例的this.$options.data => mvvm实例的this._data => observe(data, this) => observer实例的this.data
复制代码
所以,到了最后,数据劫持的对象就是我们实例化mvvm传递进去的data对象。
element节点只能有一个父节点
在compile.js文件中将真实容器节点的所有子节点“拷贝”到DocumentFragment对象中去时,使用了appendChild()这个API。从而佐证了这条在DOM世界里面的规则。
node2Fragment: function(el) {
var fragment = document.createDocumentFragment(),child;// 将原生节点拷贝到fragment
while (child = el.firstChild) {fragment.appendChild(child);
}return fragment;
},
复制代码
类数组调用数组方法
在进行DOM操作的时候,我们避免不了要跟类数组(有些人称之为伪数组)打交道。
compileElement: function(el) {var childNodes = el.childNodes,me = this;[].slice.call(childNodes).forEach(function(node) {// ......});},
复制代码
compile: function(node) {var nodeAttrs = node.attributes,me = this;[].slice.call(nodeAttrs).forEach(function(attr) {// ......});},
复制代码
无论是[].slice.call()还是Array.prototype.slice.call()这种写法,都是达到借用真数组方法的目的。不过,个人觉得,理论上说,后者会更好。因为,后者省去了不必要的属性查找的次数,性能表现会更优。
总结
如果真的如这个学习库的作者所说的那样(大部分的代码是摘抄与vue的源码),那么我相信,我已经了解到了vue的核心原理了。至于后面那些叠加上来的,不太核心的特性,比如说:virtual DOM,componnet机制,各种扩展机制啊等等,我要深入到vue真正的源码去研究了。
整篇文章下来,几乎10000字,是为自己学习vue原理的阶段性总结之用。如有错误,望不吝指出,万般感激。
最后,谢谢阅读。
转载于:https://juejin.im/post/5cedf4f86fb9a07ef71055bb
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 自定义基于ionic弹出model层多选框
基于ionic弹出model层多选框形式 模块 select-menu.component.html页: *重要部分要点: 1.遍历双重数组值 2.动态显示子数据 *ngIf"!showChildlist" childMenu(i) 3. <ion-content class"select_content"><ion-list class&…...
2024/4/21 21:08:57 - 23种设计模式全解析
longyulu的专栏 目录视图摘要视图订阅 【公告】博客系统优化升级 【收藏】Html5 精品资源汇集 博乐招募开始啦 id"cpro_u2392861_iframe" src"http://pos.baidu.com/xcum?sz300x250&rdid2392861&dc2&diu2392861&dri0&dis0&…...
2024/4/20 14:37:00 - 前端优化
从建立http连接开始,到页面展示到浏览器里,经历了加载、执行、渲染,重构的几个阶段。将分享下我自己的心得和其他人的优秀经验。 加载和执行 浏览器是友善的客户端,对同域名并发请求是有数量限制,过去浏览器一般是2个…...
2024/4/20 14:36:58 - 前端优化常用技术心得
从建立http连接开始,到页面展示到浏览器里,经历了加载、执行、渲染,重构的几个阶段。将分享下我自己的心得和其他人的优秀经验。 加载和执行 浏览器是友善的客户端,对同域名并发请求是有数量限制,过去浏览器一般是2个&…...
2024/4/20 14:36:57 - 前端教程:用 Canvas 编织璀璨星空图
是不是还蛮酷的呢?利用周末时间我们来学习并实现一下,本文我们就来一点一点分析怎么实现它! 分析 首先我们看看这个效果具体有哪些要点。首先,这么炫酷的效果肯定是要用到 Canvas 了,每个星星可以看作为一个粒子&…...
2024/4/20 8:43:33 - 269个JavaScript工具函数,助你提升工作效率(下)
130.blob转file /*** param { blob } blob* param { string } fileName*/export const blobToFile (blob, fileName) > {blob.lastModifiedDate new Date();blob.name fileName;return blob;};131.file转base64 /*** param { * } file 图片文件*/export const fileToBa…...
2024/4/20 14:36:55 - 小眼睛做欧式双眼皮的做法有几种
...
2024/4/23 12:16:30 - 抠双眼皮会怎样
...
2024/4/20 14:36:53 - 才做过双眼皮十天能绣眉吗
...
2024/4/21 16:08:40 - ionic瀑布流
首先使用这个插件: https://github.com/zedwang/angular-waterfall 更改部分代码,获得兼容性 if (scope.$last true) {angular.element(element).ready(function() {var img element.find("img")[0];var oImage new Image();if (oImage.…...
2024/4/21 16:08:39 - Ionic-wechat项目边开发边学(四):可伸缩输入框,下拉刷新, 置顶删除
摘要 上一篇文章主要介绍了ion-list的使用, ion-popup的使用, 通过sass自定义样式, localStorage的使用, 自定义指令和服务. 这篇文章实现的功能有消息的置顶与删除, 了聊天详情页面, 可伸缩输入框, 下拉刷新聊天记录, 要介绍的知识点有: filter orderBy的使用引入angular-elas…...
2024/4/25 15:25:18 - 前端开发常用插件总结
一、PC端1、JQuery ( 1.7.0 ~ 3.1.o 版本 )官网:https://jquery.com/JQuery是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0, FF 1.5, Safari 2.0, Opera 9.0),jQuery2.0及后续版本将不再支…...
2024/4/24 5:36:40 - 割三点一线双眼皮过程图
...
2024/4/27 22:57:56 - java下载m3u8视频,解密并合并ts(二)
上一篇 java下载m3u8视频,解密并合并ts(一)——m3u8概述下一篇java下载m3u8视频,解密并合并ts(三)——代码实现m3u8链接的获取样例一:两个m3u8无key首先在浏览器播放视频的时候打开开发者工具(大部分快捷键是F12),找到Network标签,刷新页面,然后找到含有m3u8的链接…...
2024/4/21 16:08:34 - 扇形改欧式有做双眼皮好的人吗
...
2024/4/26 12:11:32 - 割完双眼皮眼睛变小是为什么
...
2024/4/21 16:08:33 - 明星眼睛割了双眼皮化妆后就不宽了
...
2024/4/20 14:37:15 - 有什么按摩手法可以形成开眼角图片欧式割双眼皮第六天还肿
...
2024/4/29 17:36:13 - 绣完眉毛后双眼皮多久才自然
...
2024/4/20 14:37:10 - 封装一个简易的类似于jquery的小型框架
先宣传一波自己的博客系统,地址: http://www.97blognb.cn/#/ 技术实现vue element 自己的一个UI库 node express mysql pm2 nginx 系统分为三个端:前端, 管理端, 服务端 有想法一起交流的可以加我联系方式&…...
2024/4/20 14:37:10
最新文章
- 【Eureka探秘】揭开微服务架构的寻径奇缘:从注册到发现的华丽旅程
关注微信公众号 “程序员小胖” 每日技术干货,第一时间送达! 引言 在浩瀚的微服务星系中,有一颗璀璨夺目的星辰——Eureka,它不仅是分布式服务世界里的灯塔,更是架构师们手中的罗盘,引领着万千服务在无垠…...
2024/5/5 4:30:48 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - OpenHarmony开发-连接开发板调试应用
在 OpenHarmony 开发过程中,连接开发板进行应用调试是一个关键步骤,只有在真实的硬件环境下,我们才能测试出应用更多的潜在问题,以便后续我们进行优化。本文详细介绍了连接开发板调试 OpenHarmony 应用的操作步骤。 首先…...
2024/5/3 10:28:22 - 【蓝桥杯】省模拟赛
题目 1.奇数次数2.最小步数3.最大极小值和最小极大值 1.奇数次数 问题描述 给定一个仅包含数字字符的字符串,统计一下这个字符串中出现了多少个值为奇数的数位。 输入格式 输入一行包含一个字符串,仅由数字字符组成。 输出格式 输出一行包含一个整数&am…...
2024/5/1 19:23:28 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/4 23:54:56 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/4 23:54:56 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/5/4 23:54:56 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/4 23:55:17 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/5/4 23:54:56 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/5/4 23:55:05 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/5/4 23:54:56 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/5/4 23:55:16 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/5/4 23:54:56 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/4 18:20:48 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/5/4 23:54:56 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/5/4 23:55:17 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/5/4 23:55:06 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/5/4 23:54:56 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/4 23:55:06 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/5/4 2:59:34 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/5/4 23:55:16 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/5/4 23:54:58 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/4 23:55:01 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/5/4 23:54:56 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57