第一次来写文章,其实自己也是个菜鸟,主要是为了加深自己对所学东西的印象,同时也记录自己的学习过程,不对的地方请大家及时纠错,谢谢大家。
1.Vue 2.0兼容IE的情况
不支持ie8及以下,部分兼容ie9,完全兼容ie10以上,因为2.0的响应式原理是基于es5的Object.defineProperty(),而这个方法不支持ie8及以下,目前ie已被舍弃,但离完全跳坑还有距离,所以大家还得有点东西。
2.Vue生命周期
beforeCreate:实例创建前调用,此时的data和$el都为undefined
created:实例创建后调用,此时的data可访问,$el还为undefined,只完成了数据的观测,属性和方法的运算,watch/event事件回调,渲染模板成html(虚拟,虚拟完成后才是实体)前,故数据初始化(比如字典,列表数据等)最好在这段完成。
beforeMounte:在实体的$el挂载前被调用,此时首次调用render函数生成的html模板为虚拟,$el还是无法访问。
mounted:实体的$el挂载后被调用,不能保证所有组件都以加载完成,凡是操作的操作,都尽量放在nextTick()中去。
beforeUpdate:数据更新时调用,发生在虚拟dom重新渲染和打补丁之前,可以在该钩子中进一步的更改状态而不会触发渲染。
updated:数据更新后调用,调用时dom已经更新完成,可以执行一些dom操作,但是多数情况在这里操作会导致无限循环的情况出现。
beforeDestroy:组件销毁前被调用,此时实例还可以被访问,一般在这里做一些重置的操作,清除定时器和dom事件。
destroyed:组件销毁后调用,实例已经不存在。
3.computed中的属性名和data中的属性名是否可以相同?
不可以,因为不管是computed中的属性名还是data中的数据名以及props中的数据名都会被挂载到vm上,以下为源码中做的判断:
if(key in vm.$data){
warn(`The computed property "${key}" is already defined in data.`, vm)
}else if(vm.$options.props && key in vm.$options.props){
warn(`The computed property "${key}" is already defined as a prop.`, vm)
}
4.data的属性名可以和methods中的方法名相同吗?
不可以,因为源码里面也做了判断:
let data = vm.$options.data
const keys = Object.keys(data)
const methods = vm.$options.methods
let i = keys.length
while (i--) {
const key = keys[i]
if (process.env.NODE_ENV !== 'production') {
if (methods && hasOwn(methods, key)) {
warn(
`Method "${key}" has already been defined as a data property.`,
vm
)
}
}
}
其实就是那data中的数据名循环去在methods中找,如果methods中存在会warnning。
5.怎么缓存当前打开的路由组件,缓存后想更新怎么办?
用<keep-alive><componentName></componentName></keep-alive>,
要更新时在activated中进行更新
keep-alive有两个钩子函数:
activated:组件激活时调用
deactivated组件停用时调用
6.watch的属性和methods的方法名可以使用箭头函数吗?
不可以,因为使用箭头函数后this会访问不到vue实例,箭头函数中this指向的是定义者而不是调用者。
watch:{
hidden:(v)=>{
console.log(this)//undefined
},
gop(){
console.log(this)//vue
}
}
7.强制刷新组件的方法。
this.$forceUpdate();
利用key值来刷新,看代码:
<template>
<component :key="lifes"></component>
</template>
<script>
data(){
return {
lifes:0
}
},
methods:{
cxdemo(){
this.lifes+=1
}
}
</script>
需要刷新组件时,改变lifes的就好了
今天先学习到这里,休息休息。