课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack

课程章节：Vue3.0

主讲老师：双越老师

课程内容：

今天学习内容包括：

1. 生命周期

2. 自定义 v-model

课程收获：

生命周期

• beforeCreate：vue 实例被创建出来，el 和 data 都还没有初始化，不能访问 data 和 method，一般在这个阶段不进行操作。一般在这个阶段不进行操作

• created：vue 实例中的 data、method 已被初始化，属性也被绑定。但是此时还是虚拟dom，真实 dom 还没生成，$el 还不可用。一般在此对数据进行初始化

• beforeMount：模板已经编译完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom）

• mounted：模板已经被渲染成真实 DOM，用户已经可以看到渲染完成的页面。执行完 mounted 就表示，实例已经被完全创建好了

• beforeUpdate：重新渲染之前触发，然后 vue 的虚拟 dom 机制会重新构建虚拟 dom 与上一次的虚拟 dom 树利用 diff 算法进行对比之后重新渲染。只有 view 上面的数据变化才会触发 beforeUpdate 和 updated，仅属于 data 中的数据改变是并不能触发。

• updated：数据已经更改完成，dom 也重新 render 完成。

• beforeDestroy：销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里：清除计时器、清除自定义绑定的事件等等…

• destroyed：销毁后 （Dom 元素存在，只是不再受 vue 控制），卸载watcher，事件监听，子组件。

自定义 v-model

• input 使用了 :value 而不是 v-model

• change1 属性对应起来

• text1 属性对应起来

• prop 也就是调用该组件的父组件中使用 v-model 指令绑定的属性

• event 对应的是修改 prop 指定属性的值的函数

课程学习截图：