VUE
简单说一下生命周期.
生命周期就是从创建到销毁的过程.开始创建,初始化数据,编译模板,挂在dom,渲染,更新,渲染,销毁等一些列过程
beforCreate:只是单纯的创建$el和data
created:data进行初始化,$el实例还是处于创建状态
beforeMounte:data和$el都已经初始化完成,但是data还是之前虚拟的dom节点,data尚未替换,此时还没有挂在html在页面上
mounted:用真是数据替换虚拟DOM
beforeUpdate:data数据已经发生改变,但是未渲染
Updated:data数据已经发生改变,并且旧数据代替新数据
beforeDestory:在实例销毁钱调用,实例仍然完全可用
destoryed:实例销毁之后调用.调用后所有事件监听器会被移除,所有子实例也会被销毁.该钩子在服务器端渲染期间不会被调用
简述每个周期具体适合哪个场景
beforeCreate:可以在这个事件加loading,异步请求调用
created:初始化完成事件卸载这里面.像loading结束,或者发送异步请求
mounted:挂在元素,获取dom节点
beforeDestory:可以做停止确认框事件
nexTick:改变dom元素,nextTick方法延时调用函数事件来渲染视图
双向绑定原理:
采用数据劫持发布者-订阅者的方式,用Object.defineProperty()方法来对劫持数据属性的getter/setter,在数据发生变化时发送给订阅者,触发相应的监听回调
Vue组件有哪几种
1.父传子:props
子传父:emit
或者用ref来调用子组件的数据或方法
3.兄弟组件::(先创建一个eventVue.js文件,在兄弟组件中引入这个js事件,并且兄弟之间传递数据需要借助一个中间人,这个中间人是父组件,在父组件中引入兄弟组件,传递数据的组件触发bus.$emit事件,接收数据的组件用bus.$on接收参数,这样就达成了兄弟组件的传递
简单说一下vuex
vuex:状态库管理。主要分5大模块
state:状态库
mutations:相当于computed属性，改变state状态
actions:对mutations进行状态的改变
getter:过滤器，对state调用前的状态进行修改
modules模块：处理Store,时分工更清晰
vue组件传值
通过路由跳转传值
$router.push({
name:'A',
query:{
id:id
}
})
存在localSorage里面或者使用vuex数据管理传值
路由之间跳转
声明式：router-link
编程式：router.push
组件传值.sync
可以在子组件中修改值
// 父组件
<HelloWorld :msg="msg" @parentFun="change"></HelloWord>
watch:{
msg:(newValue,oldValue) => {
console.log(newValue)
console.log(oldValue)
}
}
// 子组件
changeMsg(){
this.$emit('update:msg','hello')
}
vuex怎么使用？使用场景
全局存储数据用的
在main中引入store,注入。
新建了一个目录store,...export.
场景：单页面应用，组件之间的状态
怎么定义vue-router的动态路由以及如何获取传过来的动态参数
在index.js文件中，对路径直接加上/:id(/router/:id)
//在index.js
{path: '/user/:userid',component: User,}
接受参数this.$route.params.id
vue-router有哪几种导航钩子？
全局导航钩子函数：
1.router.beforeEach(to,from,next)=====>(前置守卫)
作用：
- 跳转前进行拦截
- to:route即将进入的目标路由对象
- from:route当前导航正要离开的路由
//单独设置每个路由的属性：
meta: { may: true }
router.beforeEach((to, from, next) => {if (to.matched.some(item => item.meta.may)) {let id = window.localStorage.getItem("id")if (id) {next()} else {next({ name: "login" })}} else {next()}
})
2.afterEach(后置钩子)
v-loader是什么，用途是什么？
解析：vue文件的一个加载器
用途：加载有vue-loader提取的css代码