vue--{谈谈对vue生命周期的理解，Vue实现数据双向绑定的原理：Object.defineProperty()，Vue的路由实现：hash模式和 history模式，vue路由的钩子函数}

原创于 2022-11-17 09:20:46 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Vue.js的生命周期，包括各个阶段的作用及触发的钩子函数，解释了DOM渲染完成的具体周期。此外，还深入探讨了Vue实现数据双向绑定的原理以及路由的不同模式。

1.对生命周期的理解

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

生命周期是什么？

答：ue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是Vue的生命周期

生命周期的作用？

beforeCreate 组件实例被创建之初，组件的属性生效之前

created 组件实例已经完全创建，属性也绑定，但真实dom还没有生成，$ el还不可用

beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用

mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子

beforeUpdate 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前

update 组件数据更新之后

activited keep-alive专属，组件被激活时调用

deadctivated keep-alive专属，组件被销毁时调用

beforeDestory 组件销毁前调用

destoryed 组件销毁后调用
在这里插入图片描述

由于Vue会在初始化实例时对属性执行getter/setter转化，所以属性必须在data对象上存在才能让Vue将它转化为响应式。Vue提供了$set方法来触发试图更新

vue生命周期的作用是什么？

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑

第一次页面加载会触发哪几个钩子？

答：会触发下面这几个beforeCreate、created、beforeMount、mounted 。

DOM 渲染在哪个周期中就已经完成？

答：DOM 渲染在 mounted 中就已经完成了

2.Vue实现数据双向绑定的原理：Object.defineProperty()

答：
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue追踪依赖，在属性被访问和修改时通知变化。
vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。