<p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>实例的<a href="http://www.js-code.com/tag/%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e9%92%a9%e5%ad%90" title="生命周期钩子" target="_blank">生命周期钩子</a>函数(8个)</p> <ol> <li>beforeCreate</li> </ol> <p>  刚 new了一个组件,无法访问到数据和真实的dom,基本上这个好像不能干啥</p> <ol> <li>created</li> </ol> <p>   data属性完成了赋值,可以对数据进行修改但是不会触发updated,在这里可以做初始数据的获取</p> <ol> <li>beforeMount</li> </ol> <p>   render准备要渲染了,函数中虚拟dom已经创建完成,这时候改变数据也不会触发update,在这里可以做初始数据的获取</p> <ol> <li>mounted</li> </ol> <p>   开始render,渲染出真实dom,执行mounted钩子函数,组件已经出现在页面中,数据,事件,都<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>都处理好了。这里你 可以改是进行真实的<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>操作</p> <ol> <li>beforeUpdate</li> </ol> <p>   组件,实例数据更新之前会执行的函数,虚拟<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>会重新构建虚拟DOM,与上一次的虚拟DOM对比后重新渲染。切记不可 进行数据修改否则会出现死循环</p> <ol> <li>updated</li> </ol> <p>   更新完会执行的函数,切记不可进行数据修改否则会出现死循环</p> <ol> <li>beforeDestroy</li> </ol> <p>   实例被销毁之前会执行的函数,做善后的工作,清除计时器,清除非指令绑定的事件等等</p> <ol> <li>destroyed</li> </ol> <p>   实例被销毁后会执行的函数,也可以做善后工作。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;hello&quot;> Hello World! </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: &quot;HelloWorld&quot;, data() { return { msg: &quot;Welcome to Your <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js App&quot; }; }, beforeCreate: function() { console.log(&quot;data属性光声明没有赋值的时候&quot;); }, created: function() { console.log(&quot;data属性完成了赋值&quot;); }, beforeMount: function() { console.log(&quot;页面上的{{name}}还没有被渲染成真正的数据&quot;); }, mounted: function() { console.log(&quot;页面上的{{name}}被渲染成真正的数据&quot;); }, beforeUpdate: function() { console.log(&quot; 数据(data属性)更新之前会执行的函数&quot;); }, updated: function() { console.log(&quot;数据(data属性)更新完会执行的函数&quot;); }, beforeDestroy: function() { console.log(&quot;实例被销毁之前会执行的函数&quot;); }, destroyed: function() { console.log(&quot;实例被销毁后会执行的函数&quot;); } }; </script></p> <style scoped> </style> <p>console这样一个输出顺序:" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hello"</span>&gt;</span> Hello World! <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">"HelloWorld"</span>, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">"Welcome to Your <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js App"</span> }; }, <span class="hljs-attr">beforeCreate</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"data属性光声明没有赋值的时候"</span>); }, <span class="hljs-attr">created</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"data属性完成了赋值"</span>); }, <span class="hljs-attr">beforeMount</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"页面上的{{name}}还没有被渲染成真正的数据"</span>); }, <span class="hljs-attr">mounted</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"页面上的{{name}}被渲染成真正的数据"</span>); }, <span class="hljs-attr">beforeUpdate</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">" 数据(data属性)更新之前会执行的函数"</span>); }, <span class="hljs-attr">updated</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"数据(data属性)更新完会执行的函数"</span>); }, <span class="hljs-attr">beforeDestroy</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"实例被销毁之前会执行的函数"</span>); }, <span class="hljs-attr">destroyed</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"实例被销毁后会执行的函数"</span>); } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> console这样一个输出顺序:</code></pre> <p>大概这样一个 <a href="http://www.js-code.com/tag/%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e9%92%a9%e5%ad%90" title="生命周期钩子" target="_blank">生命周期钩子</a>函数执行的顺序,包括我之前是用angular开发跟vue一样 他也有自己的<a href="http://www.js-code.com/tag/%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e9%92%a9%e5%ad%90" title="浏览关于“生命周期钩子”的文章" target="_blank" class="tag_link">生命周期钩子</a>函数。</p> <p>生命周期简单来说就是一个组件从创建到初始化到销毁的一个过程,在这个过程中有这些生命周期钩子函数我们可以更方便的去操作整一个组件。</p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_16183.html