vue部分习题

1、简述框架和函数库的区别

库更多是一个封装好的特定的集合，提供给开发者使用；

框架则是为解决一类问题而开发的产品；

库的使用非常灵活，但没有框架方便，这就是框架和库本质的区别。

2、什么是渐进式框架

可以先使用vue的基础功能，然后在此基础上逐渐使用你所需要的其他的功能

3、Vue有哪些优点

优点：

组件化开发

单页面路由

双向的数据绑定

单向数据流

易于结合其他第三库

轻巧、高性能

渐进式框架

是已数据驱动执行的

缺点：

生态系统不够完善

可扩展性稍差

吃内存

报错不明显

不支持IE8

入门简单,但是缺少高阶文档

不利于seo优化

4、简述mvvm模式

https://blog.csdn.net/qq_41257129/article/details/97491194

MVVM 是 Model-View-ViewModel 的缩写

Model: 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为

View: 用户操作界面（DOM）。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View

ViewModel： 业务逻辑层（创建Vue实例），View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View.

总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。

5、Vue常见属性和指令有哪些？（各写出7个以上）

属性：el、data、methods、computed、watch、component、props、filters、render

指令：v-text、v-html、v-if、v-else-if、v-else、v-bind:src或@:src、v-model、v-on或@click、v-show、v-for、v-pre、v-clock

6、计算属性和侦听属性有什么区别？怎样选择

区别：

computed不会主动监听数据变化，但是watch会去主动监听，也就是说watch会主动处理数据变化，computed是依赖数据变化才去计算。

computed在依赖数据未发生改变时/或者没有依赖数据，自动缓存到应用中，下次获取时不重新计算。

各自使用场景：

watch：适合处理 一个数据影响多个数据更适合处理数据相互独立的场景，主动监听

computed：适合处理一个数据受多个数据的影响 / 多个数据影响一个数据时。数据相互不独立的场景。

7、Vue的生命周期函数有哪些？

详细生命周期函数点此查看

创建：beforeCreate、created

挂载：beforeMount、mounted

更新：beforeUpdate、updated

销毁：beforeDestroy、destroyed

8、vue怎样自定义指令？

使用

  

{{nav}}

设置自定义指令 directive

9、简述axios的安装和引入

安装插件依赖包

npm install axios --save   在命令提示符中进行安装；

在项目中的main.js中引用

import axios from 'axios';

Vue.prototype.$axios = axios;

import qs from 'qs';

Vue.prototype.qs = qs;

10、DOM 渲染在哪个周期中就已经完成？

mounted中

11、请说明Vue父组件向子组件传值的方法（代码或文字描述均可）

父组件在调用子组件的时候通过添加自定义属性向子组件传值。子组件通过props接收。

在父调用子的时候添加自定义属性，如：传一个字符串< zi mydata=”father”>,子组件中使用props接收，简单的值可以用数组接收props:[‘mydata’]。当父组件没有传值的时候也可以有默认值，这时候就得使用对象进行接收

    props: {

      myclass: {

        default: "默认值"

      },

      text: {

        default: ""

      }

    },

12、请说出下列axios配置项的含义（五条）

method:创建请求时使用的方法

url:请求的服务器地址

header:即将被发送的自定义请求头

data:请求接口所需要传递的参数

params:即将与请求一起发送的 URL 参数

13、V-for中 key 值的作用

key的作用主要是为了高效的更新虚拟DOM！！！下次v-for不用再重新渲染

14、v-show和v-if指令的共同点和不同点?

相同点：v-show和v-if都能控制元素的显示和隐藏。

不同点：

实现本质方法不同

v-show本质就是通过设置css中的display设置为none，控制隐藏

v-if是动态的向DOM树内添加或者删除DOM元素

编译的区别

v-show其实就是在控制css

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

编译的条件

v-show都会编译，初始值为false，只是将display设为none，但它也编译了

v-if初始值为false，就不会编译了

如果要频繁切换某节点时，使用v-show，如果不需要频繁切换某节点时，使用v-if

15、子组件向父组件传参的方式？（请写出关键代码）

子组件通过 $emit 触发自定义事件（一个是父组件事件的名字，一个是传递的参数），通过回传参数向父组件传值。

子：this.$emit(“name”,”param”)

父：@name=fun  methods:{fun(data){console.log(data)}}

子组件向父组件传值成功总结一下：

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法，在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听。

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。

