网站优化合同,营销型网站规划建设的七大要素,廊坊网站制作费用,开发银行助学贷款系统登录官网一、对MVC#xff0c;MVP#xff0c;MVVM的理解
三者都是项目的架构模式#xff08;不是类的设计模式#xff09;#xff0c;即#xff1a;一个项目的结构#xff0c;如何分层#xff0c;不同层负责不同的职责。
1.MVC
MVC的出现是用在后端#xff08;全栈时代MVPMVVM的理解
三者都是项目的架构模式不是类的设计模式即一个项目的结构如何分层不同层负责不同的职责。
1.MVC
MVC的出现是用在后端全栈时代
Mmodel模型
主要完成业务功能在数据库相关的项目中数据库的增删改查属于模型。没有页面是纯粹的逻辑。
Vview视图
主要负责数据的显示HTMLCSS动态网页jsp含有HTML的PHP文件页面的展示和用户的交互。
Ccontroller控制器
主要负责每个业务的核心流程在项目中体现在路由以及中间件上nodeJs中的routes文件夹
2.MVP
MVP是把MVC中的C改成了P。主要限制了M和V之间不能直接通信互相调用传递数据。M和V之间的通信必须经过P。
PPresenter表示器
主要用于连接M层、V层完成Model层与View层的交互还可以进行业务逻辑的处理。
3.MVVM
MVVM是把MVP中的P改成了VM。主要体现的是M和V之间的双向绑定。View的变动可以同步相应在Model反之亦然。Vue就是一个MVVM的框架。准确来说使用Vue框架完成项目时使用的是MVVM模式。
VMViewModel
主要完成M和V的数据通信并且是双向绑定。而View和Model之间的同步工作完全是自动的无需人为干涉因此开发者只需关注业务逻辑不需要手动操作DOM不需要关注数据状态的同步问题复杂的数据状态维护完全由MVVM来统一管理。
总结所有的MV*的项目的架构模式都是为了完成项目代码的职责分工。 二、v-if和v-show区别
相同点都是用来控制Dom元素的显示和隐藏。
不同点
1.原理上
v-if是通过添加和删除Dom元素来控制Dom元素的显示和隐藏。
v-show是通过控制Dom元素样式的display属性的值来控制Dom元素的显示和隐藏。
2.性能损耗
v-if性能损耗主要体现在频繁切换时
v-show性能损耗主要体现在首次。
3.应用场景
v-if用于切换不频繁的场景
v-show:用于切换频繁的场景。
4.安全性 v-if:安全性好。如果Dom元素不显示时在Elements里根本看不到
v-show:安全性不好。如果Dom元素不显示时在elements里依然可以看到那么懂程序的人既可以修改
三、computed和watch的区别
1.相同点
都可以监听数据
2.不同点
1概念
computed是计算属性依赖其他属性值并且computed的值有缓存当依赖的属性值发生改变时才会重新计算computed的值默认是只读的相当于getter函数它也可以设置getter和setter函数来完成读和写。
watch监听器更多的是观察的作用每当监听的数据变化时都会执行回调进行后续操作它只能设置getter。watch默认只监听一层如果要深度监听让deep属性为true。
2作用
computed为了显示而用降低了模板上代码复杂度。
watch属性变化的检测相当于事件当属性的值发生变化时可以调用函数。主要处理异步以及开销比较大的操作。简单粗暴的理解为一个函数的执行时机。
3依赖模板调用
computed只能在模板上使用。
watch不能在模板上使用。
4是否异步
computed不能有异步只能同步。
watch可以有异步。
5立即执行
computed是立即执行。
watch:默认不是立即执行。如果要立即执行增加属性immediate。
补充在写代码时把函数定义和调用时机分开。
四、Vue2的响应式原理
响应式当js中的数据发生变化时模板上会对应的发生变化。
1.数据劫持
目的当数据发生变化时Vue框架会感知到。
怎么做的利用ES5的Object.defineProperty。当实例化组件时Vue框架内部会把定义在组件data里的所有数据属性进行遍历给每个数据属性增加setter和getter函数同时会做订阅。当数据发生变化时会调用setter函数。当获取数据时会调用getter函数。
2.发布订阅者模式
目的当数据发生变化时其实就是调用setter函数时会发布给所有订阅者。
怎么做的当Vue组件实例化时Vue框架内部会扫描模板让模板上使用Vue语法指令{{}}等的Dom元素去订阅对应的数据的变化。然后当数据变化时会更新所有订阅该数据的模板。
五、Vue3的响应式原理
1.数据劫持用proxy替换了Object.defineProperty。Proxy不需要循环速度比Object.defineProperty快10倍。同时也解决了数组的劫持。Vue2中用下标的方式改变数组不是响应式的
2.发布订阅者模式
内部有个Track函数相当于订阅。
内部有个Trigger函数相当于发布。
六、双向绑定的原理
1.双向绑定视图层发生变化时模型层会变化。模型层变化时视图层会变化。
2.原理
1通过事件和属性完成。
事件完成的视图层影响模型层。
属性完成的是模型层影响视图层(背后就是响应式原理)
3.Vue针对官方标签使用v-model指令v-model指令针对不同的官方标签使用不同事件和属性。
1、针对文本框单行和多行value属性和Input事件。如果加上修饰符lazy。事件就变成了Change事件。
2、针对radio使用的checked属性和Change事件。同时需要给radio加上value属性。
3、针对checkbox使用的checked属性和change事件。
3.1、如果应用在多选时需要给checkbox加上value属性。
3.2、如果应用在单选时不需要加。
4、针对select使用value属性和change事件。
七、单项数据流
1.单项数据流是什么
单项数据流是指父组件可以修改子组件的数据反之不行子组件不能修改父组件的数据。
2.Vue框架的单项数据流
Vue框架的Props是单项数据流。即父组件可以修改子组件的Props。子组件不能通过修改Props的方式来修改父组件的数据data否则
1、造成数据混乱如一个父级组件的数据传递给多个子组件某个子组件如果通过Props修改父组件的数据父级组件再修改其他子组件其他子组件就会莫名其妙的被修改造成数据混乱。
2、框架会给程序员爆出一个警告特指父组件给子组件传递的Props来自父组件的数据
3.当父级的数据更新时子组件的Props也会随之更新。
八、keep-alive
keep-alive是Vue提供的组件。
它有三个特征
1、组件作用keep-alive可以缓存组件及其状态数据避免了组件的频繁创建和销毁所带来的性能损耗。一般结合路由和动态组件一起使用。
2组件属性提供include和exclude属性。include表示只有名称匹配的组件会被缓存exclude表示任何名称匹配的组件都不会被缓存其中exclude的优先级比include高。两者都支持字符串或正则表达式。
3keep-alive会触发两个钩子函数activated和deactivated当组件被移除时触发钩子函数deactivated。
九、SPA的理解
1单页面应用的概念
SPAsingle page application单页面应用
就是整个项目只有一个HTML页面文件首次加载时把所有的HTMLcssjs全部加载下来。通过操作Dom的删除和创建添加来完成页面的切换。
2单页面应用优缺点
优点单页面应用相对服务器压力小【因为首次、或者只要HTMLcss和js加载完毕后切换页面是不用再去服务器请求HTMLcss和js而是直接操作Dom】
2.局部刷新所以用户体验好。【通过删除添加修改Dom的方式】
3.前后端分离
4.页面效果比较炫酷比如切换页面内容时的转场动画
缺点
不利于搜索引擎优化SEOsearch engine optimization。如百度360等搜索引擎搜索、
2.初次加载时耗时多可以使用路由懒加载解决
3.导航不可用如果一定要导航需要自行实现前进、后退Vue-Router做好了。页面复杂度提高很多。
4.容易造成css命名冲突【用scoped或者BEM的方式解决】
十、请问怎么理解虚拟Dom和Diff算法
1.什么是虚拟Dom和Diff算法
虚拟Dom用JS对象模拟的真实Dom该JS对象包含了真实Dom的所有属性和内容
Diff算法用来比较两个虚拟Dom的不同之处并在旧的虚拟Dom树上打上标记。
2.虚拟Dom和Diff算法的作用
虚拟Dom和Diff算法结合起来用来提升性能。可以减少无效的Dom渲染即减少了无效的重排和重绘。
3.步骤思路流程
1产生两个虚拟Dom树newVDomoldVDom
2oldVDom和真实Dom树保持一致
3数据变化时影响的是newDom
4操作newVDom后通过Diff算法对比newVDom和oldVDom的差异
