vue 之深入浅出各生命周期函数

updateObj: {

type: Object

}

},

components: {

child

},

beforeCreate() {

console.log(‘father-beforeCreate’)

},

created() {

console.log(‘father-created’)

},

beforeMount() {

console.log(‘father-beforeMount’)

},

mounted() {

console.log(‘father-mounted’)

},

beforeUpdate() {

console.log(‘father-beforeUpdate’)

},

updated() {

console.log(‘father-updated’)

},

beforeDestroy() {

console.log(‘father-beforeDestroy’)

},

destroyed() {

console.log(‘father-destroyed’)

}

}

子类组件：

child

{{updateObj.test}}

孙类组件：

grandson

{{updateObj.test}}

组件的加载结果如下：

组件销毁时结果如下：

组件更新时结果如下：

总结：组件加载时各生命周期在mounted钩子之前按父类到子类的顺序逐步更新，父类组件实例节点加载完按从子到父的顺序执行mounted渲染；销毁时也按从子到父顺序执行destroyed,之前的钩子按父到子；组件更新时按子到父类执行updated,之前的钩子按父到子。

三、prop属性的传值三大问

=============================================================================

1. 问题1属性有默认值时，不给属性传值，属性的值会比data初始化绑定的值要早吗？

2. 问题2 属性传值有默认值，也给属性赋予不同的值（能监听到属性的变化），组件加载之前（init）赋值和加载完成（mounted）时赋值，watch可以监听到变化吗？赋值组件在哪些生命周期函数里可以访问这个变化后的值呢？

3. 问题3属性 传值（对象或者数组，亦或跟复杂嵌套的对象数组）有监听不到属性变化的情况吗？有时怎么处理，没有时为什么呢？。。

四、 mixin自定义选项合并策略

================================================================================

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

四、 mixin自定义选项合并策略

================================================================================

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中…(img-9fnuBEtf-1720103442192)]

[外链图片转存中…(img-qOgl9n4a-1720103442193)]