前端vue常见面试题

v-show和v-if指令的共同点和不同点？

共同点：都能控制元素的显示和隐藏；

不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

拓展问题：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。

说出几种vue当中的指令和它的用法？

v-model 数据双向绑定；

v-for循环；

v-if、v-show 显示与隐藏；

v-on事件绑定

v-bind 属性绑定

v-text 解析文本内容

v-html 解析带有html标签的内容

Vue中双向数据绑定是如何实现的？

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

vue响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

vue的两个核心点

数据驱动页面、组件化

数据驱动页面：ViewModel，保证数据和视图的一致性。

组件化：应用类UI可以看作全部是由组件树构成的。

vue生命周期有哪些？调用api时一般在哪个周期完成最好？

beforeCreate(){},	//创建之前
created(){},		//创建完成    也可以调用
beforeMount(){},	//挂载之前
mounted(){},		//挂载完成    调用api  推荐
beforeUpdate(){},	//更新之前
updated(){},		//更新完成
beforeDestroy(){},//销毁之前
destroyed(){},	//销毁完成

vue生命周期不同阶段

页面渲染期：
页面加载时自动触发的钩子函数：
beforeCreate    创建之前
created         创建完成
beforeMount    	挂载之前
mounted         挂载完成    ***** 发起网络请求

页面更新期：
页面上的数据有变化时，会自动触发的钩子函数：
beforeUpdate     更新之前
updated          更新完成

页面销毁期：
vue实例被销毁时会自动触发的钩子函数：
beforeDestroy    销毁之前
destroyed            销毁完成


new Vue({
	el:'#app',		//设置挂载点 类似于querySelector
	data:{},		//初始数据
	methods:{},	//自定义函数
	watch:{},		//监听
	computed:{},	//计算属性
	filters:{},		//过滤器
	components:{},	//自定义组件
	beforeCreate(){},	//创建之前 无
	created(){},		//创建完成 data
	beforeMount(){},	//挂载之前 data
	mounted(){},		//挂载完成 data el
	beforeUpdate(){},	//更新之前
	updated(){},		//更新完成
	beforeDestroy(){},//销毁之前
	destroyed(){},	//销毁完成
	// keep-alive  用下面的
	activated(){}, 		// 开启定时器
	deactivated(){}, 	// 关闭定时器
})

<template>
    <div class="box">

    </div>
</template>

<script>
export default {
	//组件
	components: {

	},
	//数据
    data(){
        return{}
    },
	//监听
	watch: {
		chValue(newVal,nldVal){
			// 监听
		},
		"tableData.address": {
			handler(newVal, oldVal) {
			console.log(newVal)
			},
			deep: true,//深度监听
			immediate: true
		},
		tableData: {
		handler(newVal, oldVal) {
		  console.log(newVal)
		 },
		deep: true,//深度监听
		immediate: true
		}
	},
	//计算属性
	computed:{
		//第一种 默认是getter
		total(){
			...
			return 12;
		},
		//第二中
		fullName:{
			get(){},
			set(){}
		}，
		//计算属性传参
		myfilter() {
		      return function(index){
		             return true;         
		      }           
		},
	},
	created(){

	},
	//创建完成
    mounted(){

    },
	//销毁
	destroyed() {

	},
	//方法
    methods:{

    },
}
</script>

<style lang="less" scoped>

</style>

params和query的区别

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

注意点：query刷新不会丢失query里面的数据

params刷新 会 丢失 params里面的数据。