关于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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。