15가지 일반적인 Vue 인터뷰 질문 분석

1. Vue의 장점은 무엇인가요?

답변:

• 경량 프레임워크: 데이터를 구축하는 뷰 모음인 뷰 레이어에만 중점을 둡니다. 크기는 수십 <code><span style="font-size: 14px;">kb</span> ；

• 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

• 双向数据绑定：保留了 <span style="font-size: 14px;">angular</span> 的特点，在数据操作方面更为简单；

• 组件化：保留了 <span style="font-size: 14px;">react</span> 的优点，实现了 <span style="font-size: 14px;">html</span> 的封装和重用，在构建单页面应用方面有着独特的优势；

• 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

• 虚拟DOM：<span style="font-size: 14px;">dom</span> 操作是非常耗费性能的， 不再使用原生的 <span style="font-size: 14px;">dom</span> 操作节点，极大解放 <span style="font-size: 14px;">dom</span> 操作，但具体操作的还是 <span style="font-size: 14px;">dom</span> 不过是换了另一种方式；

• 运行速度更快：相比较于 <span style="font-size: 14px;">react</span> 而言，同样是操作虚拟 <span style="font-size: 14px;">dom</span> ，就性能而言， <span style="font-size: 14px;">vue</span> 存在很大的优势。

2.vue父组件向子组件传递数据？

答：通过 props

3.子组件像父组件传递事件？

答：$emit 方法

4.v-show 和 v-if指令的共同点和不同点？

答:

共同点： 都能控制元素的显示和隐藏；

