Vue生命周期中的組件化你知道嗎

更新時(shí)間：2022年03月08日 15:53:42 作者：BHW1293773843

這篇文章主要為大家詳細(xì)介紹了Vue生命周期中的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

引出生命周期

此時(shí)調(diào)用change，定時(shí)器回調(diào)修改opacity，數(shù)據(jù)修改，模板重新解析，再次調(diào)用change。

銷毀流程

解綁（自定義）事件監(jiān)聽(tīng)器

生命周期

生命周期總結(jié)

 <div id="root">
        <!-- <h2 :style="{opacity}">hello,{{name}}</h2> -->
        <h2 :style="{opacity:opacity}">hello,{{name}}</h2>
        <button @click="stop">click stop</button>
        <button @click="opacity = 1">opacity 1</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                name: "atguigu",
                opacity: 1,
            },
            methods: {
                stop(){
                    this.$destroy();
                }
            },
            beforeDestroy() {
                clearInterval(this.timer);
            },
            //vue完成模板解析，并把初始的真實(shí)的dom元素放入頁(yè)面后（掛載完畢），會(huì)調(diào)用該函數(shù)。
            mounted() {
                this.timer = setInterval(() => {
                    this.opacity -= 0.01;
                    if (this.opacity <= 0) { this.opacity = 1 }
                }, 16);
            },
        });
    </script>

組件化

template:

整個(gè)root容器當(dāng)作模板

會(huì)直接替換掉root，把template當(dāng)作模板進(jìn)行解析。

非單文件組件

data需要用函數(shù)式寫(xiě)法

<div id="root">
        <h2>{{msg}}</h2>
       <!--組件標(biāo)簽-->
       <school>
       </school>
       <hr>
       <student>       
       </student>
       <student>   
       </student>
       <hello>
       </hello>
    </div>
    <div id="root2">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        //創(chuàng)建school組件
       const school = Vue.extend({
            template:`
            <div>
                <h2>schoolname:{{schoolname}}</h2>
                 <h2>schoolage{{schoolage}}</h2>
                 <button @click='show'>點(diǎn)擊提示</button>
            </div>
            `,
            data(){
                return{
                    schoolname: "atguigu",
                    schoolage:20,
                }
            },
            methods: {
                show(){
                    alert(this.schoolname);
                }
            },
       });
       //創(chuàng)建stu組件
       const student = Vue.extend({
        template:`
            <div>
                <h2>stuname:{{stuname}}</h2>
                <h2>stuage{{stuage}}</h2>
            </div>
            `,
            data(){
                return{
                    stuname:'tom',
                    stuage:18,
                }
            },
       });
       //創(chuàng)建hello組件
       const hello = Vue.extend({
            template:`
            <div>
                <h2>stuname:{{stuname}}</h2>
                <h2>stuage{{stuage}}</h2>
            </div>
            `,
            data(){
                return{
                    stuname:'tom',
                    stuage:18,
                }
            },
       });
       //全局注冊(cè)組件
       Vue.component('hello',hello);
        new Vue({
            el: "#root",
            data:{
                msg:'this is msg'
            },
            //局部注冊(cè)組件
            components:{
                school:school,
                student,
            }
        });
    </script>

組件的幾個(gè)注意點(diǎn)

組件的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        //創(chuàng)建student組件
        const student = Vue.extend({
            template:`
            <div>
                <h2>stuname:{{stuname}}</h2>
                <h2>stuage{{stuage}}</h2>
            </div>
            `,
            data(){
                return{
                    stuname:'tom',
                    stuage:18,
                }
            },
       });
        //創(chuàng)建school組件
       const school = Vue.extend({
            template:`
            <div>
                <h2>schoolname:{{schoolname}}</h2>
                 <h2>schoolage{{schoolage}}</h2>
                 <button @click='show'>點(diǎn)擊提示</button>
                 <student></student>
            </div>
            `,
            data(){
                return{
                    schoolname: "atguigu",
                    schoolage:20,
                }
            },
            methods: {
                show(){
                    alert(this.schoolname);
                }
            }, 
            components:{
                student:student,               
            }  
       });
       //創(chuàng)建hello組件
       const hello = Vue.extend({
            template:`
            <div>
                <h2>{{msg}}</h2>
            </div>
            `,
            data(){
                return{
                    msg:'hello!'
                }
            },
       });
       const app = Vue.extend({
           template:`
                <div>
                    <hello></hello>
                    <school></school>
                </div>
           `,
           components:{
                school,
                hello,              
            } 
       })
       //vue
        new Vue({
            template:'<app></app>',
            el: "#root",
            //局部注冊(cè)組件
            components:{
                app,             
            }         
        });
    </script>
</body>
</html>

VueComponent

每次調(diào)用extend，都返回了一個(gè)VueComponent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!--組件標(biāo)簽-->
        <school>
        </school>
        <hello>
        </hello>
    </div>
    <div id="root2">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        //創(chuàng)建school組件
        const school = Vue.extend({
            template: `
            <div>
                <h2>schoolname:{{schoolname}}</h2>
                 <h2>schoolage{{schoolage}}</h2>
                 <button @click='show'>點(diǎn)擊提示</button>
            </div>
            `,
            data() {
                return {
                    schoolname: "atguigu",
                    schoolage: 20,
                }
            },
            methods: {
                show() {
                    console.log(this)//VueComponent實(shí)例對(duì)象  vc
                    alert(this.schoolname);
                }
            },
        });
        //創(chuàng)建hello組件
        const hello = Vue.extend({
            template: `
            <div>
                <h2>hello:{{hello}}</h2>
            </div>
            `,
            data() {
                return {
                    hello: "hello",
                }
            },
        });
        console.log(school);//一個(gè)構(gòu)造函數(shù)
        console.log(hello);//一個(gè)構(gòu)造函數(shù)
        console.log(school === hello);//false
        new Vue({
            el: "#root",
            data: {
            },
            //局部注冊(cè)組件
            components: {
                school: school,
                hello:hello,
            }
        });
    </script>
</body>
</html>