? ? ?/* 創(chuàng)建前 */
? ? ? ? ? ? beforeCreate(){
? ? ? ? ? ? ? ? /* 在這里 data中的屬性值獲取不到 */
? ? ? ? ? ? ? ? /* 但是能獲取到vue的實例化對象 */
? ? ? ? ? ? ? ?/* ?console.log('組件實例剛被創(chuàng)建',this,this.msg) */
? ? ? ? ? ? },
? ? ? ? ? ? ?/* 創(chuàng)建后 */
? ? ? ? ? ? created(){
? ? ? ? ? ? ? ? /* 組件實例剛創(chuàng)建完成，屬性已經(jīng)綁定，但是DOM還未生成，$le屬性還不存在 */
? ? ? ? ? ? ? ? /* console.log(this.el,this.msg); */
? ? ? ? ? ? ? ? /* 你請求接口就是走這個鉤子函數(shù)發(fā)出的 */
? ? ? ? ? ? ? ? /* 可以從ajax里面獲取數(shù)據(jù) */
? ? ? ? ? ? ? ? /* setTimeout(()=>{
? ? ? ? ? ? ? ? ? ? let data = "請求成功"
? ? ? ? ? ? ? ? ? ? this.msg = data;
? ? ? ? ? ? ? ? },500) */
? ? ? ? ? ? ? ? this.timer = setInterval(() => {
? ? ? ? ? ? ? ? ? ? console.log(123)
? ? ? ? ? ? ? ? }, 500);
? ? ? ? ? ? ? ? /* this.time是定時器返回的唯一id */
? ? ? ? ? ? ? ? console.log(this.timer);
? ? ? ? ? ? },
? ? ? ? ? ? /* 掛載前 */
? ? ? ? ? ? beforeMount(){
? ? ? ? ? ? ? ? /* 模板編譯、掛載之前 */
? ? ? ? ? ? ? ? /* console.log(this.$el) */
? ? ? ? ? ? ? ? /* this.$el只是獲取到了 但是沒有掛載到模板上 */
? ? ? ? ? ? ? ? /* data里面的值是渲染不出來的 */
? ? ? ? ? ? ? ? /* console.log( document.getElementsByTagName('h1')[0] ); */
? ? ? ? ? ? ? ? /* console.log(document.getElementsByTagName('h1')[0].innerHTML) */
? ? ? ? ? ? },
? ? ? ? ? ? /* 掛載后 */
? ? ? ? ? ? mounted(){
? ? ? ? ? ? ? ? /* this.$el 獲取到了 而且掛載到模板上 */
? ? ? ? ? ? ? ?/* ?console.log(this.$el) */
? ? ? ? ? ? ? ?/* data里面的值是可以渲染出來的 */
? ? ? ? ? ? ? /* ?console.log( document.getElementsByTagName('h1')[0] ); */
? ? ? ? ? ? ? /* console.log(document.getElementsByTagName('h1')[0].innerHTML) */
? ? ? ? ? ? ? /* ?在dom的操作中適合在mounted里面去執(zhí)行 */
? ? ? ? ? ? },
? ? beforeUpdate() {
? ? ? ? ? ? ? ? /* beforeUpdate值更新完之后，沒有第一時間渲染到模板上
? ? ? ? ? ? ? ? 只是在vue的實例中把data數(shù)據(jù)給改了 */
? ? ? ? ? ? ? ? console.log('beforeUpdate組件更新之前')
? ? ? ? ? ? },
?? updated() {
? ? ? ? ? ? ? ? /* updated是既改了data中的值，又把值渲染到了模板上 */
? ? ? ? ? ? ? ? console.log('updated組件更新之后')
? ? ? ? ? ? ? ? /* 使用的場景 需要改變data中數(shù)據(jù)，你還需要做一些事情（業(yè)務邏輯需要的事情，
? ? ? ? ? ? ? ? 例如埋點信息上報，echarts圖獲取了最新的數(shù)據(jù)需要重新渲染視圖的時候），
? ? ? ? ? ? ? ? 那么這個時候就需要updated函數(shù)來觸發(fā) */
? ? ? ? ? ? },
? ? ? ? ? ? /* 路由進行跳轉(zhuǎn)的時候，會觸發(fā)下面的函數(shù)（組件之間的切換） */
? ? ? ? ? ? beforeDestroy() {
? ? ? ? ? ? ? ? /* 執(zhí)行beforeDestroy的vue的實例化對象還存在，還沒有被完全的銷毀 */
? ? ? ? ? ? ? ? console.log('beforeDestroy組件銷毀前調(diào)用')
? ? ? ? ? ? },
?destroyed() {
? ? ? ? ? ? ? ? /* 在執(zhí)行destroyed的時候，組件已經(jīng)完全被銷毀 */
? ? ? ? ? ? ? ? console.log('destroyed組件銷毀后調(diào)用')
? ? ? ? ? ? ? ? clearInterval(this.timer)
? ? ? ? ? ? ? ? /* 使用destroyed來清除定時器，避免全局的使用，造成性能消耗 */
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? /* 銷毀組件 */
? ? ? ? ? ? ? ? destoryzj(){
? ? ? ? ? ? ? ? ? ? this.$destroy()
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