不同点： 实现本质方法不同，v-show 本质就是通过控制 css 中的 display 设置为 none，控制隐藏，只会编译一次；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false ，就不会编译了。而且 v-if 不停的销毁和创建比较消耗性能。总结：如果要频繁切换某节点，使用 v-show (切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用 v-if（初始渲染开销较小，切换开销比较大）。

如果你以上的都会了， 说明你 60分及格了，另外现在vue3.0出来了，找工作一般都会问到，如果你还没学好。可以去小编前端扣扣裙 519293536 交流学习，里面有很多大佬，还有前端新技术资料分享！

5. 如何让CSS只在当前组件中起作用?

答：在组件中的 style 前面加上 scoped

6. 的作用是什么?

答: keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

7.如何获取dom?

答：ref="domName" 用法：this.$refs.domName

8.说出几种vue当中的指令和它的用法？

答：v-model 双向数据绑定；

v-for 循环；

v-if v-show 显示与隐藏；

v-on 事件；v-oncekb

🎜입니다. ; 🎜🎜🎜🎜🎜배우기 쉬움: 중국어, 중국어 문서로 개발, 언어 장벽 없음, 이해하고 배우기 쉬움 🎜🎜🎜양방향 데이터 바인딩: 유지됨 🎜🎜angular🎜 🎜의 특성은 데이터 조작을 더 쉽게 만듭니다. 🎜🎜🎜🎜🎜구성 요소화: 🎜🎜react🎜🎜의 장점을 유지하고 🎜🎜html🎜 🎜의 캡슐화 및 재사용은 단일 페이지 애플리케이션 구축에 고유한 이점을 제공합니다. 🎜🎜🎜🎜🎜뷰, 데이터 및 구조 분리: 필요 없이 데이터 변경을 더 간단하게 만듭니다. 논리 코드 수정에는 관련 작업을 완료하기 위한 데이터 조작만 필요합니다. 🎜🎜🎜🎜🎜Virtual DOM: 🎜🎜dom🎜🎜 작업은 성능 집약적이므로 기본 작업은 필요하지 않습니다. 더 오래 사용된 🎜 🎜dom🎜🎜 운영 노드는 🎜🎜dom🎜🎜 작업을 크게 해방시키지만 특정 작업은 여전히 ​​🎜🎜dom🎜🎜입니다. 또 다른 방법은 🎜🎜🎜🎜🎜 더 빠르게 실행되는 것입니다. 🎜🎜react🎜🎜에 비해 가상 🎜🎜dom🎜 🎜도 작동합니다. 성능, 🎜🎜vue🎜🎜에는 큰 장점이 있습니다. 🎜🎜

🎜2. vue 상위 구성 요소가 하위 구성 요소에 데이터를 전달합니까? 🎜

🎜답변: props를 통해🎜

🎜3. 하위 구성 요소는 상위 구성 요소와 같은 이벤트를 전달합니까? 🎜

🎜답변: $emit method🎜

🎜4. v-show와 v-if 명령어의 유사점과 차이점은 무엇인가요? 🎜

🎜답변: 🎜🎜공통점: 둘 다 요소의 표시 및 숨기기를 제어할 수 있습니다. 🎜🎜차이점: 다양한 구현 방법, v-show의 핵심은 display가 none으로 설정되면 컨트롤이 숨겨지고 한 번만 컴파일됩니다. v-if는 DOM 요소를 DOM에 동적으로 추가하거나 삭제합니다. tree.초기값이 false이면 컴파일되지 않습니다. 더욱이 v-if의 지속적인 파괴와 생성은 성능을 소모합니다. 요약: 노드를 자주 전환하고 싶다면 v-show를 사용하세요. (전환 오버헤드는 비교적 작지만 초기 오버헤드는 큽니다.) 노드를 자주 전환할 필요가 없다면 v-if를 사용하세요(초기 렌더링 오버헤드는 작지만 전환 오버헤드가 상대적으로 큽니다).

위 사항을 모두 알고 계시다면 60점으로 합격했다는 의미입니다. 게다가 이제 vue3.0이 나왔으니 취업을 하게 된다면 보통 이런 질문을 받게 될 것입니다. 아직 배우지 않았습니다. 편집자의 프런트 엔드 버튼 스커트 519293536에 가서 소통하고 배울 수 있습니다. 거기에는 많은 큰 사람들이 있으며 새로운 프런트 엔드 기술에 대한 정보도 공유합니다! 🎜

🎜5. CSS가 현재 구성 요소에서만 작동하도록 하는 방법은 무엇입니까?🎜

🎜답변: 구성 요소 앞에 style을 추가하세요. code>scoped🎜

🎜6. 함수는 무엇인가요?🎜

🎜답변: keep-alive는 Vue에 내장되어 있습니다. 포함된 구성 요소가 상태를 유지하거나 다시 렌더링되지 않도록 하는 구성 요소입니다. 🎜

🎜7. DOM을 얻는 방법은?🎜

🎜답변: ref="domName" 사용법: this.$refs .domName🎜

🎜8. vue의 몇 가지 명령어와 사용법을 알려주세요. 🎜

🎜답변: v-model 양방향 데이터 바인딩 🎜🎜v-for 루프; v-show 표시 및 숨기기; 🎜🎜v-on 이벤트; v-once: 한 번만 바인딩합니다. 🎜

9. vue-loader란 무엇인가요? 그것을 사용하는 용도는 무엇입니까?

답변: template/js/style을 js 모듈로 변환하는 vue 파일용 로더입니다. template/js/style 转换成 js 模块。

用途：js 可以写 es6 、 style样式可以 scss 或 less 、 template 可以加 jade等

10.为什么使用key?

答：需要使用 key 来给每个节点做一个唯一标识， Diff 算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟 DOM。

11.axios及安装?

答：请求后台资源的模块。npm install axios —save 装好， js中使用 import 进来，然后 .get 或 .post 。返回在 .then 函数中如果成功，失败则是在 .catch 函数中。

12.v-modal的使用

答：v-model 用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：v-bind 绑定一个 value 属性；v-on 指令给当前元素绑定 input 事件。

13.请说出vue.cli项目中src目录每个文件夹和文件的用法？

答：assets 文件夹是放静态资源；components 是放组件；router 是定义路由相关的配置; app.vue 是一个应用主组件；main.js 是入口文件。

14.分别简述computed和watch的使用场景

答：

• <span style="font-size: 14px;">computed</span> : 当一个属性受多个属性影响的时候就需要用到 <span style="font-size: 14px;">computed</span> ，最典型的栗子：购物车商品结算的时候

• <span style="font-size: 14px;">watch</span> : 当一条数据影响多条数据的时候就需要用 <span style="font-size: 14px;">watch</span> ，栗子：搜索数据

15.v-on可以监听多个方法吗？

答：可以，栗子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">
사용법: js는 es6로 작성할 수 있고, style 스타일은 scss 또는 로 작성할 수 있습니다. less , template에는 jade 등을 추가할 수 있습니다.

10. 키를 사용하는 이유는 무엇인가요?

답변: 키를 사용하여 각 노드에 고유한 식별자를 제공해야 하며 Diff 알고리즘이 이 노드를 올바르게 식별할 수 있습니다. 주요 기능은 가상 DOM을 효율적으로 업데이트하는 것입니다. 🎜

🎜11.axios 및 설치?🎜🎜🎜답변: 백그라운드 리소스를 요청하는 모듈입니다. npm install axios —save 설치 후 js에서 import를 사용한 다음 .get 또는 .post를 사용하세요. 성공하면 .then 함수에 반환되고, 실패하면 .catch 함수에 반환됩니다. 🎜

🎜12. v-modal🎜🎜🎜답변: v-model은 실제로 양식 데이터의 양방향 바인딩에 사용됩니다. , 이는 구문입니다. 여기에는 두 가지 작업이 있습니다. v-bind는 value 속성을 ​​바인딩합니다. v-on 명령은 현재 요소 입력 이벤트. 🎜

🎜13. vue.cli 프로젝트의 src 디렉터리에 있는 각 폴더와 파일의 사용법을 알려주세요. 🎜🎜🎜답변: assets 폴더는 정적 리소스용이고, router는 라우팅 관련 구성을 정의하기 위한 것입니다. > app.vue는 애플리케이션 기본 구성 요소이고 main.js는 항목 파일입니다. 🎜

🎜14 각각 Computed와 Watch의 사용 시나리오를 간략하게 설명하세요🎜🎜🎜답변:🎜

• 🎜🎜computed🎜🎜 : 하나의 속성이 여러 속성의 영향을 받는 경우 🎜🎜computed🎜🎜를 사용해야 합니다. 가장 일반적인 예: 장바구니 항목을 확인할 때🎜🎜
• 🎜🎜watch🎜🎜: 하나의 데이터가 여러 데이터에 영향을 미치는 경우 🎜🎜watch🎜🎜, chestnut: search data🎜🎜
를 사용해야 합니다. ul>🎜15. v-on은 여러 메소드를 들을 수 있나요? 🎜🎜🎜답변: 네, 밤나무: <input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">. 🎜🎜🎜추천 튜토리얼: "🎜JS Tutorial🎜"🎜

위 내용은 15가지 일반적인 Vue 인터뷰 질문 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!