第一次来写文章,其实自己也是个菜鸟,主要是为了加深自己对所学东西的印象,同时也记录自己的学习过程,不对的地方请大家及时纠错,谢谢大家。

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的就好了

今天先学习到这里,休息休息。