简述MVVM
- MVVM(Model–View–Viewmodel)是一种软件架构模式。
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑(数据模型)的开发分离开 - Model层代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁。在MVVM架构下,View 和 Model 之间没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,ViewModel里面包含DOM Listeners和Data Bindings,DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化,当发生变化,Model层的数据随之变化;Data Bindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。 - MVVM模式的优点:
1.低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
2.可重用性。可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。
3.独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
4.可测试性。可以针对ViewModel来对界面(View)进行测试
谈谈对vue生命周期的理解?
每个Vue实例在创建时都会经过一系列的初始化过程
vue的生命周期钩子就是在达到某一阶段或条件时去触发的函数,目的就是为了完成一些动作或事件
- create阶段:vue实例被创建
beforeCreate: 最初调用触发,创建前,此时data和methods中的数据都还没有初始化,data和events都不能用
created: 创建完毕,data中有值,未挂载,data和events已经初始化好,data已经具有响应式;在这里可以发送请求 - mount阶段: vue实例被挂载到真实DOM节点
beforeMount:在模版编译之后,渲染之前触发,可以发起服务端请求,去数据,ssr中不可用,基本用不上这个hook
mounted: 在渲染之后触发,此时可以操作DOM,并能访问组件中的DOM以及$ref,SSR中不可用 - update阶段:当vue实例里面的data数据变化时,触发组件的重新渲染
beforeUpdate :更新前,在数据变化后,模版改变前触发,切勿使用它监听数据变化
updated:更新后,在数据改变后,模版改变后触发,常用于重渲染案后的打点,性能检测或触发vue组件中非vue组件的更新 - destroy阶段:vue实例被销毁
beforeDestroy:实例被销毁前,组件卸载前触发,此时可以手动销毁一些方法,可以在此时清理事件、计时器或者取消订阅操作
destroyed: 卸载完毕后触发,销毁后,可以做最后的打点或事件触发操作
组件生命周期
- 生命周期(父子组件) 父组件beforeCreate --> 父组件created --> 父组件beforeMount --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount --> 子组件 mounted --> 父组件mounted -->父组件beforeUpdate -->子组件beforeDestroy–> 子组件destroyed --> 父组件updated
- 加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 挂载阶段 父created->子created->子mounted->父mounted
- 父组件更新阶段 父beforeUpdate->父updated
- 子组件更新阶段 父beforeUpdate->子beforeUpdate->子updated->父updated
- 销毁阶段 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
v-if和v-show的区别?
- 两个指令从效果上是类似的,都能控制元素的显示和隐藏,本质上有区别
- 原理
v-if 的原理:控制元素是否渲染到页面,动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了
v-show的原理:控制元素样式是否显示(已经渲染到了页面) 相当于 display:none 控制css中的display设置为none,只会编译一次 - 使用场景:
用v-show的情况:要频繁地让一个元素去显示和隐藏(切换开销比较小,初始开销较大)
用v-if的情况:希望元素渲染出来后变化就比较少了(初始渲染开销较小,切换开销比较大) - 从性能层面:
v-if这些指令渲染出来的内容实际上是控制dom元素的增加和删除,dom元素的增加删除对性能开销比较大
如果仅仅控制样式变化性能开销比较小,如果这些变化能满足我们的需求就用v-show
AJAX运行原理
Ajax 相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。
Ajax向服务器端发送请求与接收响应的过程:由Ajax帮助浏览器向服务器端发送请求,由Ajax帮助浏览器接收服务器端响应到客户端的数据,当Ajax接收到服务器端响应过来的数据后,再使用DOM方法将服务器端发送过来的数据内容添加到页面当中,这样就可以实现用户边浏览网站边向服务器端请求数据了,并且实现页面无刷新更新数据。
在传统网站当中,请求的发送和响应的接收,开发人员是不可控的;而使用Ajax技术向服务器端发送请求与响应的接收开发人员是可控的,我们可以在请求发送与响应接收期间为用户作加载提示,以进一步提高用户浏览网站的体验。
先开启网站服务器,这样才能以域名的方式访问静态资源文件
输入url的过程
1.浏览器根据请求的 URL 交给 DNS 域名解析,找到真实 IP ,向服务器发起请求;
2.服务器交给后台处理完成后返回数据,浏览器接收⽂件( HTML、JS、CSS 、图象等);
3.浏览器对加载到的资源( HTML、JS、CSS 等)进⾏语法解析,建立相应的内部数据结构 (如 HTML 的 DOM);
4.载⼊解析到的资源⽂件,渲染页面,完成。