关于vue知识点汇总，附答案

Posted 2022-11-11 mshibiscus

1，说下vue的双向绑定数据的原理？

   答：vue实现数据双向绑定主要是采用数据劫持结合“发布者-订阅者”模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调。

2，解释单项数据流和双向数据绑定？

   答：单向数据流：顾名思义数据流是单向的，数据流动的方向可以跟踪，流动单一，追查问题的时候可以更快捷，缺点就是写起来不太方便，要使用ui发生变更就必须创建各种action来维护对应的state。

    双向数据流：数据之间是相同的，将数据变更的操作隐藏在框架内部，优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点是无法追踪局部状态的变化，增加了出错是debug的难度。

3，vue如何去除url中的#？

    答：vue-router默认使用的hash模式，所以在路由加载的时候，项目中的url会自带“#”，如果不想使用“#”，把路由模式改成history模式就可以了。

4，对MVC和MVVM的理解？

     答：MVC特点：所有通信都是单向的

          a，View传送指令到controller

         b，controller完成业务逻辑后，要求Model改变状态

         c，Model将新的数据发送到View，用户得到反馈

     MVVM分为Model，View，ViewModel三者，Model代表数据模型，数据和业务逻辑都在Model层中定义。View代表UI视图，负责数据的展示。ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作。Model和View并无直接的关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系，因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步

5，vue生命周期的理解？

      答：创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化，在created阶段，vue实例的数据对象data有了，$el还没有

             载入前/后：在beforeMount阶段，vue实例的$el和data都初始化，但还是挂载之前为虚拟dom节点，data.message还未替换，在mounted阶段，vue实例挂载完成，data。message成功渲染。

            更新前/后：当data变化时，会触发beforeUpdata和updated方法。

            销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实列已经解除事件监听以及和dom的绑定，但是dom结构依然存在

6，$route和$router的区别？

      答：$router为VueRouter实例。想要导航到不同的url，可以使用$router.push方法。

             $route为当前router跳转对象里面可以获取name，path，query，params等

7，NextTick是做什么的？

    答：$nextTick是在下一次DOM更新循环结束之后执行的延迟回调，在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM。

8，vue组件data为什么必须是函数？

     答：因为js本身的特性带来的，如果data是一个对象，那么由于对象本身属于引用类型，当我们修改其中一个属性时，会影响到所有的vue实列的数据，如果将data作为一个函数返回一个对象，那么每一个实例的data属性都是独立的，不会相互影响。

9，计算属性computed和事件methods有什么区别？

     答：computed，计算属性时基于他们的依赖进行缓存的，只有在他的相关依赖发生改变时才会重新求职。

          methods,只要调用，就会重新渲染。

10，vue等单页面应用的优缺点？

       答：优点：良好的交互体验，良好的前后端工作分离模式，减轻服务器压力

            缺点：SEO难度较高，前进后退管理，初次加载耗时多

11，简述vue的响应式原理？

      答：当一个vue实例创建时，vue会遍历data选项的属性，用Object.defineProperty将他们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化，每一个组件实例都有相应的watcher程序实例，他会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而使他关联的组件得以更新。

12，delete和vue.delete删除数组的区别？

      答：delete只是被删除的元素变成了empty/undefined其他元素的键值还是不变。

            Vue.delete直接删除了数组，改变了数组的键值

13，vue的有点是什么？

      答：低耦合，视图可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当view变化的时候Model可以不变，当Model变化的时候view也可以不变化，

            可重用性，可以把一些视图逻辑放在一个viewModel里面，让很多view重用这段视图逻辑

           独立开发，开发人员可以更专注业务逻辑和数据的开发，设计人员可以专注于页面的设计

          可测试，界面素来是难于测试的，而现在测试可以针对ViewModel来写

14，vue如何实现按需加载配合webpack设置？

      答：webpack中提供了require.ensure()来实现按需加载，以前引入路由是通过import这样的方式引入，改为const定义的方式进行引入。

           不进行页面按需加载引入方式：import  home  from ‘./common/home.vue

          进行页面的按需加载的引入方式：const home=r=>require.ensure([],()=>r(require(‘./commom/home.vue‘)))

15,vuex是什么？怎么使用，那种功能场景使用它？

      答：vue框架中状态管理，在main.js中引入store，注入，新建一个目录store，……export，场景有单页面应用，组件之间的状态，音乐播放，登录状态，加入购物车等

16，vuex有哪几种属性？

    答：state，getter,Mutation,Action,Module

     vuex中的state特性：a，vuex就是一个仓库，仓库里面放了很多对象，其中state就是数据源存放地，对应于一般vue对象里面的data。

                                      b，state里面存放的数据都是响应式的，vue组件从store中读取数据，若是shore中的数据发生改变，依赖这个额数据的组件也会发生更新

                                     c，他通过mapState把全局的state和getters映射当前组件computed计算属性中

    vuex的Getter特性： a，getters可以对State进行计算操作，他就是store的计算属性

                                     b，虽然在组件内也可以做计算属性，但是getters可以在多组件之间复用

                                     c，如果一个状态只在一个组件内使用，是可以不用getters

   vuex的Mutation特性：Action类似mutation，不同的是，action提交的是mutation，而不是直接更改状态，action异步操作

17，vue-router有哪几种导航钩子？

      答：全局导航:beforeEach(to,from,next),跳转前进行拦截，  afferEach(to,from)

            组件内导航：beforeRouteEnter， beforeRouteUpdata，beforeRouteLeave

18，vue组件异步加载的方法？

     答：第一种，使用()=>import()

          第二种，使用resolve=>require([‘./home‘],resolve)

         第三种，require.ensure([’./tab0.vue’], () => resolve(require(’./tab0.vue’)) , ‘tab0’）

19，node.js搭建一个简单的服务器？    

 const http = require(‘http‘);
    http.createServer((req, res) => 
      // 设置请求头
      res.setHeader(‘Content-Type‘, ‘text/plain; charset=utf-8‘);
      res.end(‘hello node‘);
    ).listen(8888, () => 
      console.log(‘服务已经启动‘);
    )