什么是SPA应用,SPA页面和传统页面有什么区别?
单页面应用,仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转。
什么是vuex,vuerouter,如何避免vuex中的函数造成全局污染
vuex 为状态管理,它集中存储管理应用的所有组件的状态,可以理解成一个全局仓库。
VueRouter是路由(spa)单页面应用的方式
避免全局变量污染:1.唯一变量:将变量都挂载到同一个命名空间下 2.使用闭包
为什么通过vuex的mutation修改state中的参数就不会报错,而直接更改state中的参数就会报错(使用严格模式才报错)
原因:如果通过外部直接修改state,则没有执行 commit 函数,通过mutation修改state执行了commit函数,不执行commit函数_withCommitting不为true,则报出异常。
1.使用vuex修改state时,有两种方式:
(1)可以直接使用this.$store.变量=xxx;
(2)this. $store.dispatch、this. $store.commit;
2.异同点:
(1)共同点:能够修改state里的变量,并且是响应式的(能触发视图更新)
(2)不同点:若将vue创建store的时候传入strict true,开启严格模式,那么任何修改state的操作,只要不经过mutation函数就会报错
vue中使用插件的步骤?
安装:npm install xxx
引入: import ... from ...;
使用:Vue.use(xxx)
vue中引入组件有几种方式?简述步骤
两种:采用 ES6 的 import ... from ... 语法或 CommonJS 的 require() 方法引入组件
//方法一
import Calendar from "./calendar";
export default {
name: "SymptomMain",
components: {
Calendar
},
}
//方法二
export default {
//1.直接在components中写入子组件
components: {
Calendar:require('./calendar.vue').default
},
}
vue-router 有哪几种导航钩子
1.全局导航钩子:作用:跳转前进行判断拦截。
2.组件内的钩子;
3.单独路由独享组件
*全局导航钩子
router.beforeEach(to,from,next);
router.beforeResolve(to,from,next);
router.afterEach(to,from,next);
*组件内钩子
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
*单独路由独享组件
beforeEnter
NextTick是做什么的?
$nextTick
是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick
,则可以在回调中获取更新后的DOM。
场景:需要在视图更新之后,基于新的视图进行操作
vue中key的作用
key的作用主要是为了高效的更新虚拟DOM
** 如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点以后的子节点了。
** 如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新。
keep-alive的了解
keep-alive是vue内置的一个组件,可以在组件切换时保留被包裹组件的状态,使其不被销毁,防止重复渲染dom
$router
和$route
的区别
$router
为VueRouter实例,想要导航到不同的url,则使用 $router.push
方法;
$route
为当前router跳转对象里面可以获取name、path、query、params等。
vuex有哪几种状态和属性
有五种,分别是 State、 Getter、Mutation 、Action、 Module (就是mapAction等)
vuex的流程
页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。
最后通过getter把对应值跑出去,在页面的计算属性中,通过mapGetter来动态获取state中的值
网友评论