本文目录导航：
js学到啥水平才可以学vue
js学到会写页面，写过jQuery，就可以转vue。
Vue的外围库只关注图层，照应式数据绑定和组件化开发是其两大特点。
照应式数据绑定指的是会智能对页面中的某些数据的变动做出照应.(v-model指令可以成功数据的双向绑定)。
组件化开发指的是经过组件,把一个单页运行中的各种模块拆分到一个个独自的组件(component)中,咱们只需先在父级组件中写好各种组件标签,并且在组件标签中写好要传入组件的参数,而后在写好各种组件的成功,整个运行就可以成功了。
Vue 是一个采纳 MVVM 架构,一套用于构建用户界面的渐进式框架。
Vue 被设计为可以自底向上逐层运行。
渐进式 的意思就是从少到多, 从弱到强, Vue 框架并不强迫开发者一下子就经常使用它的所有.
Vue 从设计角度来讲，可以分红上图的这几大局部，然而开发者并不要求把一切的物品都学会, 或许都用上. 申明式渲染 和 组件系统 是 Vue 外围库所蕴含内容，而 客户端路由、形态治理、构建工具 都有其余各自专门的处置打算。
Vuejs设计与成功——ref原始值的照应式打算
前言
原始值指的是Boolean、Number、BigInt、String、Symbol、undefined、null等类型的值，在Javascript中，原始值是按值传递的，援用类型是按援用传递的，这象征着，假设一个函数接纳了一个原始值作为参数，那么形参和实参之间是没有援用相关的，它们是齐全独立的两个值。
在Javascript中proxy无法对原始值提供代理，因此想要将原始值变成照应式数据，就必定要对原始值做一层包裹，这也就是ref要做的事。
依据下面提到的，假设要对原始值成功照应式数据，就必定要经常使用一个非原始值对象去包裹原始值，如：
//原始值letname=hellovue3//包裹对象constnameWrapper={value:hellovue3}//照应式数据constname=reactive(nameWrapper)//触发照应式数据修正=hellovue3reactive创立包裹对象的上班看起来没有疑问，但其实是有疑问的：
用户为了创立一个照应式的原始值，不得不创立一个包裹对象
包裹对象的内容由用户自己定义，象征着不规范，即可以被轻易命名，如和都可以
引入ref处置疑问封装ref函数为了处置上述的疑问，可以将创立包裹对象的上班都封装到ref函数中，如：
//封装ref函数functionref(val){//创立包裹对象constwrapper={value:val}//创立照应式数据returnreactive(wrapper)}//经常使用refconstname=ref(hellovue3)
effect(()=>{//在反作用函数中经过value属性读取原始值()})
//修正的值，触发effect反作用函数从新口头=helloworld
##提升ref函数下面的代码曾经可以成功最后的需求了，然而还是存在对应的毛病，例如如何辨别如下的两个照应式数据，是原始值的包裹对象，还是非原始值的照应式数据呢？```jsconstname1=ref(helloworld)constname2=ref(hellovue3)因此，要求对ref函数启动提升，如下：
functionref(val){//创立包裹对象constwrapper={value:val}//经常使用在wrapper对象上定义一个无法枚举、无法写的属性__v_(wrapper,__v_isRef,{value:true})//创立照应式数据returnreactive(wrapper)}经过方法为包裹对象wrapper设置一个无法枚举、无法写的属性__v_isRef且值为true，用于去代表该对象是一个ref，而非原始值的照应式数据对象。
ref用于处置照应式失落疑问什么是照应式失落？在编写组件时，理论都要求把数据泄露到模板当中经常使用，如：
exportdefault{setup(){conststate=reactive({foo:1,bar:2})return{}}}可以看到这里经常使用了倒退运算符（...）的模式将照应式数据泄露到外部，而后这么做会失落照应式，以下两段代码是等价的：
return{}等价于return{foo:1,bar:2}假设这么看，很容易发现照应式失落的要素是向外泄露了一个个别对象，它不具备任何照应式的才干.
成功toRef函数处置照应式失落实践上就是经过前往一个相似ref结构的wrapper对象，但经过为wrapper对象成功getter函数，并在其中前往详细的照应式数据，即保障与原照应式数据之间的咨询，成功如下：
functiontoRef(obj,key){constwrapper={getvalue(){returnobj[key]},//准许设置setvalue(val){obj[key]=val}};//__v_isRef定义，标明是一个ref类型(wrapper,__v_isRef,{value:true});returnwrapper;}//经常使用conststate=reactive({foo:1,bar:2})constnewState={foo:toRef(state,foo),bar:toRef(state,bar)}封装toRefs函数第一版本的toRef函数存在的无余，就是只能对的单个key启动处置，假设传入的照应式数据键十分多，那成果就不高了，于是经过封装?toRefs函数成功批量转换：
functiontoRefs(obj){constret={};for(constkeyinobj){//组个调用toRef成功批量转换ret[key]=toRef(obj,key)}returnret}为什么要求智能脱reftoRefs带来的疑问toRefs函数处置了照应式失落的疑问，但也带来了新的疑问，那就是它会把照应式数据的第一层属性值转换为ref，象征着必定要经过value属性去访问值，这其实参与了用户的心智累赘，因此，要求提供智能脱ref的才干。
智能脱ref所谓智能脱ref指的是属性的访问行为，即假设读取的属性是一个ref，则间接将该ref对应的value属性值前往。
可以基于前面定义的__v_isRef标识，经过经常使用Proxy为toRefs前往的对象创立代理对象，即经过代理来成功指标，上述内容封装成proxyRefs函数，如下：
functionproxyRefs(target){returnnewProxy(target,{get(target,key,receiver){constvalue=(target,key,receiver)//智能脱ref，假设是ref对象，则前往其value属性值returnvalue.__v_isRef?:value},set(target,key,newValue,receiver){//经过target[key]访问实在值constvalue=target[key]if(value.__v_isRef){=newValuereturntrue}(target,key,newValue,receiver)}});}实践上，在编写Vuej.s组件时，组件中的setup函数所前往的数据会传递给proxyRefs函数启动处置，这也就是为什么在模板中间接访问ref时，不要求经过value属性访问和设置。
在中，对于智能脱ref不只存在上述场景外，reactive函数也有智能脱ref的才干，例如：
constcount=ref(0)constobj=reactive(count)//间接访问//0总结ref的作用场景总结如下：
处置原始值类型的照应式
处置照应式数据失落为了处置上述疑问，引入了ref的概念，并且封装了toRef、toRefs、proxyRefs等函数，其中toRef、toRefs是处置详细疑问，但同时发生了新的用户心智累赘，如ref的照应式数据，必定要经过的模式访问。
因此，又经过proxyRefs函数成功智能脱ref，以缩小用户心智累赘。
【开源】基于Vue.js的企业名目合同消息系统的设计和成功
【开源】企业名目合同消息系统设计与成功概览
此名目是基于、SpringBoot、Java和MySQL的企业级合同治理处置打算，专为治理合同审批、签署、预约以及数据可视化而设计。
系统笼罩了用户治理、部门角色权限控制等基础模块，确保准确权限调配，实用于企业对合同治理的精细化需求。
名目编号S046，源码已可在Bilibili平台失掉，适宜合同专员和企业治理员经常使用。系统性能弱小，包括：
系统采纳前后端分别设计，前端经常使用，后端采纳SpringBoot，数据库采纳MySQL。
外围性能代码如查问、新增、审批、采纳和签署合等同均已成功。
在经常使用前，请务必浏览免责说明，赞同相关条款。
