Vue基础知识积累

综述：积累下vue的基础知识，提高自己的技术视野

1.Vue的十一大钩子函数？按照Vue实例的顺序创建的钩子函数，便于我们组织业务逻辑代码？各个钩子函数时期都进行了什么操作，我们一般在各个钩子上干些什么操作呢？

• beforeCreate   
• Created   
• beforeMount 
•  Mounted   
• beforeUpdate   
•  Updated     
• beforeDestory   
• Destoryed  
• activted ：keep-alive 组件激活时调用。
• deactivated  ：keep-alive 组件停用时调用。
• errorCaptured ：当子组件出现错误时，进行捕获的钩子函数，只能在父组件中进行定义，避免冒泡到父组件上

2.methods和Computed是什么？有什么区别呢？

computed中的函数只有当页面中的数据发生变化时就会触发，而methods不仅如此，当页面首次刷新进来时即会执行其中定义的函数

3.Vue的选项有哪些？分别的作用是？

• el属性（element）

用来指示Vue编译器，从什么地方开始解析Vue的语法，可以说是一个占位符

•  data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中

•   template属性

用来设置模板，会替换野蛮元素，包括占位符

• methods属性

放置页面中的业务逻辑，js方法一般都放置在methods中

• render属性

创建真正的virtual DOM，其实在vue中也有类似于react中的jsx语法，jsx语法提倡all in js,将html，css和js全部写到js中去，产生新的文件并插入到相应的页面中去；

• computed属性

用来计算一些东西，和method存在不同之处，要注意区分

• watch属性

watch:function(new,old){}
监听data中的数据的变化，调用相应的函数，比如输入校验等
两个参数，一个返回新值，一个返回旧值

主要用来监听data中的变量的值的变化，从而绑定相应的事件；还能进行$route,路由变化的监听，当路由中携带的参数变化时，会调用相应的绑定的函数；非常好用；

4.Vue中子组件向父组件，子组件向父组件，兄弟组件之间传递信息的方法是？

• 父组件向子组件传递     props方法

• 子组件向父组件传递     $emit方法，让后父组件监听子组件的事件，获取相应的方法传递过来的参数

• 兄弟组件之间传递信息   $emit+$on方法，代码示例如下：

• 非父子关系的组件，使用事件总线的方式进行消息传递

let vm=new Vue();
//大哥向小弟传递info
<div @click="ge"><div>
methods:{
   ge(){
        vm.$emit("blur","info");  //事件触发         
       }
}
//小弟向大哥传递信息
<div></div>
created(){
    vm.$on("blur",(arg)=>{
     this.test=arg;  //将获取到的info传递给data中的test属性
})
}

5.VueX组件间通信的方法是？五大选项的作用是？

vue的五大选项分别是：state getters  actions mutations  module

调用VueX中的方法存储信息的方法是：

this.$store.dispatch("setCityName","xian");

调用VueX中定义的方法获取数据的方法：

this.$store.getters.getCityFn

6.Vue中的常见的指令有哪些？

v-text    v-html   v-show   v-if   v-else    v-else-if    v-for   v-on    v-bind    v-model    v-pre   v-cloak   v-once

vue.js最常用的指令是v-bind和v-on

v-bind 和v-on有缩写,v-bind缩写为 ：  v-on缩写为@

7.什么是服务器端渲染(SSR=server side  render)？什么是使用node.js构建中间件?有啥具体的作用？

SSR服务端产生的背景，当单页面SPA出现后，虽然在页面加载之后，出现了如丝滑一样的组件体验，但是出现了两个无法回避的问题

问题一：SEO问题，因为大多数的SPA页面在npm run build打包之后，大部分是js文件，也就是页面的只要内容是js动态产生的，然而浏览器蜘蛛在爬取我们的页面的时候，仅仅只会爬去html内容，不会去执行JavaScript代码，这就造成了浏览器不能爬取到我们的页面的主要内容，SEO问题就会存在，对于某些SEO排名非常重要的应用，这简直就是一个灾难。

问题二：首页白屏问题，因为单页面是第一次将所有的组件内容全部加载到客户端(虽然也存在按需加载)，再通过路由控制各个组件的切换。在拿到了组件之后，需要再去请求数据，就会存在较长的白屏时间，用户体验不好。SSR相当于在客户端和服务器中间搭建一个中间层，SSR请求到后端的数据，将数据插入到DOM中，拼装成静态的html之后发送给客户端，客户端拿到静态的html文件直接解析就可以了。所以体验会更好。

8.vue中子父组件之间通信的方法有哪些？各自实现的原理？

• 父组件向子组件传值使用props，子组件想父组件使用$emit事件
• eventBus事件总线，其原理是在全局上new Vue实现一个公共的实例，再使用Vue.prototype.eventBus=new Vue将这个实例挂载到Vue对象上,vue.use(eventBus);
• 使用vuex实现公共数据池

