关于vuevue是一套用于构建用户页面的渐进式框架。属于MVVM(model+view+viewModel)框架。详细了解可以到官网下面这张图很好的展示了 vue 的生命周期下面我们详细解释一下这张图实例化显而易见，这个就是实例化。实例化之后，会执行以下操作。初始化事件 生命周期函数首先就是初始化事件和生命周期函数。beforeCreate创建前接着就是beforeCreate（创建前）执行。但是这个时候拿不到 data 里边的数据。注射响应injections(注射器) reactivity(响应) 给数据添加观察者。created创建后created创建后执行。因为上边给数据添加了观察者，所以现在就可以访问到data里的数据了。这个钩子也是常用的，可以请求数据了。因为请求数据是异步的，所以发送请求宜早不宜迟，通常在这个时候发送请求。是否存在 elel 指明挂载目标。这个步骤就是判断一下是否有写 el ，如果没有就判断有没有调用实例上的$mount(’’) 方法调用。也就是下一张图。这两个是等价的。判断是否有 template判断是否有 template。如果有 template 则渲染 template 里的内容。如果没有 则渲染 el 指明的挂载对象里的内容。beforeMount挂载前beforeMount挂载前执行。替换 el这个时候会在实例上创建一个 el ，替换掉原来的 el。也是真正的挂载。mounted挂载后mounted挂载后执行。这个时候DOM已经加载完成了，可以操作DOM了。这个也是常用的钩子。一般操作DOM都是在这里。dataChange当数据有变动时，会触发下面这两个钩子。在 beforeUpdate更新前 和 updated更新后之间会进行DOM的重新渲染和补全。接着是 updated更新后callDestroybeforeDestroy销毁前和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>