人在胖天在看_640c
人在胖天在看_640c

VUE面试题

生命周期

// 创建之前，在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化，不能访问data数据
1. beforeCreate(){
console.log('beforeCreate',this.msg);
},
//创建之后，data和methods中的数据已经初始化，此时可以访问data数据
// 一般在这个函数中发起ajax请求
2. created(){
console.log('created',this.msg);
},
// 挂载之前，表示模板已经在内存中编译完成，但尚未把模板渲染到页面中。
// 此时还没有渲染用数据生成的新dom
3. beforeMount(){
console.log('beforeMount',this.el); }, // 挂载完毕 ，表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了 // 此时可以访问dom 4. mounted(){ console.log('mounted',this.el);
},
// 更新之前，当且仅当data被修改时才触发这个生命周期函数，但此时仅仅是数据被修改，页面还未更新。
5. beforeUpdate(){
console.log('beforeUpdate',this.msg);
console.log('beforeUpdate',this.el.innerHTML); }, // 更新之后， 会根据新数据生成最新的内存DOM树，重新渲染到真实的页面中去， // 此时的data数据和页面已完成同步 6. updated(){ console.log('updated',this.el.innerHTML);
},
// 销毁之前，当执行beforeDestory钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段。
// 当执行beforeDestory的时候，实例身上所有的data和所有的methods，以及过滤器、指令...都处于可用状态，此时还没有真正执行销毁过程。
7. beforeDestroy(){
console.log('beforeDestroy');
},
// 销毁之后，当执行到destoryed函数的时候，组件已经被全部销毁了，data与methods均不可用。
// 更改data数据，页面不会更新
//应用： 清除定时器
8. destroyed(){
console.log('destroyed');
}

当使用了缓存组件时，会增加两个生命周期钩子

Vue全家桶

  vue的全家桶：   
        vue.js   
        vue-router.js  
        vue-cli (脚手架，快速搭建vue项目)
        axios  
        vuex.js

v-if与v-show的区别

v-if的显示和隐藏 是dom的创建与销毁
v-show的显示和隐藏是 基于display-none 和 display-block 无论是显示或是隐藏都会生成dom

vue指令

v-html 元素的innerHTML
v-text 元素的InnerText 只能用在双标签中
v-model 双向数据流绑定 主要作用于表单的 value 属性
v-bind 给元素绑定动态属性
v-on 处理自定义原生事件
v-if
v-else
v-else-if
v-show
v-once 只渲染一次 ,数据改变,视图更新,但v-once对应的元素不会再更新
v-slot 插槽

vue 脚手架中的data为什么必须是个函数

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

vue中计算属性computed和方法methods和侦听器watch的区别

  1. 计算属性和方法都是函数，计算属性一定有返回值，它通过对数据进行处理，返回一个结果

     2. 在模板中调用时，计算属性不加(),而methods必须需要加()
 
 3. 计算属性和方法最主要的区别是计算属性有缓存功能。

     方法被调用时每次都要重复执行函数

     计算属性初次调用时执行函数，然后会缓存结果。当再次被调用时，如果依赖的响应式数据没有发生改变，则直接返回之前缓存的结果 。

     如果依赖发生了改变，则会再次执行函数并缓存结果 

 4. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

watch:

1. 侦听响应式数据的变化，数据变化时，执行相应的业务逻辑，可以有返回值，也可以没有

2. 侦听器默认在页面初始化时不执行，只有侦听数据发生变化才会执行。添加上immediate可初始化时就执行

3. 添加上immediate可初始化时就执行

Vue中如何获取原生dom

  1. 在元素标签上添加ref属性
  2. 通过this.$refs.属性名来获取dom
  3. 应用场景： 楼层导航中，要获取每个楼层距离页面顶端的偏移值
    注意:如果是异步请求的数据渲染的dom 需要使用 this.$nextTick()回调来获取更新后的dom


  • {{item}}


这是一个段落

Vue中的 this.$nextTick()

一般在请求数据后，需要获取dom的时候使用。

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