9.Vue中的Vue.nextTick(callback)和Vue.$nextTick(callback)的应用，分别用在什么情况下？

• Vue.nextTick(callback) 当数据发生变化，更新后执行回调
• Vue.$nextTick(callback) 当dom发生变化，更新后执行的回调

  var sm=new Vue({
    el:'#demo',
    data:function(){
        return {
          list:[0,1,2,3,4,5,6,7,8,9,10]
        }
    },
    methods:{
      push:function(){
        this.list.push(11);
        Vue.nextTick(function(){
            alert('数据已经更新')
        });
        this.$nextTick(function(){
            alert('v-for渲染已经完成')
        })
      }
    }
  });
sm.push();

10.vue的两个核心的内容？

• 数据驱动：数据双向绑定，避免dom操作，既加快了开发效率，又提高了页面性能；

• 组件系统：将一个一个页面拆分成一个个组件，进行组件之间的切换，实现页面切换的效果

11.构建vue项目基础项目的脚手架，vue-cli可以方便的构建一个vue项目；

在这个脚手架构建的基础上开发非常的快速,除此之外，使用这个工具，可以让我们的前端项目变成pwa快应用。vue已经实现对他的支持；

vue-cli搭建vue项目的脚手架工具，可以快速搭建项目结构，配置项目基本信息；

12.vue router中的scrollBehavior钩子函数的作用？

使用路由进行页面切换时，当切换到新路由时，想要页面滚动到顶部，或者保持原先的滚动位置就像重新加载页面一样。注意这个功能只支持history.pushstate的浏览器中可用；

13.vue router中配置了多个组件，到底哪个才是默认显示的组件呢？怎样控制这个默认的组件？

路由中组件的path设置为“/”启动项目后就会显示默认的这个路径对应的组件；

如果没有上述内容，{path:"*",redirect:"/operation-plan"};则是先进入这里，然后再跳转到这个redirect路径对应的组件；

14.如何使用vue的选项watch实现对页面跳转的监控?为啥按照正常的逻辑写代码会出现不起作用的现象呢？

实现对路由跳转的监控，vue-router给我们提供了相应的方法；

监控路由参数变化，则使用watch{}，监控路由参数变化即可，代码如下所示：

   watch: {
        '$route' (to, from) {
            console.log(to)
        }
    },

15.@click,@click.native,@click.stop.native三者之间有什么区别？(在事件后边加.的同属于事件处理器)

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

16.{{item.plan | transformDate}},这是什么意思?其中前者是一个时间变量，后者是一个时间格式过滤器，也就是一个自动义的过滤器函数。

    filters: {
        transformDate (value) {
            if (!value) {
                return ''
            } else {
                return moment(value).format('M/DD HH:mm')
                // console.log(moment(value))
            }
        }
    },

17.：class,  :type,  :justify,  :disabled , :beforeclose的作用分别是什么？

相当于v-bind:class 等等，其中的：是v-bind的缩写

18.@refresh的作用是？，这里相当于一个钩子函数，当刷新的时候，触发这里挂载的函数？去更新数据；vant组件中定义的方法？

在vant的比如上拉，下拉刷新组件中，当刷新页面的时候，触发相应的函数，都是vant向外暴露的接口方法；

19.vue中的循环列表的必须要将key的原因是？

主要原因是给其加一个相互不同的标志，在做虚拟dom不同检查时，能快速进行定位，提高性能；一定不能简单用index做key,这样容易和别的地方重名

20.vue中的插槽？作用域插槽(scope-slot)和普通插槽的区别是？如何使用？

插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题在这里就点出来了，是显示不显示和怎样显示。

由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。 非插槽模板指的是html模板，比如‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由组件自身控制；插槽模板是slot，它是一个空壳子，因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板将来就显示在什么位置。

21.layout文件夹下的routerView.vue文件是干什么用的？

这个页面相当于一个总的页面，在APP页面中可公共加一个头部和尾部，在中间加一个<router-view></router-view>容器组件，将别的需要切换的组件在其中进行切换即可；十分重要的思想，非常有用；在做APP的时候非常的有用，在做管理系统的时候非常有用；

22.路由按照模块拆分，提高路由的可维护性？

如果将一个路由全部定义到一个router.js文件中，当项目很大时，就难以维护，可以拆分成多个模块；

23.按需加载路由中的组件，提高项目启动性能？在路由中定义的方法如下 ：import引入组件

