关于Vue常遇到的一些问题 2期

如果你会Vue

Vue常见的一些问题总结

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue的生命周期有哪些？

1、beforeCreate 创造之前
​ 2、created 创造之后
​ 3、beforeMount 安装之前
​ 4、mounted 安装之后
​ 5、beforeUpdate 更新之前
​ 6、updated 更新之后
​ 7、beforeDestroy 销毁之前
​ 8、destroyed 销毁之后
​ 9、activated 激活
​ 10、deactivated 取消激活
​ 11、errorCaptured 错误捕捉

二、vuex核心属性和用法

1）
​ 1、state 数据状态
​ 2、getters 计算属性
​ 3、mutations 同步提交
​ 4、actions 异步提交
​ 5、modules 模块化

状态state 访问方式 this.$store.state
辅助函数 让代码更简便 mapState

计算属性getter 通过属性访问this.$store.getters.filter1
辅助函数 mapGetter

提交mutations 访问方式 this.$store.commit(“add”)
辅助函数 mapMutations

异步提交action 访问方式 this.$store.dispatch(“asyncAdd”)
辅助函数 mapActions

Module模块 、
让每一个模块拥有自己的 state、mutation、action、getter属性且不会和其他的冲突

三、$nextTick的作用和使用场景

1)$nextTick可以先把数据放在消息列表，等待页面渲染完毕之后，再进行调用
使用场景
​ 2)ref获取子组件的时候

四、虚拟dom是什么，优势是什么

1)是vue框架通过createElement创建的虚拟的节点网络，里面包含节点的标签，节点的数据，节点的属性，这些统称为虚拟dom。
​ 2）相较于传统的Dom速度更快

五、router和route的区别

$route是当前路由对象，获取当前的路由参数 $route.query
​ $router是整个路由对象，获取整个路由的参数 $router.push()

六、路由传参的方式和区别

路由传参的方式有两种
1.query
2.params
区别：
1、query会直接显示在url地址栏上,params不会
2、api方法不相同
3、query在传参数的时候，用的是path,而params是name
4、query刷新页面会保留数据，params会消失

七、组件传参的方式有哪几种？

1、父传子 props
​ 2、子传父 $emit()
​ 3、非父子 eventBus 依赖注入 vuex ref parent

八、v-if和v-show的区别

虽然他们两个都是隐藏元素，但还是有一定的区别
相同点：
v-if与v-show都可以动态控制dom元素显示隐藏
不同点：
1）v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。
2）v-if有更高的切换消耗；v-show有更高的初始渲染消耗，所以在使用中需要频繁的切换显示隐藏的建议使用v-show

九、v-if和v-for能否同时使用？.

尽量不要一起使用，因为优先级不同可能发生一些渲染错误
在Vue2中v-for的优先级高于v-if 而Vue3中则相反 不建议在同一个元素下一起使用，在同一元素下使用可能引起警告或报错

十、vue2实现数据双向绑定的原理

Object.defineProperty() 示例如下：

let data = {name:"小明",age:18,hobby:{names:"打游戏"}}

function ob(data){
	if(!data || typeof data !== "object"){
		return
	}

	Object.keys(data).forEach((key)=>{
		definedReactive(data,key,data[key])
	})
}

function definedReactive(data,key,value){
	ob(value)
	Object.defineProperty(data,key,{
		get(){
			return value
		},
		set(newVal){
			console.log("值发生了更改"+value+"==>"+newVal)
			value = newVal
		}
	})
}

ob(data)

data.name = "小红"
data.age = 19

data.hobby.names = "看电影"

ps.上一文有写过感觉有点多余

十一、自定义指令

//html
	<div v-myjiel:click.1000="fn('我是节流')" >内容</div>

//节流  js
		Vue.directive("myjiel",{
			inserted(el,binding){
				let modl = Number(Object.keys(binding.modifiers)[0])
				function jieliu(fn, time) {
					let last = 0
					let thit = this
					return function() {
						let now = +new Date()
						if (now - last > time) {
							last = now
							fn.apply(thit).020z'Z
						}
					}
				}
				// el.onclick = jieliu(binding.value,3000)
				el.addEventListener(binding.arg,jieliu(binding.value,modl))

			}
		})

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Vue中常遇到的问题及解析，答案仅是我的个人观点，欢迎指正，一起学习，如有雷同纯属意外。