ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2019-09-19 13:02:29  阅读:154  来源: 互联网

标签:知识点 vue 数据 汇总 组件 Model data View


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('服务已经启动');
    })

 

    

 

标签:知识点,vue,数据,汇总,组件,Model,data,View
来源: https://www.cnblogs.com/MsHibiscus/p/11548619.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有