vuejs的結(jié)構(gòu)和生命周期
本內(nèi)容為系列內(nèi)容殿怜，全部?jī)?nèi)容請(qǐng)看我的vue教程分類
結(jié)構(gòu)
上一節(jié)我們實(shí)例化vue的時(shí)候傳遞了一個(gè)對(duì)象廉涕，那么這個(gè)對(duì)象具體是個(gè)什么樣的結(jié)構(gòu)那泻云，可以傳遞一些什么樣的值那
<script>
// 實(shí)例化一個(gè)vue
let vm = new Vue({
// 頁面中的掛載點(diǎn)
el: '#app',
// 定義內(nèi)部數(shù)據(jù)
data: {
},
// 方法列表
methods: {
},
// 監(jiān)聽事件
watch: {
},
// 計(jì)算屬性
computed: {
},
// 組件
components: {
},
// 私有過濾器
filters: {
},
//自定義私有指令
directives: {
}
})
</script>
那么圍繞這些屬性，將是我們本次基礎(chǔ)部分的內(nèi)容
什么是生命周期
我們上一節(jié)在created里面執(zhí)行了一個(gè)打印方法狐蜕，那么我說了這個(gè)就類似于jquery的$.ready一樣
那么具體有哪些常用的生命周期呢
這個(gè)東西就好比人的一生宠纯，你出生的時(shí)候做什么，成年的時(shí)候做什么层释，反正就是不同的階段做不動(dòng)的事情
那么我們就可以利用不同的生命周期來完成不同的事情比如
- 初始化數(shù)據(jù)
- 開啟和關(guān)閉進(jìn)度條
- 關(guān)閉頁面時(shí)保存數(shù)據(jù)
- ...
vue有哪些生命周期
<script>
let vm = new Vue({
el: '#app',
// 完成創(chuàng)建之前 不能使用data和methods中的數(shù)據(jù)
beforeCreate() {
console.log('before');
},
// 數(shù)據(jù)已經(jīng)初始化
created() {
console.log('created');
},
// 模板已將編輯在內(nèi)存但是并未渲染婆瓜，數(shù)據(jù)還未渲染到頁面中
beforeMount() {
},
//vue實(shí)例 已經(jīng)掛載好頁面了
mounted() {
},
// 更新頁面數(shù)據(jù)后 內(nèi)存中data的數(shù)據(jù)已經(jīng)改變 但是頁面中的數(shù)據(jù)還沒有完成渲染
beforeUpdate() {
},
// 更新數(shù)據(jù)后 頁面和data數(shù)據(jù)已經(jīng)同步了
updated() {
},
// 銷毀當(dāng)前實(shí)例
destroyed() {
},
})
</script>
這里這么多的生命周期，其實(shí)不是所有都是常用的贡羔，具體的使用我們會(huì)在后面一一講解廉白，這里只做一個(gè)了解
