vue相关知识

Posted 2020-11-23 pleaseanswer

1. vue和react的相同点

1. 都支持服务器渲染；

2. 都有虚拟DOM、组件化开发，都通过props完成父子组件间的数据传递，都实现组件化规范；

3. 都有仓库（管理状态）：react有redux、vue有vuex；

2. vue和react的区别：

1. react只针对MVC框架的view层，而vue是一个完整的MVVM模式；

2. 虚拟DOM不一样：vue会通过跟踪依赖实现只对状态更新部分进行重新渲染；而react会在状态有改变时，重新渲染每个组件，所以在react中会有shouldComponentUpdate生命周期函数；

3. 数据绑定：vue实现了数据的双向绑定，而react的数据流向是单向的；

4. 组件写法不一样：vue的写法是webpack+vue-loader的单文件组件格式；而react的写法是JSX+行内样式；

5. state对象在react中只能通过setState改变状态；在vue中，state对象不是必需的，数据由data属性在vue对象中管理。

3. vue的原理：

• vue是一个构建数据驱动的web界面的渐进式框架，采用MVVM模式实现视图层与数据层的数据修改、更新监听。其工作原理是vue在实例化的过程中会遍历data下的数据，通过Object.defineProperty()方法将它们设置为存储器属性（即具有getter、setter属性）。

4. vue的特点：

1. 简洁：页面由html模板+ JSON数据+ Vue实例组成；
2. 数据驱动：自动计算属性和追踪依赖的模板表达式；
3. 组件化：用可复用、解耦的组件来构造页面；
4. 轻量：代码量小，不依赖其他库；
5. 快速：精确有效批量DOM跟新。

5.scss是什么：

• scss是一款css预处理语言，可编写函数，定义变量，可嵌套。

6.为什么vue中的data必须是一个函数：

• 对象是引用类型，在重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改。使用返回对象的函数，由于每次返回的是一个新的对象，引用地址不同，就不会出现这个问题。

7.active-class是哪个组件的属性：

• vue-router模块的router-link组件。

8.vue-router有哪几种导航钩子：

1. 全局导航钩子，可以用在路由跳转前做判断拦截

2. 组件内的钩子

3. 单独路由独享钩子

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路由传参

1. 使用query方式传入的参数使用this.$route.query接收

2. 使用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的特点是什么？

1. axios是一个基于promise的http库，支持promise的所有API；

2. 它可以拦截请求和响应；

3. 它可以转换请求数据和响应数据，并对响应回来的数据转换为json类型的数据；

4. 它安全性更高，客户端支持防御CSRF（跨域请求伪造）

25. vue的路由模式以及实现方式？

1. hash模式：在浏览器中"#"及其后面的字符称为Hash，用window.location.hash读取；hash虽然在URL中，但不被包括在http请求中；只用来指导浏览器动作，对服务器安全无用，hash不会重加载页面。

2. 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改变组件触发视图更新（如何设置响应式属性）？

1. 初始化时写入data属性

2. 调用方法：Vue.set(target,key,value)

3. 以下方法的调用会更改原始数组：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