Interview questions sorting vue applet es6 (applicable to junior front-end)

The most frequently asked question in recent interviews is about vue applet es6 finishing (Wuhan junior front-end), which has been launched

vue

top1 Do you know the life cycle hook of vue, briefly explain it

//  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() {
    
    
            },

Which hook is used for the first DOM rendering?

 mounted()

top2 Commonly used instructions in vue (just remember a few commonly used ones, 5 or 6 are better)

v-text 
v-html
v-on
v-bind
v-model
v-for
v-if
v-show
v-model
v-once

Value transfer between top3 components

父传子(prop),子传父(this.$emit),兄弟传兄弟(bus)
隔代用新提供的注入(inject)提供(provide)

top4 slot

How many types of slots are there? how to use? Why use

1.基本插槽
作用:在使用组件的时候,插入的自定义结构
书写位置:在组件的模板里面使用<slot></slot>进行占位,自定义的结构显示在该位置
插槽挖坑可以挖多个
在组件中写信息
2. 作用域插槽
作用:在使用组件的时候,插入的自定义结构
  在使用组件时,可以使用组件内部的数据
使用:1.组件内部使用<slot></slot>占位  在slot标签中自定义一个属性(row)(和上面对应)
     2.使用的时候 如果需要访问组件内部的数据,则先在组件内部使用template标签包裹相应结构
    3. 在template标签中 使用v-slot来接收传递过来的数据,取名叫scope(自定义),取值用scope.row.xxx
注意:elementui中   elementUI里面使用的是的 slot-scope   已经废弃 

When using a component, you can use the data inside the component. Why is this used?

top5 About vue-router (routing)

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 Principle of two-way binding

Object.defineProperty()
vue实现数据双向绑定主要是:采用 数据劫持结合发布者-订阅者模式 的方式,通过Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回掉。将MVVM作为数据绑定的入口,整合Observer,Complie 和 Watcher 三者,实现双向绑定效果。

top7 project optimization

随便网上找

top8 The difference between computed and watch

1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性
2.watch不会缓存数据,每次打开页面都会重新加载一次,
但是computed如果之前进行过计算他会将计算的结果缓存,如果再次请求会从缓存中
得到数据(所以computed的性能比watch更好一些)

How to use top9 vuex

state (data) mutations (method) getters (computed) action (asynchronous method, changes to data are implemented by calling mutations.) modules (split a warehouse into multiple warehouses)

Applets

top1 life cycle (page, component)

Guide official website

top2 jump method

wx.navigateTo(OBJECT) //保留当前页面,跳转到应用内的某个页面
wx.redirectTo(OBJECT) //关闭当前页面,跳转到应用内的某个页面。
wx.switchTab(OBJECT)  //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.reLaunch(OBJECT)//关闭所有页面,打开到应用内的某个页面。

top3 Mini-program related value transfer and data storage

	页面可以利用url拼接,另一个页面在onLoad中利用options拿
	利用 globalData存储
	使用storge存储

For the value transfer of parent-child components, you can take a look at the value transfer of parent-child components . I feel that it is written very clearly.

Optimization of top4 small programs

You can check it out on Baidu

es6 new related

You can read my previous blogs

es61
es62
class
new data types

Guess you like

Origin blog.csdn.net/Yannnnnm/article/details/115464587