vue学习笔记四

本文是对笔记三的补充：

实例生命周期

• beforeCreate：组件实例刚刚创建好之后，此时，组件实例中还没有提升任何的成员

• created：组件实例中已经提升了该有成员，但是，此时还没有渲染页面的任何内容

• beforeMount: 组件即将进行渲染，但是还没有进行渲染，此时，已经编译好模板，渲染的所有条件已经满足

• mounted：【重要！！！】，组件已经完成了渲染(页面可见)

• 此时，等待组件更新（当一个组件的属性或状态发生变化的时候，会自动重新渲染）

• beforeUpdate：组件即将更新，还没有更新，此时，得到的数据是新的，但是界面是旧的

• updated：组件已经完成更新，此时数据和界面都是新的

• beforeDestroy: 当组件即将被销毁时

• destroyed：当组件已经被销毁后

coding example
在学习笔记三中的app.js 测试了这几个函数(beforeCreate、created、beforeMount、mounted)，代码如下：

import pager from "./components/pager.js"
import movies from "./components/movieList.js"
import movieService from "./services/movieService.js"
import loading from "./components/loading.js"
const template = `
    <div id="test">
        <movie-list :datas="datas"></movie-list>
        <pager 
        :value="page" 
        @input="handlePageChange"
        :total="total" 
        :page-size="pageSize" 
        :panelNumber="5"
        ></pager>
        <loading :show="isLoading"/>
    </div>
`;

export default {
    data() {
        return {
            page: 1,
            total: 0,
            pageSize: 3,
            isLoading: false,
            datas: []
        }
    },
    beforeCreate(){
          console.log(this.page);
    },
    created(){
          console.log(this.page);
          console.log(document.getElementById("test"));
    },
    beforeMount(){
          console.log(document.getElementById("test"));
    },
    mounted() {
          console.log(document.getElementById("test"));
          this.setMovies();
    },
    methods: {
        async setMovies() {
            this.isLoading = true;
            window.onscroll = (e) => e.preventDefault();
            let datas = await movieService.getMovies(this.page, this.pageSize);
            this.total = datas.total;
            this.datas = datas.datas;
            this.isLoading = false;
        },
        handlePageChange(newPage) {
            this.page = newPage;
            this.setMovies();
        }
    },
    components: {
        pager,
        movieList: movies,
        loading
    },
    template
}

四个函数分别打印出来的内容如下：

插槽

插槽（slot）位置放置的是：使用组件时传递的元素内容

例如在制作蒙层时所用(app.js <--- loading.js <--- modal.js)
loading.js

import modal from "./modal.js"

const template = `
    <modal v-if="show">
        <div class="loading">
            加载中...
        </div>
    </modal>
`;

export default {
    template,
    props: {
        show: {
            default: false
        }
    },
    components: {
        modal
    }
}

modal.js

const template = `
    <div class="modal">
        <div class="center">
            <slot></slot>
        </div>
    </div>
`;

export default {
    template
}

其中在modal.js中有slot，所以在其父组件loading.js中的slot,slot可以插入任何形式的元素