인터뷰 질문 정렬 vue applet es6 (주니어 프론트엔드에 적용 가능)

최근 인터뷰에서 가장 많이 묻는 질문은 최근 출시된 vue 애플릿 es6 마무리(우한 주니어 프론트엔드)에 관한 것입니다.

top1 Vue의 라이프사이클 Hook를 알고 계시나요? 간단히 설명해주세요.

//  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

상위 3개 구성요소 간 가치 이전

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

상위 4개 슬롯

슬롯에는 몇 가지 종류가 있나요? 사용하는 방법? 왜 사용합니까?

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 계산과 시계의 차이점

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

top9 vuex 사용 방법

상태(데이터) 변형(메서드) 게터(계산) 작업(비동기식 메서드, 데이터 변경은 변형 호출을 통해 구현됩니다.) 모듈(웨어하우스를 여러 웨어하우스로 분할)

애플릿

top1 라이프사이클(페이지, 컴포넌트)

가이드 공식 홈페이지

top2 점프 방법

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

top3 미니 프로그램 관련 가치 전달 및 데이터 저장

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

부모-자식 컴포넌트의 가치 전달에 대해서는 부모-자식 컴포넌트의 가치 전달을 살펴보면 매우 명확하게 쓰여진 것 같습니다.

상위 4개 소규모 프로그램 최적화

바이두에서 확인하실 수 있습니다

es6 새로운 관련

내 이전 블로그를 읽을 수 있습니다.

es61
es62
클래스
새로운 데이터 유형

추천

출처blog.csdn.net/Yannnnnm/article/details/115464587