16、axios请求成功和失败时分别执行哪个函数？

成功：then()

失败：catch()

17、使用axios发送请求的格式是什么？请写出示例代码

get:this.$axios({
       url:'请求的接口路径',
        params: {3
        id:要传递的参数
        }
      }).then(function(res) {
      }).catch（function(err) {
})
gost：this.$axios({
        url: '要请求的接口地址',
        method: 'post',
        data: this.qs.stringify({
id:参数
        })
      }).then(function(succ) {
      }).catch(function(err){
})

18、Vue中引入组件需要哪三步？

1）使用import 别名 “@/components/组件名”进行组件引用，

2）然后在components 中注册，

3）在html输出别名标签即可

19、在Vue中使用插件的步骤？

1、安装插件依赖包

#npm install -D open-browser-webpack-plugin

2、引入文件

import Vue from ‘vue’

3、引入使用的组件

import 组件 from ‘组件包名’

Vue.use(组件)

4、在需要位置使用

20、说一下你对dom驱动和数据驱动的理解

dom驱动：直接通过代码操作页面上的html元素。更改页面内容时需重新获取并赋值

数据驱动：通过数据来驱动页面的变化。数据改变时，页面上的内容也会改变

在数据驱动的开发模式下，开发者更多的是关心数据怎么流转，数据怎么变，而不需要通过代码去操作元素。开发过程更加简洁，代码更加简洁专一。

21、请说出路由传参和获取参数的三种方式

先在index.js中注册组件{name：,path: ,component: }

1）需要配置路由参数xxx/:p1/p2

:to="{path:'/btn/p1/p2'}"  param=this.$route.params;

2）需要命名路由

:to="{name:'btn',params:{ }}" param=this.$route.params;

3）需要用query接收

:to="{name:'btn',query:{ }}" param=this.$route.query;

22、子路由的配置方法？

子路由：在父路由中配置children:[]

子路由中的path不能加/，否则会成为跟路径

当匹配到子路由时会将内容放置在子页面的路由出口，而不是跟路由的出口，匹配到的非子

23、Vue-router的编程式导航有哪些方法？

router.go()  router. push()可以返回上一页  router.replace()不能保存，直接替换了

24、导航守卫有哪三种？分别有什么作用

全局路由守卫:
router.beforeEach
router.beforeResolve
router.beforeAfter
组件路由守卫:
const Foo = {
template: '...',
beforeRouteEnter(to, from, next) {
    //再渲染该组件的对应的对应路由被confirm前调用
    //不能获取组件实例'this'
    //因为当前守卫执行前，组件实例化还没有被创建
},
beforeRouteUpdate(to,from,next) {
    //在当前路由改变， 但是该组件被复用时调用。
    //举例来说， 对于一个带有动态参数的路径 / foo /: id， 在 / foo / 1 和 / foo / 2 之间跳转的时候，。 由于会渲染同样的 Foo 组件， 因此组件实例会被复用。 而这个钩子就会在这个情况下被调用。
    //可以访问组件实例 `this`
},
beforeRouteLeave() {
    // 导航离开该组件的对应路由时调用。
    //可以访问组件实例 `this`
}
路由独享守卫:
const router = new VueRouter({
    routes:[{
        path:'/foo',
        component:Foo,
        beforeEnter: (to,from,next) => {
        }
    }]
})

25、简述vuex中的常用属性

vuex： 这个东西就相当于一个公共管理的仓库。在这里定义的东西可以在各个页面获取到。常用来解决同级组件之间的传值问题。

1.state： 用来存储变量。在别的页面就可以使用this.$store.state.这里定义的变量，获取到这个变量的值。

2.mutations和actions： 这两个地方的功能都差不多，是用来执行回调函数从而更改状态的地方。不同的是actions可以进行异步操作。

3.getters: 这个东西就相当于组件中的计算属性。

4.modules: 这个是对处理过后的状态进行分类。它里面可以有很多个组成。而每个组成里面都可以有自己的state,mutations,actions, getters.

26、Vue中如何获取元素？

方法一：直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式，或者使用document.querySelector(‘ #tet‘)来获取

方法二：使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素

27、单页面应用和多页面应用区别及优缺点

单页面：

概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。

优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。

缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。

多页面：

概念：整个项目有多个html，所有跳转方式都是页面之间相互跳转的。

优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。

缺点：页面跳转较慢

28、vue组件中data为什么必须是一个函数？

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。