vue 的生命周期是什么
beforeCreate
: 实例创建前被调用created
: 实例创建后被调用,完成数据观测,属性和方法的运算,watch/event 实际回调,模板渲染成 html(vm.$el 未定义),数据初始化最好在这个阶段完成mounted
: 在$el挂载后被调用,此时vm.$el 可以调用,不能保证所有的子组件都挂载,要等视图全部更新完毕用 vm.$nextTick()beforeUpdate
: 数据更新时调用updated
: 数据更新后调用activated
: <keep-alive></keep-alive>包裹的组件激活时调用deactivated
: <keep-alive></keep-alive>包裹的组件离开时调用beforeDestroy
: 实例销毁之前调用,此时实例仍然完全可用;destroyed
: 实例销毁之后调用,此时实例的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
computed 中的属性名和 data 中的属性名可以相同么
不能同名,因为不管是computed属性名还是data数据名还是props数据名都会被挂载在vm实例上,因此这三个都不能同名
怎么缓存当前打开的路由组件,缓存后想更新当前组件怎么办呢
用<keep-alive></keep-alive>
内置组件包裹路由组件,在钩子函数activated
中更新
跟 keep-alive 有关的生命周期是哪些
- activated钩子:keep-alive 组件激活时调用
- deactivated钩子:keep-alive 组件停用时调用
- 以上钩子服务器端渲染期间不被调用
watch 的属性使用箭头函数定义可以吗
不可以。this会是undefind,因为箭头函数中的this指向的是定义时的this,而不是执行时的this,所以不会指向Vue实例的上下文
watch:{
show:(val)=>{
console.log(this)//undefind this会指向show
},
id(val){
conosle.log(this)//Vue实例对象
}
}
怎么在watch监听开始之后立即被调用
在选项参数中指定immediate: true将立即以表达式的当前值触发回调
watch:{
a:{
handler:function(val,oldval){
},
immediate: true
}
}
watch 怎么深度监听对象变化
在选项参数中指定 deep:true
watch:{
a:{
handler:function(val,oldval){
},
deep:true
}
}
怎么强制刷新组件
<template>
<div>
<demo :key="count"></demo> // 绑定key值
<button @click="handleRefresh">刷新demo组件</button>
</div>
</template>
<script>
import demo from "./test.vue";
export default {
name: "refreshDemo",
data() {
return {
count: 0
};
},
methods: {
handleRefresh() {
this.count += 1 // 更改key值,从而达到刷新组件的效果 当key改变时就是释放原始组件,重新加载新的组件
}
}
};
</script>
父组件中的自定义事件怎么接收子组件的多个参数
this.$emit('eventName',data)
,data
可以是个对象,包含子组件的多个参数,然后传给父组件
给组件绑定自定义事件无效怎么解决
加上修饰词.native 否则无法触发事件
<template>
<div>
<Main @click.native="shuchu" />
</div>
</template>
<script>
import Main from "./components/main";
export default {
components: {
Main
},
data() {
return {
};
},
methods: {
shuchu() {
console.log("1");
},
},
};
</script>
怎么访问子组件的实例或者子元素
<template>
<div>
<buttom @click="shuchu" ></buttom>
<Main ref ="main"/>
</div>
</template>
<script>
import Main from "./components/main";
export default {
components: {
Main
},
data() {
return {
};
},
methods: {
shuchu() {
//通过使用this.$refs.main.方法名可以调用子组件内methods内的方法
this.$refs.main.方法名
//获取子组件data数据
this.$refs.main.$data
},
},
};
</script>
<ul ref="mydiv">
<li class="item">第一个li</li>
<li class="item">第二个li</li>
</ul>
console.log(this.$refs['mydiv']
.getElementsByClassName('item')[0].innerHTML)//第一个
怎么在子组件中访问父组件的实例
在子组件中使用this.$parent
来访问
怎么在组件中访问到根实例
在子组件中使用this.$root
来访问
组件会在什么时候下被销毁
- 没有使用 keep-alive 时的路由切换
- v-if=’false’
- 执行 vm.$destroy()
Vue 组件之间的通信都有哪些
- props
- this.$emit(‘input’,data)
- this.$root.$on(‘input’,function(data){})和 this.$root.$emit(‘emit’,data)
- this.$refs.tree(tree 为 ref 绑定值)
- 自定义事件总线
- Vuex
prop 验证的 type 类型有哪几种 ,可以设置默认值吗
String、Number、Boolean、Array、Object、Date、Function、Symbol, 此外还可以是一个自定义的构造函数 Personnel,并且通过 instanceof 来验证 propwokrer 的值是否是通过这个自定义的构造函数创建的
function Personnel(name, age) {
this.name = name;
this.age = age;
}
export default {
props: {
wokrer: Personnel,
propA: [String, Number],
propB: {
type: Number,
default: 1,
},
propC: Boolean,
propD: {
type: Object,
default() {
return {};
},
},
},
}
在 Vue 事件中是如何使用 event 对象的
@click="handleOpen"
默认第一个参数传入 event 对象@click="handleOpen(0, $event)"
,如果自己需要传入参数和 event 对象,则需要使用$event 来获取 event 对象并传入 handleOpen
在 Vue 事件中传入$event,使用$event.target 和$event.currentTarget 有什么区别
$event.currentTarget
始终指向事件所绑定的元素,而$event.target
指向事件发生时的元素
表单修饰符和事件修饰符
-
.stop
:阻止事件传递 -
.prevent
: 阻止默认事件; -
.capture
:在捕获的过程监听,没有 capture 修饰符时都是默认冒泡过程 监听; -
.self
:当前绑定事件的元素才能触发; -
.once
:事件只会触发一次; -
.passive
:默认事件会立即触发,不要把.passive 和.prevent 一起使用,因为.prevent 将不起作用。 -
表单修饰符
.number .lazy .trim
使用事件修饰符要注意
要注意顺序很重要,用@click.prevent.self
会阻止所有的点击,而@click.self.prevent
只会阻止对元素自身的点击
Vue 如何监听键盘事件
使用按键修饰符 <input @keyup.enter="submit">
按下回车键时候触发 submit 事件
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
v-show 和 v-if 有什么区别?使用场景分别是什么
- v-show,切换元素的 display 属性,来控制元素显示隐藏,初始化会渲染,适用频繁显示隐藏的元素,不能用在
<template>
上 - v-if,通过销毁并重建组件,来控制组件显示隐藏,初始化不会渲染,不适用频繁显示隐藏的组件,可以用在
<template>
上
vm.$nextTick 有什么作用
vm.$nextTick(() =>{this.handleadd()}),将 handleadd 回调延迟到下次 DOM 更新循环之后执行
Vue 中怎么重置 data
Object.assign(this.$data,this.$options.data())