共计 1963 个字符，预计需要花费 5 分钟才能阅读完成。
关于 vue
vue 是一套用于构建用户页面的渐进式框架。属于 MVVM(model+view+viewModel) 框架。详细了解可以到官网
下面这张图很好的展示了 vue 的生命周期
下面我们详细解释一下这张图
实例化
显而易见，这个就是实例化。实例化之后，会执行以下操作。
初始化事件 生命周期函数
首先就是初始化事件和生命周期函数。
beforeCreate 创建前
接着就是 beforeCreate（创建前）执行。但是这个时候拿不到 data 里边的数据。
注射响应
injections(注射器) reactivity(响应) 给数据添加观察者。
created 创建后
created 创建后执行。因为上边给数据添加了观察者，所以现在就可以访问到 data 里的数据了。这个钩子也是常用的，可以请求数据了。因为请求数据是异步的，所以发送请求宜早不宜迟，通常在这个时候发送请求。
是否存在 el
el 指明挂载目标。这个步骤就是判断一下是否有写 el，如果没有就判断有没有调用实例上的 $mount(”) 方法调用。也就是下一张图。
这两个是等价的。
判断是否有 template
判断是否有 template。
如果有 template 则渲染 template 里的内容。
如果没有 则渲染 el 指明的挂载对象里的内容。
beforeMount 挂载前
beforeMount 挂载前执行。
替换 el
这个时候会在实例上创建一个 el，替换掉原来的 el。也是真正的挂载。
mounted 挂载后
mounted 挂载后执行。这个时候 DOM 已经加载完成了，可以操作 DOM 了。这个也是常用的钩子。一般操作 DOM 都是在这里。
dataChange
当数据有变动时，会触发下面这两个钩子。
在 beforeUpdate 更新前 和 updated 更新后之间会进行 DOM 的重新渲染和补全。
接着是 updated 更新后
callDestroy
beforeDestroy 销毁前和 destroy 销毁后这两个钩子是需要我们手动调用实例上的 $destroy 方法才会触发的。
当 $destroy 方法调用后。
beforeDestroy 销毁前触发
移除数据劫持、事件监听、子组件属性 所有的东西还保留 只是不能修改
destroy 销毁后触发
新增钩子
activated：keep-alive 组件激活时调用。类似 created 没有真正创建，只是激活
deactivated：keep-alive 组件停用时调用。类似 destroyed 没有真正移除，只是禁用
在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。
详细使用可在官网中查看。
代码如下
<body>
<div id=”app”>
{{msg}}
outerHTML
npm init -y
npm install vue
</div>
<script>
let vm = new Vue({
el:”#app”, // 指明 VUE 实例 的挂载目标（只在 new 创建的实例中遵守）
data:{msg:”sxq”},
beforeCreate() {
// console.log(this.msg) // 拿不到
// debugger
},
created() { // 初始化数据 ajax
console.log(this.msg)
},
beforeMount() {
// alert(1)
},
// template:”<div>345</div>”,
mounted() { // dom 已经加载完成 操作 dom
},
beforeUpdate() {
alert(‘ 更新前 ’)
},
updated() {
alert(‘ 更新后 ’)
},
beforeDestroy() {
alert(‘ 销毁前 ’)
},
destroyed() {
alert(‘ 销毁后 ’)
},
})
option
// vm.$mount(‘#app’) // 等价于 el:”#app”
vm.$destroy()
// init events, init lifecycle 初始事件，初始化生命周期钩子函数
// init injections（注射器）reactivity（响应）给数据添加观察者
// Compile el’s outerHTML as template 编译 el 的 outerHTML 作为模板
// 在 beforeMount mounted 之间 create vm.$el and replace“el”with it 会创建一个 el 代替自己的 el 对象
// virtual DOM re-render and patch 虚拟 DOM 重新渲染和修补
// when vm.$destroy() is called 当销毁函数 vm.$destroy() 调用时 才会调用销毁前后的生命周期
// teardown watchs child components and event listeners 移除数据劫持、事件监听、子组件属性 所有的东西还保留 只是不能修改
</script>
</body>
