最近面试被问到的最多的问题关于vue 小程序 es6整理(武汉初级前端),已经上岸
vue
top1 你知道vue的生命周期钩子吗,简单解释下
// Vue的实例化对象已经创建完毕,只是传入的参数(data,methods
//,el都没有设置到Vue的实例上去),所以我们获取不到data里面的数据,
beforeCreate() {
console.log("beforeCreate");
console.log(this.message);
console.log(this.age);
},
// Vue的实例化对象创建完毕,并且所有的属性已经设置到了实例化对象上
//通常我们可以用于这一步来做数据的初始化
created() {
console.log("created");
console.log(this.message);
console.log(this.age);
},
// 页面的所有组件创建完毕,但是还没有进行对应的Vue的操作
(data数据的解析,methods里面的方法)仅仅限于拿到页面的结构(数据还没有解析)
beforeMount() {
console.log("beforeMount")
console.log(this.message);
console.log(this.$el);
console.log(this.age);
},
// 页面所有组件的创建完毕,并且会执行对应的Vue操作,
把页面(数据解析完毕)的结构挂载到Vue的实力上面去
第一次dom渲染
mounted() {
console.log("mounted")
console.log(this.message);
console.log(this.$el);
console.log(this.age);
},
// 数据发生改变 页面没有渲染 会触发 beforeUpdate
beforeUpdate() {
},
//做了虚拟dom渲染 页面渲染会触发updated
updated() {
},
//删除前
beforeDestroy() {
},
//删除了
destroyed() {
},
第一次dom渲染在哪个钩子
mounted()
top2 vue里面常用的指令(随便记几个常用的就好了,5,6个为佳)
v-text
v-html
v-on
v-bind
v-model
v-for
v-if
v-show
v-model
v-once
top3 组件之间的传值
父传子(prop),子传父(this.$emit),兄弟传兄弟(bus)
隔代用新提供的注入(inject)提供(provide)
top4 插槽
插槽分为几种?怎么用?为什么用
1.基本插槽
作用:在使用组件的时候,插入的自定义结构
书写位置:在组件的模板里面使用<slot></slot>进行占位,自定义的结构显示在该位置
插槽挖坑可以挖多个
在组件中写信息
2. 作用域插槽
作用:在使用组件的时候,插入的自定义结构
在使用组件时,可以使用组件内部的数据
使用:1.组件内部使用<slot></slot>占位 在slot标签中自定义一个属性(row)(和上面对应)
2.使用的时候 如果需要访问组件内部的数据,则先在组件内部使用template标签包裹相应结构
3. 在template标签中 使用v-slot来接收传递过来的数据,取名叫scope(自定义),取值用scope.row.xxx
注意:elementui中 elementUI里面使用的是的 slot-scope 已经废弃
在使用组件时,可以使用组件内部的数据这个是为什么用
top5 关于vue-router(路由)
1、 声明式导航和编程式导航
2、哈希模式和history模式 (这个我只说了#,以及hash会报404.history不会报错)
3、导航守卫(全局前置,全局后置, 组件内的守卫)这里记住三个[指路官网](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB),要记住三个参数的含义
top6 双向绑定的原理
Object.defineProperty()
vue实现数据双向绑定主要是:采用 数据劫持结合发布者-订阅者模式 的方式,通过Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回掉。将MVVM作为数据绑定的入口,整合Observer,Complie 和 Watcher 三者,实现双向绑定效果。
top7 项目优化
随便网上找
top8 computed 与 watch 区别
1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性
2.watch不会缓存数据,每次打开页面都会重新加载一次,
但是computed如果之前进行过计算他会将计算的结果缓存,如果再次请求会从缓存中
得到数据(所以computed的性能比watch更好一些)
top9 vuex的方法使用
state(数据data) mutations(方法method) getters(计算computed) action(异步的方法,通过调用mutations实现对数据的更改。) modules(将一个仓库拆分成多个仓库)
小程序
top1 生命周期(页面,组件)
指路官网
top2 跳转方式
wx.navigateTo(OBJECT) //保留当前页面,跳转到应用内的某个页面
wx.redirectTo(OBJECT) //关闭当前页面,跳转到应用内的某个页面。
wx.switchTab(OBJECT) //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.reLaunch(OBJECT)//关闭所有页面,打开到应用内的某个页面。
top3 小程序相关传值,数据存储
页面可以利用url拼接,另一个页面在onLoad中利用options拿
利用 globalData存储
使用storge存储
父子组件传值可以看下这个父子组件传值,感觉写的很清楚
top4 小程序的优化
这个百度都有可以看看
es6新增的相关
可以看我的前几篇博客