VUE重点知识

1、MVC和MVVM的区别？

MVC 是后端分层开发概念
       M是 model层  作用 ：和数据库做交互
       V是View 视图层  作用 ：展示数据和交互
       C是controller 调度层  作用 ： 接收数据，响应数据，返回数据

MVVM 是前端视图层的概念
  M就是model层  作用：逻辑处理
  V就是View层  作用：展示数据
  VM就是ViewModel  作用：承上启下

2、使⽤vue的好处？

vue是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计

3. vue和react有什么不同？

vue和react的不同主要分为：
     （1）react是基于数据不可变的，数据流是单向的
         vue中的设计思想是响应式的，是基于数据可变的

    （2） react使⽤类的⽅式定义组件
         vue使⽤声明的⽅式定义组件
    （3）react官⽅只提供了核⼼api，⼤部分的内容是由社区来维护的
        vue官⽅提供了vue开发的全家桶

相同点为：
      （1）都是用于构建用户界面的
      （2）都使用了组件化的思想
      （3）都是用了虚拟DOM

4. vue的双向绑定是怎么实现的？

v-model是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()的方法来劫持各个属性的getter和setter，在数据变动时发布消息给订阅者，触发相应的回调

5. VUEX是做什么的？和 localStorage有什么区别？

Vuex是vue框架中状态管理：采用集中式存储管理应用的所有组件的状态

localStorage主要是用来作为本地存储使用的

区别： VUEX里的值在页面刷新后就会消失 而 localStorage 是本地存储 除非手动消除，否则一直存在

6、localStorage 和 sessionStorage 的区别？

相同点:都是用来作为本地存储使用的

区别： localStorage 是本地长期存储 除非手动消除，否则一直存在
      sessionStorage是本地暂时储存，浏览器关闭之后会清除

7、如何解决⻚⾯刷新vuex被清空的问题？

方法一：

将vuex中的数据存⼊sessionStorage 或 locationStorage中

方法二：

在⻚⾯刷新时重新进⾏数据的请求再存⼊vuex中 （不建议）

8、VUEX有哪几个属性？

有五种，分别是state、Getter、mutation、Action 、module

 state：vuex的基本数据，用来存储变量
 
 Getter：相当于state的计算属性 （对state的初加工）
 
 mutation ：提交更新数据的方法 只能是同步的
 
 Action : 提交更新数据的方法 提交的是 mutation 而不是直接变更状态 可以包含任何异步操作
 
 module ：模块化vuex 可以让每个模块都拥有自己的state、Getter、mutation、Action 、module。方便管理

9、能不能在method中使用箭头函数？

理论上可以使用，但是建议不使用 因为箭头函数的this指向与一般函数不同，一般函数执行调用它的对象


而箭头函数的this指向的是它的父级，会使在箭头函数中使用this.$store.state等方法时出现问题

10、vue中的生命周期有哪些？

beforeCreate ：data中的数据还没有挂载到vue实例上，一般用于页面重定向

created ：第一个可以操作data中数据和method中的方法，一般用于接口请求

beforeMount ：虚拟DOM挂载之前，页面元素还没有更新
          
Mounted ：第一个可以操作DOM元素的生命周期

beforeUpdate ：页面中的数据不是最新的，但是data中的数据是最新的

Updated ：页面已经更新，是最新的数据

beforeDestory ：清空定时器和页面接收

destoryed ：页面销毁

11、vue中父子组件生命周期的执行顺序？

父组件先创建，然后子组件创建，子组件先挂载，父组件挂载

父beforeCreate ->父created -> 父beforeMount -> 子beforeCreate -> 子created ->子beforeMount -> 
 子mounted -> 父mounted -> 父beforeUpdate -> 子beforeUpdate -> 子updated ->父updated ->父beforeDestory
子beforeDestory ->子destoryed ->父destoryed

12、vue中有哪些指令？

v-cloak 防止界面闪烁
v-html 和 v-text 都可以替换标签里面的内容 v-html会解析富文本 而v-text则不会
v-bind 绑定属性的方法 简写 ：
v-on 绑定元素的方法 简写 @
v-model 双向绑定
v-for 循环渲染方法
v-if 删除元素
v-show 隐藏元素

13、computed、watch、methods的区别 ?

watch是⽤来监听数据的改变的 当所监听的数据发⽣改变时就会触发所定义的事件，它的值可以是⼀个对象

methods 与 computed类似他们的值只能是⽅法

但是不同的是 computed中的⽅法是以变量的⽅式使⽤的并且会存到缓存中

14、axios 和 ajax 有什么不同？

（1）axios 是对ajax的封装
（2）axios返回的是promise对象可以使用promise的api ajax是通过回调函数获取数据

15、vue中ref是指的什么？

在标签或者组件中加⼊属性ref = ‘name’ 然后可以通过this.$refs.name 获取到dom元素或者组件元素

16、什么是跨域调用？

跨域是指从一个域名的网页去请求另一个域名的资源。
只要 协议，域名，端口三者中有任何一个的不同，就被当作是跨域

17、怎么解决跨域问题？

方法一：

配置代理

方法二：

服务端支持跨域调用（使用jsonP）

18、封装 Vue 组件的好处？

可以提升整个项目的开发效率
解决了传统项目开发中的效率低、难维护 、复用性等问题

19、Vue组件如何传值？

（1）父组件向子组件传递数据

父组件内设置要传的数据,在父组件的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数props接收即可

(2) 子组件向父组件传递数据

子组件通过Vue实例方法 $emit 进行触发并且可以携带参数，父组件中通过自定义方法接收传递过来的数据

20、Vue中常见的修饰符？

（1）.prevent 阻止默认事件
（2） .stop 阻止单击冒泡事件
（3） .self 当事件触发该元素本身而不是子元素时触发
（4） .capture 添加捕获模式

21、VueX的出现解决了什么问题？

（1）多个组件依赖通一状态时，多层嵌套的组件间的传参会非常繁琐
（2） 不同组件的行为需要变更同一状态时