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);
},
// 更新之前，当且仅当data被修改时才触发这个生命周期函数，但此时仅仅是数据被修改，页面还未更新。
5. beforeUpdate(){
console.log('beforeUpdate',this.msg);
console.log('beforeUpdate',this.el.innerHTML);
},
// 销毁之前，当执行beforeDestory钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段。
// 当执行beforeDestory的时候，实例身上所有的data和所有的methods，以及过滤器、指令...都处于可用状态，此时还没有真正执行销毁过程。
7. beforeDestroy(){
console.log('beforeDestroy');
},
// 销毁之后，当执行到destoryed函数的时候，组件已经被全部销毁了，data与methods均不可用。
// 更改data数据，页面不会更新
//应用： 清除定时器
8. destroyed(){
console.log('destroyed');
}

 

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

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

<ul ref="ulEl">
<li v-for="(item,index) in list" ref="liEl">{ {item}}</li>
</ul>
<p ref="pEl">这是一个段落</p>

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)  //可以触发视图更新

// =================&