1. vue.js 的两个核心是什么?
数据驱动:viewmodel 保证数据和视图的一致性
组件系统
2. vue 的生命周期
created(创建后):组件实例创建完成,属性已经绑定,数据对象data已存在;但dom未生成,$el 未存在
mounted(挂载后):vue实例挂载完成,data.msg 成功渲染
updated(更新后):当data发生变化后,会触发updated方法
destoryed(销毁后):组件销毁之后调用,对data的改变不会再触发周期函数,vue实例已解除dom监听和数据绑定,但dom结构依然存在
3. vuex 是什么,怎么使用,在哪种场景下使用
[图片上传失败...(image-d7bc62-1592017290038)]
一个实例化的Vuex.Store由 state , mutation , actions 三个属性组成; state 中保存着共有数据; 通过 mutations中的方法改变 state 中的数据,且是同步的; 异步的方法需要写在 actions 中,并通过 commit 到 mutations 中,才能更改 state 中的数据。
vuex 是vue程序使用的 状态管理模式
,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
单页应用中组件之间的状态,音乐的播放、登录状态等......
4. vue 组件间的传参
父组件向子组件传参
子组件通过 props
方法接收数据
// 父组件
// 子组件
{{form}}
export default {
data() {
return {
}
},
props: ['form']
}
子组件向父组件传递数据
子组件主要通过事件传递数据给父组件
// 子组件
在 setUser 中,使用 $emit
来遍历 transferUser 事件,并返回 this.username
其中 transferUser 是一个自定义事件, this.username
通过这个事件传递给父组件
// 父组件
{{user}}
在父组件中声明了一个方法 getUser,用 transferUser 事件调用 getUser 方法,获取到从子组件传递过来的参数 username
getUser 方法中的 msg参数就是从子组件传递过来的 username
非父子组件间的数据传递
使用 vuex
或者从子组件传到父组件,再传到子组件
5. Vue 和 React 的区别
相同点
- React 使用 JSX 语法,vue使用
.vue
的文件格式,两者都需要编译后使用 - 都是以组件的形式
- 都提供了钩子函数
不同点
- React 依赖
虚拟DOM
,vue 使用的 DOM模板,React 采用的虚拟DOM 会对渲染出来的结果做脏检查
??? - vue 在模板中提供了指令、过滤器等,可以方便、快捷地操作DOM
6. route 和 router 的区别;vue-router 是怎么传递参数的
route
是路由信息对象,包括 path , params , hash , query , fullPath , matched , name 等路由信息参数
router
是路由实例,包括了路由的跳转方法,钩子函数等
- 在
router.js
文件中配置 path 的地方动态传递参数path: '/home/:id'
,然后在组件中通过this.$route.params.id
获取 - 在
router-link
标签中传递参数,同样使用this.$route.params
获取
7. 事件修饰符
-
.stop
:阻止冒泡(阻止事件向上级DOM元素传递)
点击内层 div 时:
this is inner this is outer
点击外层 div 时:
this is outer
修改内层 div:
再次点击内层 div 时:
this is inner
-
.prevent
:阻止默认事件的发生;默认事件指对DOM的操作会引起自动执行的动作,比如点击超链接的时候会进行页面的跳转,点击表单提交按钮时会重新加载页面,使用.prevent
修饰符可以阻止这些事件的发生。
百度
-
.capture
:捕获冒泡,即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行,然后再按自然顺序执行触发的事件。
// 点击最内层 div时,
// this is outer
// this is the most inner
// this is inner
有多个修饰符时:
// 点击最内层 div时,
// this is outer
// this is inner
// this is the most inner
-
.self
:将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响。
// 点击最内层时
// this is the most self
// this is outer
.once
:设置事件只能触发一次,比如按钮的点击等。.passive
:用于对DOM的默认事件进行性能优化,例如超出最大范围的滚动条滚动的方法,可以使用该修饰符进行加强。
8. 什么是 keep-alive
在组件切换的过程中将状态保留在内存中,防止重复渲染DOM,只会执行一次,不会被销毁。被 keep-alive 包裹的组件,没有 create和 beforeDestroyed等方法,但是有 activated 和 deactivated方法。
9. beforeDestroy 里面一般进行什么操作
beforeDestroy 是组件销毁之前执行的一个生命周期,在这个生命周期里,可以进行回调函数或定时器的清除,清除不用的dom元素