1. vue和react的相同点
- 都支持服务器渲染；
- 都有虚拟DOM、组件化开发，都通过props完成父子组件间的数据传递，都实现组件化规范；
- 都有仓库（管理状态）：react有redux、vue有vuex；
2. vue和react的区别：
- react只针对MVC框架的view层，而vue是一个完整的MVVM模式；
- 虚拟DOM不一样：vue会通过跟踪依赖实现只对状态更新部分进行重新渲染；而react会在状态有改变时，重新渲染每个组件，所以在react中会有shouldComponentUpdate生命周期函数；
- 数据绑定：vue实现了数据的双向绑定，而react的数据流向是单向的；
- 组件写法不一样：vue的写法是webpack+vue-loader的单文件组件格式；而react的写法是JSX+行内样式；
- state对象在react中只能通过setState改变状态；在vue中，state对象不是必需的，数据由data属性在vue对象中管理。
3. vue的原理：
- vue是一个构建数据驱动的web界面的渐进式框架，采用MVVM模式实现视图层与数据层的数据修改、更新监听。其工作原理是vue在实例化的过程中会遍历data下的数据，通过Object.defineProperty()方法将它们设置为存储器属性（即具有getter、setter属性）。
4. vue的特点：
- 简洁：页面由HTML模板+ JSON数据+ Vue实例组成；
- 数据驱动：自动计算属性和追踪依赖的模板表达式；
- 组件化：用可复用、解耦的组件来构造页面；
- 轻量：代码量小，不依赖其他库；
- 快速：精确有效批量DOM跟新。
5.scss是什么：
- scss是一款css预处理语言，可编写函数，定义变量，可嵌套。
6.为什么vue中的data必须是一个函数：
- 对象是引用类型，在重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改。使用返回对象的函数，由于每次返回的是一个新的对象，引用地址不同，就不会出现这个问题。
7.active-class是哪个组件的属性：
- vue-router模块的router-link组件。
8.vue-router有哪几种导航钩子：
- 全局导航钩子，可以用在路由跳转前做判断拦截
- 组件内的钩子
- 单独路由独享钩子
9.vue-cli项目中src目录中每个文件夹和文件的用法：
- assets：放静态资源
- component：放组件
- router：定义路由相关的配置
- app.vue：是一个应用主组件
- main.js：是入口文件
10.vue组件通讯
1.父传子
-
- 父：自定义属性名+ 数据
- 子：props["父组件上的自定义属性名"]
2. 子传父
-
- 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听
- 子：this.$emit("自定义事件名"，数据)+ 子组件标签上绑定@自定义事件名="回调函数"
- 父：methods:{自定义事件( ){ }}
3. 事件总线 let bus = new Vue()
-
- A：methos:{函数{bus.$emit("自定义事件名"，数据)}} -> 发送
- B：created(){bus.$on("A发送过来的自定义事件名")} -> 接收
11. vue路由传参
- 使用query方式传入的参数使用this.$route.query接收
- 使用params方法传入的参数使用this.$route.params接收
12. 计算属性和watch的区别
- computed属性是用来声明式地描述一个值依赖了其他值。当你在模板里把数据绑定在一个计算属性上时，vue会在其依赖的任何值导致该计算属性改变时更新DOM。这个功能非常强大，可以让你的代码更加声明式、数据驱动并且易于维护。
- 配置参数watch用来监听实例下的属性，当监听的值发生改变时会自动调用对应的方法。
- 而计算属性计算的是绑定在它上面的属性所依赖的属性，它不能计算在data中已定义过的变量。
13. vuex是什么？有哪几种属性？
- vuex是一个专门为vue.js程序开发的状态管理模式。有四种属性：state、getter、mutation、action
14. vuex的state是什么？
- vuex就是一个store，store里面放了很多对象。其中state就是数据源存放地，对应于vue中的data。state里存放的数据是响应式的，vue从store中读取数据，当store中的数据发生改变时，依赖这些数据的组件也会发生改变。它通过mapState把全局的state和getter映射到当前组件的computed属性。
15. vuex的getter是什么？
- getter用来对state进行计算操作，它就是store的计算属性。虽然在组件内也可以做计算属性，但是getter可以在多组件复用。它对应于vue对象中的computed。
16. vuex的mutation是什么？
- 更改vuex中store中的state的唯一方法是提交mutation。
17. vuex的action是什么？
- action类似于mutation，不同的是action提交的是mutation，而不是直接变更状态。action可以包含任何异步操作。
18. v-show和v-if的相同点和不同点：
- v-show指令是通过修改元素的display属性让其显示或隐藏。
- v-if是直接销毁和重建DOM达到让元素显示和隐藏的效果。
19. 如何让css只在当前组件中起作用：
- 将当前组件的<style>设置为<style scoped>
20. <keep-alive />的作用是什么？
- <keep-alive />包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或者避免重新渲染。
21. v-on常用修饰符
- .native主要是给自定义组件添加原生事件
- .stop主要用于阻止事件冒泡 【e.stopPropagation()】
- .prevent主要用于阻止当前事件的默认行为
- .self主要用于设置当事件是从事件绑定的元素本身触发时才会触发回调
- .once表示绑定的事件是一次性的，仅被触发一次
22. v-for、key的作用：
- 当vue用v-for更新已经渲染过的元素列表时，默认采用“复用”原则。如果数据项的顺序被改变，vue不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
- 为了给vue一个提示，以便他能够跟踪每个节点，从而重新排序现有的元素，需要为每项提供一个唯一的key属性。key属性的类型只能是string或者number类型。
- 使用key，vue会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。
23. Promise对象是什么？
- Promise是异步编程的一种解决方案，它是一个容器，保存着未来某个时间点才会结束的事件的结果。
- Promise是一个对象，从它可以获取异步操作的消息。
- Promise提供统一的API，各种异步操作都可以用同样的方式进行处理。
- Promise对象是一个构造函数，用来生成Promise实例。
- 特点：
- 对象的状态不受外界影响。promise对象代表一个异步操作，有三种状态：pending（进行中）、fukfikked（已成功）和rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
- 一旦状态改变，就不会再变，任何时候都是可以得到这个结果。
- 缺点：
- 无法取消promise，一旦建立他就会立即执行，无法中途取消。
- 如果不设置回调函数，promise内部跑出的错误无法反映到外部。当pending的时候，无法知道进展到了哪一步。
24. axios的特点是什么？
- axios是一个基于promise的http库，支持promise的所有API；
- 它可以拦截请求和响应；
- 它可以转换请求数据和响应数据，并对响应回来的数据转换为json类型的数据；
- 它安全性更高，客户端支持防御CSRF（跨域请求伪造）
25. vue的路由模式以及实现方式？
- hash模式：在浏览器中"#"及其后面的字符称为Hash，用window.location.hash读取；hash虽然在URL中，但不被包括在http请求中；只用来指导浏览器动作，对服务器安全无用，hash不会重加载页面。
- history模式：history采用h5新特性，且提供了两个新方式：pushState()，replaceState()可以对浏览器历史记录栈进行修改；popState事件监听状态变更。
26. vue中的ref是什么？
- ref用来给元素或者子组件注册引用信息。引用信息将会注册在父组件的$refs上。【如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例】
27. $route和 $router的区别？
- $route是“路由信息对象”，包括path、params、query、hash、fullpath、name等路由信息参数。
- $router是“路由实例对象”，包括路由的跳转方式、钩子函数等。
28. vue.js的两个核心是什么？
- 数据驱动、组件系统
29. vue如何兼容ie问题？
- babel-polyfill插件
30. 页面刷新vuex被清空的解决方法？
- sessionStorage存储到本地，定义beforeUnload事件，使得点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面
31. vue改变组件触发视图更新（如何设置响应式属性）？
- 初始化时写入data属性
- 调用方法：Vue.set(target,key,value)
- 以下方法的调用会更改原始数组：push()，pop()，shift()，unshift()，splice()，sort()，reverse()
32. DOM渲染在哪个周期中就完成了？
- mounted阶段。mounted不会承诺所有子组件都一起被挂载，使用vm.$nextTick可以实现整个视图已经渲染完毕。
33. 简述每个生命周期具体适合哪些操作？
- beforecreated：可以在这加个loading事件，在加载实例时触发；
- created：初始化完成时的事件写在这里，如结束loading、异步请求调用；
- mounted：挂在节点，获取DOM节点；
- updated：对数据统一处理；
- beforeDestory：可做确认停止事件。
34. 第一次加载会触发哪几个钩子？
- beforeCreate、created、beforeMount、mounted
原文地址：https://www.cnblogs.com/pleaseAnswer/p/11999857.html
时间： 2024-10-15 01:50:22