模板网站建设源码,漳州网站建设优化推广,网站建设如何查看后台数据库,安阳文创设计8. MVVM和MVC区别#xff1f;它和其它框架的区别是什么#xff1f;哪些场景适合#xff1f;【重点】
MVC和MVVM其实区别并不大#xff0c;都是一种设计思想。主要就是MVC中Controller演变成MVVM中的View Model。MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低、加载…8. MVVM和MVC区别它和其它框架的区别是什么哪些场景适合【重点】
MVC和MVVM其实区别并不大都是一种设计思想。主要就是MVC中Controller演变成MVVM中的View Model。MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低、加载速度变慢、影响用户体验。
区别Vue数据驱动通过数据来显示视图层而不是节点操作。
场景数据操作比较多的场景更加便捷。
9. Vue的优点是什么【了解】
低耦合
视图View可以独立于Model变化和修改一个View Model可以绑定到不同的视图上当View变化的时候Model可以不变当Model变化的时候View也可以不变。
可重用性
可以将一些视图逻辑放在一个View Model里面让很多View重用这段视图逻辑。
独立开发
开发人员可以专注于业务逻辑和数据的开发View Model设计人员可以专注于页面设计。
可测试
界面素来是比较难于测试的而现在测试可以针对View Model来写。
10. 路由之间跳转【重点】
Router-link无参数跳转 //使用name、path方式都行, 建议用name router-link :to{name:home} 或 router-link :to{path:/home}
Router-link带参数跳转Params传递参数 router-link :to{name:home, params: {id:1}} 或 router-link :to{path:/home, params: {id:1}} 取参 this.$route.params.id
Query传递参数 router-link :to{name:home, query: {id:1}} 取参 this.$route.query.id
编程式路由无参 this.$router.push(/home) this.$router.push({name:home}) this.$router.push({path:/home})
编程式路由有参
Query传递参数 this.$router.push({name:home,query: {id:1}}) this.$router.push({path:/home,query: {id:1}}) 取参 this.$route.query.id
Params传递参数 this.$router.push({name:home,params: {id:1}}) 取参 this.$route.params.id
Query与Params传递参数区别
Query类似get跳转之后页面url后面会拼接参数类似?id1。
Params类似post, 跳转之后页面url后面不会拼接参数但是刷新页面id会消失。
使用replace()函数跳转 //参数的具体格式同push this.$router.replace()
使用go()函数跳转 //向前或者向后跳转n个页面n可为正整数或负整数 this.$router.go(n)
Push跳转与Replace跳转的区别
Push跳转到指定URL路径并向History栈中添加一个记录点击后退会返回到上一个页面。
Replace跳转到指定URL路径但是History栈中不会有记录点击返回会跳转到上上个页面。
11. Vue CLI中怎样使用自定义的组件【掌握】
第一步在components目录新建你的组件文件indexPage.vuescript一定要export default {}。
第二步在需要用的页面组件中导入import indexPage from ‘/components/indexPage.vue’。
第三步注入到Vue的子组件的components属性上面components:{indexPage}。
第四步在template中使用。
12. V-show和V-if指令的共同点和不同点【重点】
v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏
v-if指令是直接销毁和重建DOM树达到让元素显示和隐藏的效果
使用v-show会更加节省性能上的开销当只需要一次显示或隐藏时使用v-if更加合理。
13. 怎么定义vue-router的动态路由以及如何获取传过来的动态参数【掌握】
定义在router目录下的index.js文件中对path属性加上后缀例如/user/:id。
取参使用route对象的params.id属性。
14. 什么是Vue生命周期【重点】
Vue实例从创建到销毁的过程就是生命周期。
也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们称这是Vue的生命周期。
Vue生命周期总共分为8个阶段创建前/后, 载入前/后,更新前/后,销毁前/销毁后。
创建前/后在beforeCreate阶段Vue实例的挂载元素el和数据对象data都为undefined还未初始化。在created阶段Vue实例的数据对象data有了el还没有。
载入前/后在beforeMount阶段Vue实例的$el和data都初始化了但还是挂载之前为虚拟的Dom节点data数据还未替换。在mounted阶段Vue实例挂载完成data数据成功渲染。
更新前/后当data变化时会触发beforeUpdate和updated方法。
销毁前/后在执行destroy方法后对data的改变不会再触发周期函数说明此时Vue实例已经解除了事件监听以及和Dom的绑定但是Dom结构依然存在
第一次页面加载时会触发beforeCreate, created, beforeMount, mounted这几个钩子函数。
DOM渲染在mounted中就已经完成了。
生命周期钩子的常用场景
beforeCreate可以在此时加一些loading效果在created时进行移除
created一般可以在此时发送一些网络请求获取数据
mounted一般第一个业务逻辑会在这里开始当需要操作DOM的时候执行可以配合$nextTick 使用进行单一事件对数据的更新后更新DOM
beforeUpdate适合在更新之前访问现有的 DOM比如手动移除已添加的事件监听器
updated当数据更新需要做统一业务处理的时候使用
beforeDestroy主要解绑一些使用addEventListener监听的事件等
