没有合适的资源?快使用搜索试试~ 我知道了~
Vue面试题 watch 和 computed 区别 watch 是监听动作,computed 是计算属性 watch 没缓存,只要数据变化就执行。computed 有缓存,只在属性变化的时候才去计算。 watch 可以执行异步操作,而 computed 不能 watch 常用于一个数据影响多个数据,computed 则常用于多个数据影响一个数据 讲一下 Vue 的生命周期? 创建期间的生命周期函数: beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性 created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中。 换句话说,此时页面中的类似 {{msg}} 这样的语法还没有被替换成真正的数据。 mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示【可以获取 DOM 节点 | 发起异步请求】 用户已经可以看到渲染好的页面了 运行期间的生命周期函数: beforeUpdate:状态
资源推荐
资源详情
资源评论
Vue 面试题
watch 和 computed 区别
� watch 是监听动作,computed 是计算属性
� watch 没缓存,只要数据变化就执行。computed 有缓存,只在属性变
化的时候才去计算。
� watch 可以执行异步操作,而 computed 不能
� watch 常用于一个数据影响多个数据,computed 则常用于多个数据影
响一个数据
讲一下 Vue 的生命周期?
创建期间的生命周期函数:
� beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好
data 和 methods 属性
� created:实例已经在内存中创建 OK,此时 data 和 methods 已经创
建 OK,此时还没有开始 编译模板
� beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面
中。
o 换句话说,此时页面中的类似 {{msg}} 这样的语法还没有被替换
成真正的数据。
� mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显
示【可以获取 DOM 节点 | 发起异步请求】
o 用户已经可以看到渲染好的页面了
运行期间的生命周期函数:
� beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最
新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染
DOM 节点
� updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和
界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
销毁期间的生命周期函数:
� beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
� destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西
都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
Vue 的父组件和子组件生命周期钩子执行顺序是什么
1. 加载渲染过程 父 beforeCreate->父 created->父 beforeMount->子
beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted
2. 子组件更新过程 父 beforeUpdate->子 beforeUpdate->子 updated->父 updated
3. 父组件更新过程 父 beforeUpdate->父 updated
4. 销毁过程 父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed
总结:从外到内,再从内到外
Vue 中父组件如何监听子组件的生命周期?
v-on / $emit
<child-comp @child-event="handleChildEvent"></child-comp></div>
Vue.component('child-comp', {
template: '<div></div>',
data: function () {
return {
childMsg: 'Hello, I am Child'
};
},
methods: {},
mounted() {
this.$emit('child-event');
}
});
const app = new Vue({
el: '#app',
data: function () {
return {
parentData: 'parent Message'
};
},
beforeCreate: function () {
console.log('before created');
},
methods: {
handleChildEvent() {
console.log('child mounted');
}
}
});
在子组件中的 mounted 钩子函数中调用 this.$emit("child-event"); 向父组件发
送 child-event 消息。 父组件 @child-event="handleChildEvent" 监听了此消
息。
@hook
假如我们这里的子组件是外部的,是不可更改的。那我们父组件监听这个外部
子组件中的生命周期钩子函数怎么办呢?
<div id="app">
<child-comp @hook:mounted="handleChildEvent"></child-comp>
</div>
Vue.component('child-comp', {
template: '<div></div>',
data: function () {
return {
childMsg: 'Hello, I am Child'
};
},
methods: {},
mounted() {
//this.$emit("child-event");
}
});
const app = new Vue({
el: '#app',
data: function () {
return {
parentData: 'parent Message'
};
},
beforeCreate: function () {
console.log('before created');
},
methods: {
handleChildEvent() {
console.log('child mounted');
}
}
});
把子组件中的 mounted 钩子函数中的 $emit 方法去掉, 在父组件中使用
@hook:mounted
更多阅读
� 包你理解---vue 的生命周期
组件
现在有个父子组件,我希望在父级中给子组件绑定一个原生
click 事件,这个事件会被触发吗?
<div id='app'>
<my-button @click='change'></my-button>
</div>
<script>
export default {
methods: {
change() {
alert(1)
}
}
}
</script>
答:不能,绑定的该 click 事件会被当做组件上的一个普通属性看待,如果想要
使 click 事件生效,可以使用 @click.native='change' 的方式来实现。
为什么 Vue 实例对象中的 data 直接是个对象,而组件内的
data 是个函数,且返回一个对象?
因为组件中是 data:{} 的话,这个 {} 是个对象,引用类型。如果多处地方引用
同一个组件的话,则共享同一个 data 对象,这是不合理的。所以需要每次使用
组件时,return 一个新的对象,这样就不会共享了。
组件间如何通讯?
� props/$emit+v-on: 通过 props 将数据自上而下传递,而通过$emit 和 v-
on 来向上传递信息。
� EventBus: 通过 EventBus 进行信息的发布与订阅
� vuex: 是全局数据管理库,可以通过 vuex 管理全局的数据流
� $attrs/$listeners: Vue2.4 中加入的$attrs/$listeners 可以进行跨级的组
件通信
剩余33页未读,继续阅读
资源评论
xiaoshun007~
- 粉丝: 3784
- 资源: 3146
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功