一、生命周期
1.1 生命周期总共有八个
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted
1.2 页面一加载会执行哪些
beforeCreate、created、beforeMount、mounted
1.3 节点和数据
在mouted和mouted之后有节点、在created和created之后有数据
1.4 生命周期怎么用
created==>发送请求
mounted==>加载数据、写入插件(dom)、获取某些元素的高度值
三、keep-alive
组件创建销毁 切换
保留组件状态,避免组件内的数据重复渲染
组件切换、保存在内存中
如果遇到二级路由访问页面
新闻 社会
体育 activated deacctivated
activated deacctivated
activated(){
this.$router.push(url)
}
beforeRouteLeave(){ //回到新闻 体育页面
let url = this.$route.path
}
四、ref
获取dom元素
this.$refs.btn
五、nextTick
获取dom元素的时候,数据改变了,视图未更新,dom操作是异步的 this.nextTick 解决dom操作 异步渲染问题
七、vuex
7.1 vuex有哪些属性
有五种,分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex
7.2 vuex中mutations和actions的区别
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
八、computed和methods和watch区别
methods可以放函数
watch一进来不会执行,数据发生改变会执行
computed和methods一进来会执行
computed存在缓存 如果数据相同则会取缓存里的数据
methods不存在缓存 数据改变一次 执行一次
九、slot怎么用、在什么场景下用
通过插槽可以让用户可以拓展组件,去更好地复用组件
匿名插槽:子组件写占位符,父组件中没有固定名字的都会显示在slot占位符里面
具名插槽:子组件中name等于,和父组件中#等于相同的都会显示在slot占位符里
作用域插槽:父组件用v-slot、且不能与#等于共存
十、组件传值
父==>子props
子==>父emit
兄弟bus
十一、v-model双向绑定原理
数据变化更新视图,视图变化更新数据
十二、v-if和v-show的区别
对于不显示在页面上的元素来说 v-if直接不渲染
v-show 是 给了一个display:none css的内联样式来控制不显示
十三、mvvm
MVVM是Model-View-ViewModel的简写。它本质上就是MVC (Model-View- Controller)的改进版。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。
十四、样式穿透
>>> css 样式穿透 ::v-deep 作用于sass /deep/ 作用于less
十五、scoped原理
实现组件私有化,当前style属性只作用于当前模块,给dom结构及css样式加了唯一标识 :data-v-469af010,缺点是更改起来增加代码量,它的唯一标识导致父组件无法操作子组件的样式。
十六、v-if和v-for的优先级
v-for>v-if
十七、vuex
状态管理、方便传值、方便操作
十八、v-if和v-show的区别
v-if和v-show的区别
对于不显示在页面上的元素来说 v-if直接不渲染
v-show 是 给了一个display:none css的内联样式来控制不显示
十九、nextTick
二十、for in 和 for of的区别
var arr = [1,2,3,4,5,6]
for(a in arr){
console.log(a)
}
输出0123456
var arr = [1,2,3,4,5,6]
for(a of arr){
console.log(a)
}
输出123456
二十一. 说一下你在vue中踩过的坑(必会)
在created操作dom的时候,是报错的,获取不到dom,这个时候实例vue实例没有挂载【解决办法】通过:Vue.nextTick(回调函数进行获取)
二十二.路由
22.1路由之间是怎么跳转的?有哪些方式
1、
2、this.$router.push()跳转到指定的url,并在history中添加记录,点击回退返回到上一个页面
3、this.$router.replace()跳转到指定的url,但是history中不会添加记录,点击回退到上上个页面
4、this.$touter.go(n)向前或者后跳转n个页面,n可以是正数也可以是负数
22.2 怎么配置路由
1.在main.js中导入router,并使用
2.配置路由path和组件,生成路由对象
3.页面使用
22.3 路由配置项常用的属性及作用
1.path : 跳转路径 component : 路径相对于的组件 name:命名路由 children:子路由的配置参数(路由嵌套) props:路由解耦 redirect : 重定向路由
22.4 vue-router 钩子函数
1.写在router.js中的钩子函数
beforeEnter:(to,from,next)=> {
console.log(to)//将要跳转的路径信息
console.log(from)//跳转前的路径信息
next()//路由的控制参数
},
2.写在模板中的钩子函数
beforeRouteEnter在路由进入前的钩子函数
beforeRouteUpdate在路由改变,该组件被复用时
beforeRouteLeave在路由离开前的钩子函数