1.函數式組件的使用
<!-- * @Description: 函數式組件 vueStudy/funCom.vue * @Version: 2.0 * @Autor: lhl * @Date: 2020-07-07 11:24:53 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:41:49 -->
<!-- -->
<template functional>
<div class="fun-content-box">
<h1 @click="clickFunCom">函數式組件</h1>
<p>Stateless(無狀態)：組件自身是沒有狀態的</p>
<p>Instanceless(無實例)：組件自身沒有實例，也就是沒有this</p>
<p>函數式組件比普通組件性能更好，缺點是定義的數據沒有響應式</p>
<p><a href="https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6" target="_blank">官方介紹</a></p>
<h1 @click="clickFunCom">函數式組件的特點</h1>
<p>1、沒有管理任何狀態</p>
<p>2、沒有監聽任何傳遞給它的狀態</p>
<p>3、沒有生命周期方法</p>
<p>4、它只是接收一些prop的函數</p>
<p>5、渲染開銷低，因為函數式組件只是函數</p>
<h1 @click="clickFunCom">why用函數式組件</h1>
<p>因為函數式組件沒有狀態，不需要像vue的響應式系統一樣需要經過額外的初始化,但它仍然會對相應的變化做出響應式改變，比如新傳入props，但是在組件本身中，它卻無法知道數據何時發生了更改，因為它不維護自己的狀態</p>
<h1 @click="clickFunCom">什么情況下用函數式組件</h1>
<p>展示組件例如純粹的靜態界面，遍歷的每一項內容，高階組件（接收一個組件作為參數，返回一個被包裝過的組件）</p>
</div>
</template>
<script> export default { data() { //這里存放數據
return { } }, created() { // 無打印
console.log(this,'this--functional組件') }, methods:{ clickFunCom(){ // Invalid handler for event "click": got undefined
console.log(1111) } }, } </script>
<style lang='scss' scoped> //@import url(); 引入公共css類 </style>
2.組件通訊的完整方法
<!-- * @Description: vue父組件 vueStudy/parent.vue * @Version: 2.0 * @Autor: lhl * @Date: 2020-07-06 13:46:17 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:42:04 -->
<!-- 父組件 -->
<template>
<div class="parent-box">
<p>父組件：根組件APP.vue傳過來的{{appData}}</p>
<p>vuex組件通信的內容：{{testContent}}</p>
<p>vuex組件通信的內容getters獲取的狀態：{{getTestContent}}</p>
<el-button type="primary" @click="add(10)">vuex--mutations--同步方式增加</el-button>
<el-button type="success" @click="reduce(5)">vuex--mutations--同步方式減少</el-button>
<p>數量變化===>事件后面直接傳參即可：{{getCount}}</p>
<el-button type="primary" @click="add(10)">vuex--actions--異步方式增加</el-button>
<el-button type="success" @click="reduce(5)">vuex--actions--異步方式減少</el-button>
<p>數量變化===>事件后面直接傳參即可：{{getCount}}</p>
<el-button type="success" @click="getChildFun">父組件調用子組件的方法</el-button>
<hr />
<h1>父組件內容：</h1>
<div class="parent-content-box">
<el-card class="box-card" shadow="hover">
<div slot="header" class="clearfix">
<span>element-ui卡片</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按鈕</el-button>
</div>
<div v-for="(item,index) in socketModeList" :key="item.id" :data-index="index" class="text item">{{item.pattern}}</div>
</el-card>
<p class="pd10">子組件當前刪掉的框架名稱：{{currentJsCourseName}}</p>
</div>
<hr />
<h3>這里下面顯示子組件內容：</h3>
<div class="son-content-box">
<son :listData="list" @isDelete="changeSonComData" :age.sync="age" title="子組件的第一個屬性" data-id="1" data-desc="子組件第二個屬性" ref="myson"/>
</div>
</div>
</template>
<script> import son from "./son"; import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'; // 推薦用到哪個導入哪個
import eventBus from '@/util/eventBus' export default { inject: ['appData'], components: { son }, data() { //這里存放數據
return { otherProp:{ desc: 'attrs把其他的屬性一起展開傳過去' }, age: 27, currentJsCourseName: '', socketModeList: [{ id:1, pattern: '第一種：props傳遞子組件接受可以用數組形式或者對象（推薦對象形式）', },{ id:2, pattern: '第二種：子組件$emit使用，父組件監聽$on、EventBus（創建空的vue實例作為橋梁）', },{ id:3, pattern: '第三種：.sync（2.3.0+ 新增）、$attrs（2.4.0 新增）、$listeners（2.4.0 新增）', },{ id:4, pattern: '第四種：$parent、$children、ref', },{ id:5, pattern: '第五種：Provide & Inject(2.2.0 新增)', },{ id:6, pattern: 'vuex方式存儲', }], list: [ { id: 1, name: "vue" }, { id: 2, name: "react" }, { id: 3, name: "node" } ] } }, computed:{ ...mapGetters(['getTestContent','getCount']), // 注明如果state不做更改可以直接 ...mapState(['count','testContent'])
...mapState({ testContent: state => state.commonInfo.testContent + '[<===>哈哈組件內新加入的內容方便控制state<===>]' }) }, methods: { ...mapMutations(['add','reduce']), ...mapActions(['add','reduce']), changeSonComData(val){ console.log(val,'val---刪除操作時候子組件觸發[isDelete]傳過來的數據') this.currentJsCourseName = val.name; }, getChildFun(){ // ref的使用 ref也可以獲取dom 獲取組件實例等操作
this.$refs.myson.toSendFun() } }, created() { console.log(this.$children[1],'父組件的created') // undefined "父組件的created $children並不保證順序，也不是響應式的"
}, mounted() { console.log(this.$children[1].childData,'父組件的mounted') // 我是子組件data里面的數據 父組件的mounted（讀取子組件數據，注意$children子組件的排序是不安全的）
eventBus.$on('sendFather', msg => { console.log(msg,'msg') }) } }; </script>
<style lang='scss' scoped> //@import url(); 引入公共css類 .parent-content-box { padding: 10px;
} .text { font-size: 14px; cursor: pointer;
} .item { margin-bottom: 18px; cursor: pointer;
} .clearfix:before, .clearfix:after { display: table; content: "";
} .clearfix:after { clear: both;
}
</style>
<!-- * @Description: vue子組件 vueStudy/son.vue * @Version: 2.0 * @Autor: lhl * @Date: 2020-07-06 13:46:35 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:42:12 -->
<!-- -->
<template>
<div class="son-box pd10">
<p>stripe斑馬線屬性</p>
<p>border縱向邊框</p>
<p>show-header是否顯示表頭</p>
<p>子組件從父組件那邊拿到的東西{{$attrs}}</p>
<p>父組件傳遞下來的但是在你調用的那組件（this）里沒注冊使用的，需要繼續傳遞下去的所有</p>
<p>傳過來的年齡{{age}}</p>
<p>通過設置inheritAttrs到false，默認行為將會被去掉比如標簽上的placeholder屬性</p>
<p>子組件：根組件APP.vue傳過來的{{appData}}</p>
<grandson v-bind="$attrs" v-on="$listeners"/>
<el-button type="primary" @click="sendMsg">eventBus測試通信</el-button>
<el-table :data="listData" style="width: 100%" stripe border>
<el-table-column prop="id" label="id" align="center"></el-table-column>
<el-table-column prop="name" label="前端三大框架" align="center"></el-table-column>
<el-table-column fixed="right" label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="editRow(scope.row)" type="text" size="small">編輯</el-button>
<el-button @click.native.prevent="deleteRow(scope.$index,scope.row)" type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script> import grandson from './grandson' import eventBus from '@/util/eventBus' export default { inject: ['appData'], components:{ grandson }, props:{ age:{ type: Number, default: "" }, listData:{ type: Array, // 數據類型
default: () => { return [] }, required: true // Missing required prop: "listData" 必須傳
} }, data() { //這里存放數據
return { sendMsgToFather: '子組件通過【eventBus】給父組件發過來的問候消息', childData: '我是子組件data里面的數據' } }, methods: { // 刪除
deleteRow(index,row){ this.listData.splice(index,1); this.$emit('isDelete',row) }, // 編輯
editRow(row){ this.$set(row,'name','angular'); // 點擊當前行替換當前值
}, sendMsg(){ eventBus.$emit('sendFather',this.sendMsgToFather) }, // 給父組件調用的測試方法
toSendFun(){ alert('我是子組件的方法') } }, created() { console.log(this.age) // 27
console.log(this.$parent.age) // 27 父組件取值
}, mounted() {} }; </script>
<style lang='scss' scoped> //@import url(); 引入公共css類 </style>
<!-- * @Description: vue 孫子組件 vueStudy/grandson.vue * @Version: 2.0 * @Autor: lhl * @Date: 2020-07-08 17:36:32 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:41:57 -->
<!-- -->
<template>
<div class="garnd-content-box ptb10">
<p>孫子組件：根組件APP.vue傳過來的{{appData}}</p>
<p>孫子組件內容："hello，vue組件通信學會了么？"</p>
<p>孫子組件從父組件那邊拿到的東西（從子組件傳下來；可以批量向下傳入屬性;class 和 style 除外）{{$attrs}}</p>
</div>
</template>
<script> export default { inject: ['appData'], components: {}, data() { //這里存放數據
return {} }, created() { } } </script>
<style lang='scss' scoped> //@import url(); 引入公共css類 </style>
3.組件守衛
<!-- * @Description: vue守衛 ---【1.路由守衛 2.組件守衛】 vueStudy/vueRouterDefend.vue * @Version: 2.0 * @Autor: lhl * @Date: 2020-07-07 11:47:31 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:42:29 -->
<!-- -->
<template>
<div class="defen-content-box">
<h1>vue-router 三種導航鈎子</h1>
<p>全局前置守衛router.beforeEach：當一個導航觸發時，全局前置守衛按照創建順序調用。守衛是異步解析執行，此時導航在所有守衛 resolve 完之前一直處於 等待中；使用場景：每次切換頁面的時候，讓頁面滾動到最頂部、修改每個頁面的title、開啟loading、登錄/token驗證等</p>
<p>全局后置鈎子router.afterEach 使用場景token過期清空；關閉loading等</p>
<p>路由獨享的守衛beforeEnter配置在單獨路由里面功能類似beforeRouteEnter</p>
<h1>組件內的鈎子：</h1>
<p>(2.2 新增)beforeRouteEnter：該守衛不能訪問this，因為守衛在導航確認前被調用，因此即將登場的新組件還沒被創建 </p>
<p>(2.2 新增)beforeRouteUpdate：在當前路由改變，但是該組件被復用時調用 </p>
<p>(2.2 新增)beforeRouteLeave：這個離開守衛通常用來禁止用戶在還未保存修改前突然離開。該導航可以通過 next(false) 來取消</p>
<el-button type="primary" @click="goNextPage">離開去下一個頁面</el-button>
<p>定義 vue-router 的動態路（在router目錄下的index.js文件中，對path屬性加上/:id。）由並且獲取傳過來的值（使用router對象的params.id）</p>
<div>
<h1>完整的導航解析流程</h1>
<p> 1、導航被觸發。</p>
<p>2、在失活的組件里調用 beforeRouteLeave 守衛。</p>
<p>3、調用全局的 beforeEach 守衛。</p>
<p>4、在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。</p>
<p>5、在路由配置里調用 beforeEnter。</p>
<p>6、解析異步路由組件。</p>
<p>7、在被激活的組件里調用 beforeRouteEnter。</p>
<p>8、調用全局的 beforeResolve 守衛 (2.5+)。</p>
<p>9、導航被確認。</p>
<p>10、調用全局的 afterEach 鈎子。</p>
<p>11、觸發 DOM 更新。</p>
<p>12、用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。</p>
</div>
</div>
</template>
<script> export default { data() { //這里存放數據
return {} }, created() {}, methods:{ goNextPage(){ this.$router.push({ name: 'vueRouterParmas' }) } }, // 組件內的守衛 進來前
beforeRouteEnter (to, from, next) { // 在渲染該組件的對應路由被 confirm 前調用
// 不！能！獲取組件實例 `this`
// 因為當守衛執行前，組件實例還沒被創建
next(vm => { // 通過 `vm` 訪問組件實例
// 如果不符合情況比如此頁面沒有權限或者重定向可以在此操作 還可以進行接口調用
}) }, // 更新完成 路由參數改變視圖不變的情況下 也可以watch $route 解決
beforeRouteUpdate (to, from, next) { // 在當前路由改變，但是該組件被復用時調用
// 舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
// 由於會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鈎子就會在這個情況下被調用。
// 可以訪問組件實例 `this`
}, // 要離開時候
beforeRouteLeave (to, from, next) { // 使用場景：離開頁面的溫馨提示（比如還有內容沒有保存放棄離開）、清除定時器避免占用內存(當然可以在destroyed()鈎子中也可以)
const bool = window.confirm('Do you really want to leave? you have unsaved changes!') console.log(bool,'bool') if (bool) { next() // 正常放行
} else { next(false) // 不讓它跳轉停留在頁面
} // 導航離開該組件的對應路由時調用
// 可以訪問組件實例 `this`
} } </script>
<style lang='scss' scoped> //@import url(); 引入公共css類 </style>
4.路由傳參方式區別
<!-- * @Description: vue傳參 vueStudy/vueRouterParmas.vue * @Version: 2.0 * @Autor: lhl * @Date: 2020-07-07 11:46:13 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:42:36 -->
<!-- -->
<template>
<div class="router-content-box">
<p>this.$route 信息參數（query、params）傳參獲取</p>
<p>this.$router 功能函數，go()，push()等方法調用</p>
<p>路由出口必須有<router-view></router-view>提供</p>
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/">去首頁(聲明式)</router-link>
<p>編程式的導航:router.push()/router.replace()它不會向 history 添加新記錄router.go()在 history 記錄中向前或者后退多少步,類似 window.history.go(n)</p>
<el-button type="primary" @click="goNextPage('query')">query方式傳參</el-button>
<el-button type="success" @click="goNextPage('params')">params方式傳參</el-button>
<p>注意：query方式傳參params方式傳參的不同;params只能用name來引入路由不能用path否則接受的參數為undefined</p>
<p>頁面取參數：this.$route.query.xx 和 this.$route.params.xx</p>
<p>query更加類似於我們ajax中get傳參，params則類似於post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，后者則不顯示</p>
<p>路由模式mode的配置可選值："hash" (瀏覽器環境) | "history" (依賴 HTML5 History API 和服務器配置) | "abstract"(Node.js 環境)</p>
<p><a href="https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90">history模式官方文檔</a></p>
<p>query刷新不會丟失query里面的數據，params刷新會丟失params里面的數據</p>
<p>vue更新數組時候觸發視圖更新的方法： push()向數組的末尾添加一個或更多元素； pop()刪除並返回數組的最后一個元素； shift()刪除並返回數組的第一個元素； unshift()向數組的開頭添加一個或更多元素，並返回新的長度。； splice()刪除元素，並向數組添加新元素。； sort()對數組的元素進行排序； reverse()顛倒數組中元素的順序。 </p>
</div>
</template>
<script> export default { data() { //這里存放數據
return {} }, watch: { $route(to, from) { // 對路由變化作出響應...
console.log(to, from) // 比如路由參數改變視圖不變化 這里再調用一次獲取數據的接口
} }, methods: { // 跳轉
goNextPage(type){ if(type === 'query'){ this.$router.push({ name: 'vueRouterDefend', // 地址欄看的到參數
query:{ id: 1 } }) } else if (type === 'params'){ // 地址欄看不到參數
this.$router.replace({ name: 'funCom', params:{ id:2, pid:2 } }) } } }, created() { console.log(this.$route, '$route') // 路由信息 fullPath、hash、meta、matched、params、query、path等參數信息
console.log(this.$router, '$router') // VueRouter實例 __proto__ 的方法
} }; </script>
<style lang='scss' scoped> //@import url(); 引入公共css類 </style>
5.vue的常用語法：生命周期、常用語法匯總等 localStorage、sessionStorage作用域以及使用異同
<!-- * @Description: 常用語法總結 vueStudy/vueGrammar.vue * @Version: 2.0 * @Autor: lhl * @Date: 2020-08-13 17:46:08 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:42:20 -->
<!-- -->
<template>
<div class="vue-grammar-box">
<h1>vue常用語法總結</h1>
<h3>生命周期總結</h3>
<p> 總共分為8個階段: 創建前/后，載入前/后，更新前/后，銷毀前/后。 創建前/后： 在beforeCreated階段，vue實例的掛載元素 $el 和 數據對象 data 都為undefined，還未初始化。在created階段，vue實例的數據對象data有了， $el 還沒有。 載入前/后： 在beforeMount階段，vue實例的 $el 和data都初始化了，但還是掛載之前為虛擬的dom節點，data.msg還未替換。在mounted階段，vue實例掛載完成，data.msg成功渲染。 更新前/后： 當data變化時，會觸發beforeUpdate和updated方法。 銷毀前/后： 在執行destroy方法后，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在。 beforecreated：el 和 data 並未初始化 created:完成了 data 數據的初始化，el沒有 beforeMount：完成了 el 和 data 初始化 mounted ：完成掛載 </p>
<p>額外說個鈎子函數activated：keep-alive組件激活時調用。也就是當頁面存在緩存時調用（緩存處理）</p>
<el-button type="primary" @click="updateData">更新數據---{{msg}}---只有事先設置好的data變量改變並且要在頁面重新渲染完成之后,才會進updated方法，光改變data變量但不渲染頁面是不會進入的</el-button>
<div>
<el-button type="primary" @click="$destroy()">銷毀---調用銷毀后頁面--完全銷毀一個實例。清理它與其它實例的連接，解綁它的全部指令及事件監聽器,只剩下dom空殼</el-button>
</div>
<div>
<el-button type="primary" @click="updateComp">組件被強制更新</el-button>
</div>
<p>computed方式計算的數據帶有緩存性質{{getTotleList1}}</p>
<div>
<el-button type="primary" @click="getSum">方法計算的數據總和（實時）---{{total2}}</el-button>
</div>
<p>Vue2中注冊在router-link上事件無效解決方法：使用 @click.native 。原因：router-link會阻止click事件，.native指直接監聽一個原生事件。</p>
<p>RouterLink在IE和Firefox中不起作用（路由不跳轉）的問題：方法一：只用a標簽，不適用button標簽；方法二：使用button標簽和Router.navigate方法</p>
<p>vue項目是打包了(根據vue-cli腳手架規范)一個js文件，一個css文件</p>
<p> computed屬性和methods區別：{{nomarl}}methods每次調用時會重新執行函數，而computed在其內部變量不變或其返回值不變的情況下多次調用只會執行一次，后續執行時直接從緩存中獲取該computed的結果; methods調用幾次則方法執行幾次，而computed只執行一次。因此推斷computed存在緩存機制; computed直接以對象屬性方式調用，而methods必須要函數執行才可以得到結果。 兩種方式的最終結果確實是完全相同的; </p>
<p> $nextTick的使用：當你修改了data 的值然后馬上獲取這個 dom 元素的值，是不能獲取到更新后的值， 你需要使用 $nextTick 這個回調，讓修改后的 data 值渲染更新到 dom 元素之后在獲取，才能成功； </p>
<!-- 普通遍歷方式 -->
<div v-for="(item,index) in list1" :key="index">
<p>{{item}}---{{index}}</p>
</div>
<!-- template 優化dom性能 尤其flex布局時候用處很大 （推薦）template是包裹元素不會渲染在html上面-->
<template v-for="(item,index) in list2">
<p :key="item">{{item}}---{{index}}</p>
</template>
<p> vue安全：HTTP 安全漏洞，諸如偽造跨站請求 (CSRF/XSRF) 和跨站腳本注入 (XSSI)，都是后端重點關注的方向，因此並不是 Vue 所擔心的。 </p>
<div>
<p>過濾器使用（管道符操作）： {{ amount1 | capitalAmountChange }} => 過濾器使用： {{ amount2 | capitalAmountChange }}</p>
<p>過濾器傳遞參數：{{ testStr | changeCase(1)}}</p>
<p>4：{{num | toFiexed2 }} 保留2位小數</p>
<p>{{num | returnUnit}}=>組件內filters的用法,多個過濾器使用只需要多加一個管道符 | 即可</p>
<p>數字千分符： {{ amount1 | thousandMarkFis }} --- {{ amount3 | thousandMarkFis }}</p>
<h1>localStorage和sessionStorage區別在於存儲有效期和作用域不同</h1>
<p> localStorage存儲的數據時永久性的 localStorage存儲的作用域限定在文檔源級別,即: 協議,主機名,端口 不同瀏覽器之間的localStorage不能互相訪問 </p>
<p> sessionStorage的有效期和存儲數據的腳本所在的最頂層的礦口或者瀏覽器標簽頁是一樣的,一旦窗口或者標簽頁被永久關閉了,通過sessionStorage存儲的數據也被刪除了 sessionStorage作用域也限定在文檔源中 不同窗口和標簽頁各自擁有sessionStorage,無法共享 如果一個瀏覽器標簽頁包含兩個 iframe 它們包含的文檔是同源的,那么他們是可以共享的 </p>
</div>
</div>
</template>
<script> import { getQueryString } from '@/util/public' console.log(getQueryString,'工具方法在組件引用') export default { data() { //這里存放數據
return { msg: 'vue生命周期測試', list1: [1,2,3,4,5,6], list2: [6,7,8,9,10], total2: 0, amount1: 168752632, amount2: -1687, amount3: 12696.36955, testStr: 'abcd', num: '12.01703', timeTest: '2020-08-19' } }, // 組件單獨過濾器
filters:{ returnUnit(value){ return value + "元" } }, watch: { msg:{ handler: 'getList', // 回調的方法名（函數名）
immediate: true // 初始化調用一次
} }, computed:{ getTotleList1(){ let sum = 0; this.list1.map(e => { sum += e }) console.log(sum,'sum--computed') return sum }, nomarl:{ set(){ }, get(){ return 'computed最終的得到的結果是get方法的返回值，而set方法很少使用到' } } }, // 接口請求操作 loading事件等
beforeCreate(){ console.log("el:"+ this.$el + "===data:" + this.$data + "===data里面初始化的數據：" + this.msg, 111 , "===創建前") }, // 常用之生命周期一 接口請求操作等
created() { console.log("el:"+ this.$el + "===data:" + this.$data + "===data里面初始化的數據：" + this.msg, 222 , "===創建完畢") }, beforeMount(){ console.log("el:"+ this.$el + "===data:" + this.$data + "===data里面初始化的數據：" + this.msg, 333 , "===掛載前") }, // 常用之生命周期二 dom操作 ref 接口請求操作等
mounted() { console.log("el:"+ this.$el + "===data:" + this.$data + "===data里面初始化的數據：" + this.msg, 444 , "===掛載后") }, beforeUpdate(){ console.log("el:"+ this.$el + "===data:" + this.$data + "===data里面初始化的數據：" + this.msg, 555, "===更新前") }, updated(){ console.log("el:"+ this.$el + "===data:" + this.$data + "===data里面初始化的數據：" + this.msg, 666 , "===更新后") console.log("=====我會先執行====="); this.$nextTick(function(){ //在下次 DOM 更新循環結束之后執行這個回調。在修改數據之后立即使用這個方法，獲取更新后的DOM.
console.log("=====我只能等頁面渲染完了才會立即執行====="); }) console.log("=====我雖然在最后但會比$nextTick先執行====="); }, beforeDestroy(){ console.log("el:"+ this.$el + "===data:" + this.$data + "===data里面初始化的數據：" + this.msg, 777, "===銷毀前") }, // 事件解除綁定 比如定時器 手動綁定的事件
destroyed(){ console.log("el:"+ this.$el + "===data:" + this.$data + "===data里面初始化的數據：" + this.msg, 888, "===銷毀后") }, methods: { getList(){ console.log('調用列表或者詳情接口') }, updateData(){ this.msg = '更新數據了...' console.log(this.msg, '更新數據') }, updateComp(){ // 這里強制會走 beforeUpdate updated 鈎子
this.$forceUpdate(); console.log('組件被強制更新了') }, // es6求和
getSum(){ let sum = this.list2.reduce((prev, curr) => { return prev + curr; }) this.total2 = sum; console.log(this.total2,'sum--methods') } }, }; </script>
<style lang='scss' scoped> //@import url(); 引入公共css類 </style>
以上代碼本人項目實測！！！真實可靠，請勿隨意轉載~轉載請注明出處~~~謝謝合作！