const routerConfig = [
    {
        path: '/operation-plan',
        name: 'operation-plan',
        component: RouteView,
        redirect: '/operation-plan/plan-list',
        children: [
            {
                path: '/operation-plan/plan-list',
                name: 'plan-list',
                component: () => import('@/views/operation-plan/dynamic-plan/PlanList.vue')
            },
            {
                path: '/operation-plan/plan-detail',
                name: 'plan-detail',
                component: () => import('@/views/operation-plan/dynamic-plan/PlanDetail.vue')
            }
        ]
    },

24.路由拦截分为全局拦截和局部拦截？

全局拦截：

export default new Router({
    // mode: 'history',
    mode: 'hash',
    // base: './',
    scrollBehavior (to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return { x: 0, y: 0 }
        }
    },
    routes: routerConfig
})

局部拦截：

export default {
    beforeRouteEnter  (to, from, next) {
        next(vm => {
            if (from.query.status) {
                const status = from.query.status
                if (status === '待评估') {
                    vm.activeTab = 0
                } else {
                    vm.activeTab = 1
                }
            }
        })
    },

25.在vant（基于vue的移动端UI框架中）组件中，在组件内部添加点击事件的方法是？直接添加会无法触发？尝试解决这个问题？

比如说在做上拉组件上加两个按钮，点击后触发拍照和访问相册的功能，vant本身的点击事件和我们希望的点击事件无法区分；

26.Vue中的插糟的作用？主要有什么作用？

Vue的组件中，有的地方的内容是通过父组件传来的，slot只能读到父组件中的data,其属于父组件，不属于子组件。就是其插槽名字的由来；

27.在Vue中的一定不能使用dom操作吗？如果一定要使用有什么方法？Vue中的ref属性是干啥用的？

vue中是可以dom操作的，Vue本身也给我们提供了方法ref来帮助我们实现dom的操作；使用如下：

定义ref(相当于一个id):

<div ref="elementId"></div>

获取这个div的相应的信息（特别说明，需要在mouted钩子之后，页面dom渲染完毕之后才能获取到）：

mounted:function(){
    var marginLeft=this.$ref.elementId.clientWidth/2;
    //这里的elementId就是插糟的ref的名字
}

28.Vue中定义内联样式？其中定义的是一个data中的变量；

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

29.vue中路由之间跳转的方法？请说出三种方式？

• 通过<router-link to="/register"></router-link>实现页面跳转
• 直接修改地址栏中的地址
• 通过js编程的方式，将跳转的路由的地址push到$router中去

30.vue如何实现按需加载（配合webpack设置）？

参考链接：https://blog.csdn.net/wang1006008051/article/details/78066810

 类似于图片的懒加载，当我们需要查看图片的时候才去加载，而不是一开始将所有的组件内容都加载处理，这样造成了加载的内容过多,单页应用也是一样，用户可能没有通过点击跳转到其他的的页面，而是只在主页面进行了停留，那么我们就没有必要把其他页面的资源全部加载过来。如果用户点进去再加载。这样就可以大大提高请求时间，提高用户的体验程度。

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

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

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

引自：https://cnodejs.org/topic/586823335eac96bb04d3e305

31.指令v-el的作用是什么？

el 的作用大家都知道，用于指明 Vue 实例的挂载目标。我们重点关注上面两个红色叹号部分，总结一下就是：如果存在 render 函数或 template 属性，则挂载元素会被 Vue 生成的 DOM 替换；否则，挂载元素所在的 HTML 会被提取出来用作模版;

32.在vue中使用插件的步骤？(slot)

在子元素中的slot会被父元素中相对应的html代码块所替代，就是所谓的插槽；

33.active-class是哪个组件的属性？具体有啥作用？

 

34.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？示例如下两种都行：

  addHand  = {
             handType: '1', // 异常处理方案（0-加车，1-分流）？
             carType:currentListData.planeType, // 车型？
             promiseTime:currentListData.promiseTime, // 承诺时效达成率
             keyId:currentListData.keyId //  还要传给我一个批次ID
            }
     this.$router.push({name:'hand-detail', params: addHand })
   //this.$router.push({ path: '/operation-hand/hand-detail', query: { programId: item.programId, status: item.programStatus}})

35.vue-router有哪几种导航钩子？

36.vue-loader是什么？使用它的用途有哪些？

37.scss是什么？在vue-cli中的安装使用步骤是？有哪几大特性？

vue-cli脚手架中自带有scss的功能；

scss相对于普通的css的优势有：可以实现代码的嵌套，可以写变量，进行统一管理，

38.为什么避免v-if和v-for用在一起？

当vue处理指令时，v-for比v-if具有更高的优先级，这意味着v-if将分别重复运行于每一个v-for循环中，这对于性能来说不好，我们可以将v-if放置在容器元素上，不会重复遍历值，取而代之的是，我们只检查一次，且不会在v-if为否时运行v-if；

39.vueX中的mapState，mapGetters方法的作用是什么？具体有哪些作用呢？

import { mapState, mapGetters } from 'vuex'

40.在base.less文件中的touch-action:manipulation;的作用是什么？ 

CSS属性 touch-action 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）。

manipulation：

浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。 这是“pan-x pan-y pinch-zoom”（为了兼容性本身仍然有效）的别名。

41.路由懒加载实现，当需要相应的模块组件的代码是，再去加载相应的组件内容，而不是一次性就将所有的资源加载出来？

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载，代码如下所示：

 {
        path: '/demo',
        name: 'demo',
        component: RouteView,
        redirect: '/demo/list',
        children: [
            {
                path: 'list',
                name: 'demo-list',
                component: () => import('@/views/Demo/index.vue')
            },
            {
                path: 'photo-upload',
                name: 'photo-upload',
                component: () => import('@/views/Demo/PhotoUploadDemo.vue')
            }
        ]
    },

42.vue中的mixin的使用？具体指的是什么意思？用简单的话说明下？

 

43.vue中的过度动画的使用？使用动画效果实现组件之间的切换？

 

44.四舍五入中的问题?这样做之后，会产生一个56.00000000000000001的数字，具体的原因是什么？javascript所能精确表达的数据范围是？安全数范围？

console.log((Number(val).toFixed(2))*100,Number(val) )

45.vue常用的修饰符？有比较全面的应用？

• .prevent: 提交事件不再重载页面；
• .stop: 阻止单击事件冒泡；
• .self: 当事件发生在该元素本身而不是子元素的时候会触发；
• .capture: 事件侦听，事件发生的时候会调用；

46.vue中的事件和js的原生事件之间有什么区别？@click和@click.native之间的区别?

 

47.打包后的http://localhost:8000/#/operation-plan/plan-list地址和public/index.html文件之间的关系？

为什么在本地启动项目时，一定要public中的内容才能正常的显示处理

48.在vue项目中使用的webpack的loader和plugin之间的区别是？

借助loader，webpack可以处理一切资源，js的资源或者非js 的资源都可以；

通过plugin，我们可以在webpack的构建过程中的每个事件节点加入我们自己的行为来影响webpack的构建。

loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上。

plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。当然loader也时变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。

49.在ops丰声端的异常处理中，默认先显示两个按钮，当获取到用户名之后，再根据权限去确定是否要显示demo按钮？现在的问题是必须先获取到用户名，再显示demo按钮；但是在控制这个顺序的时候出现了问题。解决方案如下：

方案一：监控userid的变化，当变化时，再更新一遍module的值，形成依赖关系

方案二：在更新userCode之后，再去更新module的值，形成依赖关系

 watch: {
        userCode (val) {
            if (val && val !== '') {
                this.loadDebugger();
                 //方法一
                //this.$store.dispatch('setModulePermission',[{ 'moduleName': '动态加减车', 'status': true }, { 'moduleName': '批量异常处理', 'status': true } ])
            }
        },
    },
    mounted () {
        const self=this;
          //方法二
        this.$store.dispatch('setUserCode').then(()=>{
                this.$store.dispatch('setModulePermission',[{ 'moduleName': '动态加减车', 'status': true }, { 'moduleName': '批量异常处理', 'status': true } ])
            }
        );
        this.$store.dispatch('isUpdatePervData') // 通知
        this.active = this.$store.state.app.ACTIVE_MODULE
    },

50.在vue框架中，我们可以使用$ref来获取dom节点，进行一些dom的操作，例子如下：

• 下面示例：控制input输入框的文字个数

<div id="app">
<input ref="count" type="text" v-model="active.name" required name="name" value="">
</div>

new Vue({
    el:'#app',
    data:{
        active:{'name':''}
    },
    watch:{
        active:{
           handler:function(){
                var _this = this;
                var _sum = 4; //字数限制为4个
                _this.$refs.count.setAttribute("maxlength",_sum);
           },
           deep:true
        }
    },
})

• 使用在子组件上，可以用来获取子组件的属性值,假设子组件里面都有一个属性news

<div id="app">
    <hdnews ref="hdnews"></hdnews>
    <hdinfo ref="hdinfo"></hdinfo>
</div>

new Vue({
    el:'#app',
    mounted:function () {
        console.log(this.$refs.hdnews.news);
        console.log(this.$refs.hdinfo.news);
    }
})

51.在每个页面组件中的路由钩子，修改data中的数据的方法是什么？下面代码中的vm具体指的是什么？

 beforeRouteEnter (to, from, next) {
        next(vm => {
            if (from.query.status) {
                const status = from.query.status
                if (status === '待处理') {
                    vm.activeTab = 0
                } else {
                    vm.activeTab = 1
                }
            }
        })
    }

52.在进行组件之间的跳转的时候，keep-alive做缓存的问题？

比如a->b->c->d,其中从第二级到第四级页面都依托于上一级的参数进行数据的查询，当进行返回时，因为拿不到原来的数据了（上一级传递过来的数据），就会查不到原来的数据，为了解决这个问题，vue推出<keep-alive></keep-alive>组件，这个组件包含的组件会被缓存，当从下一个页面返回时，会展示原来的数据；非常的重要的知识点；具体使用方法是：

• 在路由中配置需要缓存与否

   {
      path: '/ops-data/opsDataIndex',
      name: 'opsDataIndex',
      component: () => import('@/views/ops-data/opsDataIndex.vue'),
      meta: {
           keepAlive: true
      }
   },
   {
        path: '/ops-data/opsDataDetail',
        name: 'opsDataDetail',
        component: () => import('@/views/ops-data/opsDataDetail.vue'),
        meta: {
            keepAlive: true
        }
    },

• 使用缓存组件缓存页面数据

  <keep-alive>
            <router-view class="router-view" v-if="$route.meta.keepAlive">
            <!-- 这里是会被缓存的视图组件，比如 Home！ -->
            </router-view>
   </keep-alive>
   <router-view class="router-view" v-if="!$route.meta.keepAlive"></router-view>

使用的问题：

当使用了缓存之后，每次进入这个页面都是缓存的内容，这时候该咋办呢？

动态修改缓存策略来实现

53.在vue的main.js文件中，以下代码该怎样来理解呢？

new Vue({
  el: '#app',
  render: h => h(App)
})

render: h => h(App)是ES6的语法，实际上它等同于：

render: function(h) {
　　return h(App)
}

54.v-html和双大括号的区别是？

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html指令：

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

---

Using mustaches: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.

这个 span 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

55.vscode代码编辑器中使用代码格式工具进行检查？

怎样进行统一编写，当所有代码编写完毕之后统一使用命令进行格式化修复；而不用受格式的困扰？

关闭eslint,或者给eslint.js文件改名，当代码需要提交之前，将名字再修改回来，统一使用yarn run lint命令来统一修改格式；

56.防止代码格式不统一的方法？

• 代码编译前，对格式进行检查，如果不符合，则直接不进行编译
• 代码提交之前，进行格式检查，不符合的拒绝提交代码

57.vue中的指令v-modal的作用是？这是不是一个自定义的指令呢？

 

58.使用vue-cli脚手架工具搭建的vue项目，其中的assets和static文件夹之间的区别？

  assets里面的会被webpack打包进你的代码里，而static里面的，就直接引用了。
一般在static里面放一些类库的文件，在assets里面放属于该项目的资源文件。

59. Vue.set视图更新?

60.自定义指令详解?

61.delete和Vue.delete删除数组的区别?

62. Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
63.Vue2中注册在router-link上事件无效解决方法?

64.RouterLink在IE和Firefox中不起作用（路由不跳转）的问题?

 

65.什么是 vue 生命周期?

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。
66.vue生命周期的作用是什么?

67.第一次页面加载会触发哪几个钩子?

68.简述每个周期具体适合哪些场景?

1. beforecreate : 
   完成实例初始化，初始化非响应式变量
   this指向创建的实例；
   可以在这加个loading事件；
   data computed watch methods上的方法和数据均不能访问
2. created
   实例创建完成
   完成数据(data props computed)的初始化 导入依赖项。
   可访问data computed watch methods上的方法和数据
   未挂载DOM,不能访问$el,$ref为空数组
   可在这结束loading，还做一些初始化，实现函数自执行,
   可以对data数据进行操作，可进行一些请求，请求不易过多，避免白屏时间太长。
   若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中
3. berofeMount
   有了el,编译了template|/outerHTML
   能找到对应的template,并编译成render函数
4. mounted
   完成创建vm.$el，和双向绑定，
   完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操作
   即有了DOM 且完成了双向绑定 可访问DOM节点,$ref
   可在这发起后端请求，拿回数据，配合路由钩子做一些事情；
   可对DOM 进行操作
5. beforeUpdate
   数据更新之前
   可在更新前访问现有的DOM,如手动移除添加的事件监听器；
6. updated :
   完成虚拟DOM的重新渲染和打补丁；
   组件DOM 已完成更新；
   可执行依赖的dom 操作
   注意：不要在此函数中操作数据，会陷入死循环的。
7. activated:
   在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，
   如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发
8. deactivated 
   for keep-alive 组件被移除时使用
9. beforeDestroy： 
   在执行app.$destroy()之前
   可做一些删除提示，如：你确认删除XX吗？ 
   可用于销毁定时器，解绑全局时间 销毁插件对象

10. destroyed ：

当前组件已被删除，销毁监听事件 组件 事件 子实例也被销毁这时组件已经没有了，你无法操作里面的任何东西了

69.created和mounted的区别?

70.vue获取数据在哪个周期函数？

71.请详细说下你对vue生命周期的理解？

 

72.vue中的router-view组件展示的组件内容是怎样插入到其中的？是在哪里设置这个组件的内容的？

主要是在路由中设置的，设置方法如下所示，通过设置多个router-view可以开辟多个独立的显示区域：

{
        path: '/personal-center',
        name: 'personal-center',
        component: BasicLayout, //这是第一级的router-view组件内容
        redirect: '/personal-center/list',
        meta: { menuCode: 'ID10' },
        children: [
            {
                path: 'list',
                name: 'personal-center-list',
                meta: { menuCode: 'ID1001' },
                component: () => import('@/views/personal-center/PersonalCenterList.vue')
            },
            {
                path: '/personal-center/ops-data',
                name: 'ops-data',
                component: RouteView, //这是第二级的router-view组件内容
                redirect: '/personal-center/ops-data/opsDataIndex',
                meta: { menuCode: 'ALL' },
                children: [
                    {
                        path: '/personal-center/ops-data/opsDataIndex',
                        name: 'opsDataIndex',
                        meta: { menuCode: 'ALL' },
                        component: () => import('@/views/ops-data/opsDataIndex.vue')
                    },

73.vue项目中实现热更新的原理是什么？当修改了内容之后怎样去通知浏览器进行更新？

74.vue中的双大括号和v-text指令之间有什么区别？和v-html之间有什么区别呢？v-bind有啥区别？

 

对于以上4中方式，v-html只是为了渲染html标签。v-bind用来绑定属性。而v-text和“Mustache”语法都能渲染普通文本数据，有一点区别就是，在渲染的数据比较多的时候，可能会把“Mustache”语法的大括号显示出来，为了解决这种问题，可以采用以下两种方式：①使用v-text渲染数据②使用“Mustache”语法渲染数据，但是同时使用v-cloak指令，在css中，使用：
css:

[v-cloak]: {
    display: none;
}

这样的话，就不会显示“Mustache”的大括号。而且，他们的区别，还没有完，不然我们直接用v-text不就行了，还有一点区别是，v-text渲染数据的时候，是渲染全部的数据，也就是说不能渲染局部的数据，如下代码：

html:

<div id="app">
    <p v-text="msg"></p>
</div>

js:

new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue.js'
    }
});

v-text会把msg的数据全部渲染出来，而往往，后台返回的数据，不是全部的内容，比如以下代码：
html:

<div id="app">
    <p v-text="msg">苹果的价格为</p>
</div>

js:

new Vue({
    el: '#app',
    data: {
        msg: 5
    }
});

我们显示苹果价格的时候，往往后台存储的只是一个价格，用v-text就无法渲染，所以只能用“Mustache”语法，如下：
html:

<div id="app">
    <p>苹果的价格为{{ msg }}元</p>
</div>

js:

new Vue({
    el: '#app',
    data: {
        msg: 5
    }
});

为了防止网络慢等原因，在数据返回之前，可能显示的结果为:苹果的价格为{{ msg }}元，为了解决这种问题，我们添加v-cloak指令和css代码：
html:

<div id="app">
    <p v-cloak>苹果的价格为{{ msg }}元</p>
</div>

[v-cloak]: {
    display: none;
}

总而言之就是一句话，解析html标签用v-html指令；绑定属性使用v-bind指令。

渲染大片数据用v-text或者“Mustache”（也就是双大括号）语法配置v-cloak指令和css的display:none；渲染大片数据中的局部用“Mustache”语法，配合v-cloak指令和css。

双大括号当数据量很大时，可能会显示出来这个大括号，可以使用v-cloak指令并配合上css:display:none; 将其隐藏起来。v-text如果需要显示的数据是拼接的就无法显示了，只能用大括号。这就是其两大主要的区别。在平时的应用中去感受设计思路和原理；

75.vue项目中引入外部的公共的less文件的方法是？

<style lang="less">
   @import "./style/demo.less"
</style>

76.在vuex中一般使用mutation-types.js文件来存储数据名称？以下代码代表啥意思？

export const SET_SINGER = 'SET_SINGER'
export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'
export const SET_PLAYLIST = 'SET_PLAYLIST'

const mutations = {
  [types.SET_SINGER](state, singer) {
    state.singer = singer
  },
  [types.SET_PLAYING_STATE](state, flag) {
    state.playing = flag
  },
  [types.SET_FULL_SCREEN](state, flag) {
    state.fullScreen = flag
  },
  [types.SET_PLAYLIST](state, list) {
    state.playlist = list
  }
}
export default mutations

将文件中所有的变量都以types对象属性的形式保存到types对象中。然后通过.的方式进行获取；

77.noscript标签的作用是什么？为啥要使用？

 <noscript>
      <strong>We're sorry but vue-antd-pro doesn't work properly without 
      JavaScript enabled. Please enable it to continue.</strong>
  </noscript>

NOSCRIPT标签用来定义在脚本未被执行时的替代内容。也可以用在检测浏览器是否支持脚本，若不支持脚本则可以显示NOSCRIPT标签里的innerText

78.vue项目中的$on的作用是什么？

可以使用该方法监控别的组件中定义的函数

79vue中的this.$el.querySelectorAll('[type=radio]');这种操作dom 方法的应用?有其必要性吗？

80.freeze方法的作用是啥？

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

  const keyCode = Object.freeze({
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40
  });

81.vue中的provide/inject的作用是啥？干啥用的？

82.render()函数的作用是啥？

83.前端组件是怎样从一个name为AList的对象被转化为一个a-list的组件的？中间走了哪些流程呢？

84.vue项目中踩过的坑有哪些？

在使用props父组件给子组件传值，$emit子组件给父组件传值时，发现当$emit中传的是一个对象时，在父组件中拿到的就是一个undefined，死活拿不到这个对象的值。最后将其转为一个字符串就能顺利拿到了？究其愿意是：

afterUpLoad (data) {
      console.log(data, 6666)
      this.$message.success(data)
}

这里的问题是$message.success()方法的问题，传入其中的对象在其打印之后就被转为了undefined。是一个大坑；

85.vue项目的优化？

86.V3.0的特性有了解吗？

87.vue中key的作用是?

88.虚拟dom的原理是？

js对象构建虚拟DOM——DOM diff算法计算两者将的差异——patch算法将差异进行实现，实现真实的dom的更新

89.虚拟dom的优缺点有哪些？

90.vue中的vm.$set()解决对象新增属性不能响应的问题？

91.Vue3.0中的Proxy和Object.defineProperty之间的优劣？为什么要进行更换呢？

92.vue怎么实现对对象和数组的监听？vue为什么不能实现当对象和数组的值被改变时，其不能将值渲染到页面上？

收到现代JavaScript浏览器的限制，其实主要是 Object.observe() 方法支持的不好，Vue不能检测到对象的添加或者删除。然而Vue在初始化实例时就对属性执行了setter/getter转化过程，所以属性必须开始就在对象上，这样才能让Vue转化它。 

　　所以对于前面的例子就不能理解了 --- 数组中index都可以看做是属性，当我们添加属性并赋值时，Vue并不能检测到对象中属性的添加或者删除，但是其的确是添加或删除了，故我们可以通过console看到变化，所以就没有办法做到响应式； 而在第二个例子中，我们是在已有的属性的基础上进行修改的，这些属性是在最开始就被Vue初始化实例时执行了setter/getter的转化过程，所以说他们的修改是有效的，model的数据可以实时的在view层中得到相应。

93.vue双向数据绑定的原理？

94.MVVM是啥？

95.vue-router中的hash和history实现的原理是？

96.路由的三种模式是？hash,history,abstract三者之间的区别是？

97.说下SSR，VUEX简单介绍下其作用是？

98.组件之间进行通信的方法？说出六种方法

99.V-model的实现原理是？

100.data为何一定要是function呢？为啥不能为对象？

111.keep-alive组件的作用是什么？他的include，exclude，max三大属性的作用是？

112.父组件怎样监听子组件的生命周期？

113.什么阶段才可以访问操作DOM？

114.哪个生命周期调用异步的请求？

115.vue的父组件和子组件生命周期钩子函数执行顺序是？

116.vue生命周期的理解？

117.直接给一个数组赋值，vue可以检测到吗？

不可以，因为Object.defineProperty()只能检测属性不能检测对象

118.computed和watch的区别和运用的场景是？

119.怎样理解vue的单向数据流？

120.class和style如何动态绑定?

121.v-show和v-if之间的区别是？

122.对SPA单页面的理解？他的优缺点分别是？什么情况下用多页面？什么场景下用单页面？

123.vue中的动态组件和异步组件？（：is的用法）

动态组件，在需要的时候采取渲染，tab切换时经常使用：

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

<!-- App.vue -->
<template>
    <div>
        <button @click="show = true">Load Tooltip</button>
        <div v-if="show">
            <Tooltip />
        </div>
    </div>
</template>

<script>
    export default {
        data: () => ({
            show: false
        }),
        components: {
            Tooltip: () => import('./components/Tooltip') // 异步组件，在需要的时候去加载
        }
    }
</script>

按需加载，在webpack也有代码分割的方法，打包的时候能看到1.js,2.js,3.js等等的相关的方法就是如此原因。

124.vue router有哪些组件？分别的作用是什么？

• router-link
• router-view

其中router-link组件有active-class的属性和exact-active-class属性。前者用户模糊匹配，一旦路径模糊匹配上了，就触发其上对应的属性。后者用于精准匹配，当路径精准匹配上时，才会触发相对应的属性值。

125.vueX 中的mapGetters()的作用？使用方法？

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性，computed具有缓存的功能，只有当vuex中的数据变化时，才会引起computed中的函数进行调用。避免性能浪费。

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([  // 这里的三个点是不能省略的
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

126.vue项目中，改变了数组和对象，但是却不能触发页面更新该如何来处理呢？

vue中的Object.definedProperty()的set和get在实现时，必须对已经注册的属性才能双向绑定。这样的问题只能通过在对象上先注册这个属性来解决。vue本身也提供了方法，如下所示：

Vue.set(object,key,value)
this.$set(object,key,value)

127.vue项目中如何引入jq或者jq-ui插件呢？说说具体的步骤？

 

128.vue中的事件修饰符是什么？

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

129.provide/project的作用是什么？

当涉及多级组件时，进行数据的传值操作，多级组件的传值。

 

130.this.$createElement()的作用是什么？

 

131.this.$listeners()的作用是什么？怎样使用？

 

132...mapGetters()，...mapState() 的作用？具体是什么意思呢？

 

133.vue中的生命周期以及各个钩子的应该做的事情？

134.nextTick的作用?其实现的原理中promise,MutationObserver,setImmedite,setTimeout之间的关系是什么？宏任务和微任务的关系？

• 是一种解决回调地狱问题的方案promise，属于微任务
• MutationObserver是h5新加的一个功能，其功能是监听dom节点的变动，在所有dom变动完成后，执行回调函数。
• setImmediate有兼容性问题，目前只支持Edge、Ie浏览器
• setTimeOut是一个延时函数，构成一个宏任务

135.请问Vue.observal实现一个对象的响应式的原理是什么？为什么通过这个方法包裹的对象就是响应式的呢？

MutationObserver是h5新加的一个功能，其功能是监听dom节点的变动，在所有dom变动完成后，执行回调函数。

136.请问hook:beforeDestroy这里为什么一定要写hook呢？其主要的作用是什么？

this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('pushState', this.bindCurrent)
        window.removeEventListener('popstate', this.bindCurrent)
      })

137.vue中的$once是什么？具体实现效果和原理是？

绑定事件，执行一次即可，比如如上述代码所示，在前边的代码中实现了对pushState 事件的监听，当组件销毁的时候，调用一次取消监听的方法即可。

138.请问mutation和action之间的区别是？

• 流程顺序-“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
• 角色定位-基于流程顺序，二者扮演不同的角色。

Mutation：专注于修改State，理论上是修改State的唯一途径。Action：业务代码、异步请求。

• 限制-角色不同，二者有不同的限制。

Mutation：必须同步执行。Action：可以异步，但不能直接操作State。

139.请问dispatch和commit之间的区别是什么？

dispatch 异步操作 this.$store.dispatch('actions的方法'，arg),dispatch专门用于操作action中的方法

commit 同步操作 this.$store.commit('mutations的方法'，arg)，commit专门用于操作mutation中的方法

140.使用vue.set()这里主要是使用vue.set去实现一个修改数组中的数据，实现其在界面上自动刷效果？好好考虑下？

Vue.set(object/array,index/key,value/data); //实现对像和数组的修改之后的响应式

先说明一下，Vue.set和this.$set的区别不大，主要都是用于更新数组和对象。不过Vue.set可以添加属性，this.$set则是修改属性。

141.vue中的自定义指令？

如果需要直接操作 DOM，那么就会用到自定义指令啦。

钩子函数说明bind只调用一次，第一次绑定指令到元素时调用，我们可以在此绑定只执行一次的初始化动作。

inserted被绑定元素插入父节点时调用（父节点只要存在即可调用，不必存在于 document 中）。

update无论绑定值是否发生变化，只要被绑定元素所在的模板被更新即可调用。

Vue.js 会通过比较更新前后的绑定值，忽略不必要的模板更新操作。

componentUpdated被绑定元素所在模板完成一次更新周期时调用。

unbind指令与元素解绑时调用，只调用一次。
 

export const auth = Vue.directive('auth', {
    bind: function (el, binding, vnode) {
        const oriAttr = el.style.display
        el.style.display = 'none'
        let havePermission = false
        if (binding.value && isString(binding.value)) {
            // eslint-disable-next-line no-unused-vars
            const permissionCode = binding.value.toUpperCase()
            // eslint-disable-next-line no-unused-vars
            const menuCode = vnode.context.$route.meta.menuCode
            const pagePerrmissionData = store.getters.permissionData[menuCode] ? store.getters.permissionData[menuCode] : null
            if ((Array.isArray(pagePerrmissionData) && pagePerrmissionData.length > 0)) {
                havePermission = pagePerrmissionData.some(item => {
                    return item.code === permissionCode
                })
            } else if (menuCode === 'ALL') {
                havePermission = true
            }
        }
        havePermission ? el.style.display = oriAttr : (el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none'))
    }
})
export default auth