Vue中 this.$router 与this.$route的区别

    在一个vue组件中，都可以访问到这两个对象，它俩的区别 
    this.$route是路由记录对象，只读，存储了与路由相关的信息

    this.$router是路由对象，用来进行路由跳转

什么是SPA 单页面应用

单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和隐藏），从而实现UI与用户的交互。在 SPA 应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region（区域）中的视图切换来展示内容。

实现数组,对象更新检测的方法

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

// ====================================数组更新检测

// 三个参数： 数组，索引，新值
Vue.set(this.list,3,5)  //可以触发视图更新
this.$set(this.list,3,5)  //可以触发视图更新

// =====================================对象的更新检测

// 三个参数：对象，属性，新值
Vue.set(this.person,"sex","男") //可以触发视图更新
this.$set(this.list,3,5) //可以触发视图更新

for循环中的key值的作用

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
所以一句话，**key的作用主要是为了高效的更新虚拟DOM**。

另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

为什么v-for和v-if不能在同一标签(元素)上

v-for比v-if优先，即每一次都需要遍历整个数组，影响速度。

以上代码，如果有100条数据，虽然显示两条，但需要遍历100次，因为v-for优先

    更好的解决方案： 是用computed先获取符合条件的数据，再进行遍历

事件修饰符

事件修饰符： @click.修饰符
1. @click.stop 阻止冒泡
2. @click.prevent 阻止浏览器默认行为
3. @click.once 只执行一次
4. @keyup.键名 (13，enter都是指回车键， 38： 上箭头)
5. @click.self 当事件发生在该元素本身而不是子元素的时候会触发；
6. @click.capture 在事件捕获阶段触发事件处理程序
[email protected] 使非原生标签也可以绑定事件

token的工作流程

    1.用户填写登录信息，发起请求，服务端收到请求，去验证用户名与密码
    2.验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
    3.客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
    4.客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
    5.服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

什么是Vuex

如果应用比较简单，就不需要使用Vuex，直接使用父子组件传值及它传值方式即可，使用Vuex就要额外的引入vuex的框架，可能是繁琐冗余的

如果需要构建一个中大型单页应用，就可以使用vuex更好地在组件外部管理状态

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex的工作流程

一、在项目创建store文件夹，及index.js
定义相关的vuex的state, getters actions mutations

二、在入口文件main.js中引入store,并在根实例注册

三、在任一组件中，通过this.$store.state就可以访问到共享数据

四、当通过组件要修改store中的数据时，

1. 如果该操作是同步的，可以用this.$store.commit()来触发mutations, 只有mutations才可以直接更改state共享数据

2. mutations中只能有同步操作，不能有异步操作

3. 如果修改数据的操作是异步的，通过this.$store.dispatch()触发actions, actions中可以发起异步请求，获取数据后，再调用 commit触发mutations,通过mutations修改共享数据

Vuex的五个属性

State

储存公共数据

Action

类似于mutation 不同在于
Action 提交的是mutation,而不是直接变更状态,(action不能直接更改state数据)
Action 可以包含任意异步操作

总结一下：
  mutation不能有异步操作，而action可以有异步操作
  mutation可以直接更改数据，而action只能通过提交mutation,通过mutation的方法来改变数据
  实际通过组件改变数据时，如果没有异步操作，可以直接提交(commit)mutation,如果有异步操作，必须派发(dispatch)action,通过action提交(commit)mutation来更改数据

Mustion

更改Vuex中store中的状态唯一的办法是提交mutation
mutation的方法中有两个参数,一个是state,第二个是参数
mutations:{
方法名(state,参数){
state.属性=参数
}
}
在组件中提交mutations的方法:this.$store.commit('方法名',参数)
state中的数据时响应式的,数据改变,相关视图会重新渲染

getters

就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算

Modelu 模块

Vuex中的辅助函数

mapState

mapGetters

mapActions

mapMutations

Vue中如何自定义组件

一、普通组件

  1. 新建一个单个文件组件 *.vue , 内部：