Vue生命周期中的组件化你知道吗

2024-07-28 23:58:17

引出生命周期

此时调用change，定时器回调修改opacity，数据修改，模板重新解析，再次调用change。

销毁流程

解绑（自定义）事件监听器

生命周期

生命周期总结

 <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完成模板解析，并把初始的真实的dom元素放入页面后（挂载完毕），会调用该函数。
            mounted() {
                this.timer = setInterval(() => {
                    this.opacity -= 0.01;
                    if (this.opacity <= 0) { this.opacity = 1 }
                }, 16);
            },
        });
    </script>

组件化

template:

整个root容器当作模板

会直接替换掉root，把template当作模板进行解析。

非单文件组件

data需要用函数式写法

<div id="root">
        <h2>{{msg}}</h2>
       <!--组件标签-->
       <school>
       </school>
       <hr>
       <student>
       </student>
       <student>
       </student>
       <hello>
       </hello>
    </div>
    <div id="root2">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        //创建school组件
       const school = Vue.extend({
            template:`
            <div>
                <h2>schoolname:{{schoolname}}</h2>
                 <h2>schoolage{{schoolage}}</h2>
                 <button @click='show'>点击提示</button>
            </div>
            `,
            data(){
                return{
                    schoolname: "atguigu",
                    schoolage:20,
                }
            },
            methods: {
                show(){
                    alert(this.schoolname);
                }
            },
       });
       //创建stu组件
       const student = Vue.extend({
        template:`
            <div>
                <h2>stuname:{{stuname}}</h2>
                <h2>stuage{{stuage}}</h2>
            </div>
            `,
            data(){
                return{
                    stuname:'tom',
                    stuage:18,
                }
            },
       });
       //创建hello组件
       const hello = Vue.extend({
            template:`
            <div>
                <h2>stuname:{{stuname}}</h2>
                <h2>stuage{{stuage}}</h2>
            </div>
            `,
            data(){
                return{
                    stuname:'tom',
                    stuage:18,
                }
            },
       });
       //全局注册组件
       Vue.component('hello',hello);
        new Vue({
            el: "#root",
            data:{
                msg:'this is msg'
            },
            //局部注册组件
            components:{
                school:school,
                student,
            }
        });
    </script>

组件的几个注意点

组件的嵌套

<!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;
        //创建student组件
        const student = Vue.extend({
            template:`
            <div>
                <h2>stuname:{{stuname}}</h2>
                <h2>stuage{{stuage}}</h2>
            </div>
            `,
            data(){
                return{
                    stuname:'tom',
                    stuage:18,
                }
            },
       });
        //创建school组件
       const school = Vue.extend({
            template:`
            <div>
                <h2>schoolname:{{schoolname}}</h2>
                 <h2>schoolage{{schoolage}}</h2>
                 <button @click='show'>点击提示</button>
                 <student></student>
            </div>
            `,
            data(){
                return{
                    schoolname: "atguigu",
                    schoolage:20,
                }
            },
            methods: {
                show(){
                    alert(this.schoolname);
                }
            },
            components:{
                student:student,
            }
       });
       //创建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",
            //局部注册组件
            components:{
                app,
            }
        });
    </script>
</body>
</html>

VueComponent

每次调用extend，都返回了一个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">
        <!--组件标签-->
        <school>
        </school>
        <hello>
        </hello>
    </div>
    <div id="root2">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        //创建school组件
        const school = Vue.extend({
            template: `
            <div>
                <h2>schoolname:{{schoolname}}</h2>
                 <h2>schoolage{{schoolage}}</h2>
                 <button @click='show'>点击提示</button>
            </div>
            `,
            data() {
                return {
                    schoolname: "atguigu",
                    schoolage: 20,
                }
            },
            methods: {
                show() {
                    console.log(this)//VueComponent实例对象  vc
                    alert(this.schoolname);
                }
            },
        });
        //创建hello组件
        const hello = Vue.extend({
            template: `
            <div>
                <h2>hello:{{hello}}</h2>
            </div>
            `,
            data() {
                return {
                    hello: "hello",
                }
            },
        });
        console.log(school);//一个构造函数
        console.log(hello);//一个构造函数
        console.log(school === hello);//false
        new Vue({
            el: "#root",
            data: {
            },
            //局部注册组件
            components: {
                school: school,
                hello:hello,
            }
        });
    </script>
</body>
</html>

Vue实例与组件实例

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

Vue 生命周期和数据共享详解

目录 1.组件的生命周期 1.1生命周期与生命周期函数 1.2组件生命周期函数的分类 1.3生命周期图示以及详解 2.组件之间的数据共享 2.1组件之间的关系 2.2父向子传值 2.3子向父传值 2.4兄弟之间的数据关系总结 1. 组件的生命周期 1.1 生命周期与生命周期函数生命周期是指一个组件从创建 => 运行 => 销毁的整个时间段,强调的是一个时间段.生命周期函数是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 1.2 组件生命周期函数的分类 1.3
Vue的生命周期一起来看看

目录 1.生命周期(重要) 1.1初步认识生命周期 1.2生命周期流程(8个) 1.3生命周期详细流程图 1.4常用的生命周期钩子: 1.4.1关于销毁 1.4.2关于父子组件的生命周期 1.5小案例 1.6代码举例说明生命周期钩子总结 1. 生命周期(重要) 1.1 初步认识生命周期别名:生命周期回调函数.生命周期函数.生命周期钩子. 生命周期是什么?Vue在关键时刻帮我们调用的一些特殊名称的函数. 生命周期函数的名字不可更改,但函数内部的具体内容由程序员自行编写生命周期函数中的this
浅谈vue的生命周期

目录 1.什么是生命周期?有什么作用? 2.第一次加载页面会触发哪几个钩子? 3.简述每个周期应用于哪个场景? 4.created和mounted的区别 5.vue在哪个生命周期获取数据? 总结 1.什么是生命周期?有什么作用? 每一个vue实例在创建时都要经历一系列的初始化过程-----例如需要设置监听,编译模板,将实例挂载到dom并在数据发生变化时更新dom等等.同时这个时候也会运行一些生命周期钩子的函数,这些函数,给用户在不同阶段添加代码的机会.例如:如果需要某些插件操作dom节点,如果想
Vue组件化开发思考

一般说到组件,我首先想到的是弹窗,其他就大脑空白了. 因为觉得这个是在项目中最常用的功能,提取出来方便复用的才是组件- 然而我才发现这个想法是有问题的. 我发觉可能从意识上把Vue的组件和UI库的组件(弹窗之类的)混淆了... 缘起于最近的一个表单开发,页面上有2个是联动菜单的选项. 首先想到的是,这个样式和选择地址的那个联动菜单,完全一样哈- (废话,同一个项目当然要保持ui风格的相同啊!) 不过差别在于我这个是一个1级一个2级, 地址那个是4级的. 然后我就想着把那个地址的组件引进来
Vue组件化通讯的实例代码

1. Vue的组成文件(.vue) 分为三部分,分别对应html,js,css <template></template> <script></script> <style></style> 2. Vue的生命周期函数 beforeCreate() 创建数据之前 created() 创建数据我们在这里的得到我们在data里面创建的数据 beforeMount() // Dom渲染完成前 mounted() //Dom渲染完成 bef
Vue3生命周期钩子函数详解

本文实例为大家分享了Vue3生命周期钩子函数的具体代码,供大家参考,具体内容如下一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 methodonBeforeMount() : 组件挂载到节点上之前执行的函数:onMounted() : 组件挂载完成后执行的函数:onBeforeUpdate(): 组件更新之前执行的函数:onUpdated(): 组件更新完成之后执行的函数:onBeforeUnm
Vue 组件化基本使用详情

目录 1.什么叫做组件化 2.基本使用前言: 有时候有一组html结构的代码,并且这个上面可能还绑定了事件.然后这段代码可能有多个地方都被使用到了,如果都是拷贝来拷贝去,很多代码都是重复的,包括事件部分的代码都是重复的.那么这时候我们就可以把这些代码封装成一个组件,以后在使用的时候就跟使用普通的html元素一样,拿过来用就可以了. 1.什么叫做组件化 vue.js 有两大法宝,一个是数据驱动,另一个就是组件化,那么问题来了,什么叫做组件化,为什么要组件化?接下来我就针对这两个问题一一解答,所谓
老生常谈vue的生命周期

目录一.什么是生命周期二.生命周期函数三.生命周期的流程四.简单的生命周期代码总结一.什么是生命周期每一个组件都可能经历从创建,挂载,更新,卸载的过程. 在这个过程中的某一个阶段,用于可能会想要添加一些属于自己的逻辑代码(比如组件创建完后就请求一些服务器数据) 但是我们如何知道目前组件正在哪一个过程中,vue给我们提供了组件的生命周期函数. 二.生命周期函数生命周期函数是一个钩子函数,在某一个时间会被vue内部源码进行回调. 通过对生命周期函数的回调,我们知道目前组件正在经历什么
Vue生命周期中的组件化你知道吗

目录引出生命周期销毁流程生命周期生命周期总结组件化非单文件组件组件的几个注意点组件的嵌套 VueComponent Vue实例与组件实例总结引出生命周期此时调用change,定时器回调修改opacity,数据修改,模板重新解析,再次调用change. 销毁流程解绑(自定义)事件监听器生命周期生命周期总结 <div id="root"> <!-- <h2 :style="{opacity}">hello,{{n
Vue生命周期中的八个钩子函数相机

目录 1.beforeCreate和created函数 2.beforeMount和mounted函数 3.beforeUpdate和updated函数 4.beforeDestroy和destroyed函数总结 1.beforeCreate和created函数 beforeCreate和created以初始化:数据监测.数据代理为分界线. 在执行beforeCreate()之前,将初始化生命周期.时间,但数据代理还没有开始. (1)beforeCreate():在初始化数据监测.数据代理之前
Vue生命周期介绍和钩子函数详解

目录 Vue生命周期介绍和钩子函数 VUE生命周期钩子 Vue生命周期简介 create 和 mounted 相关 update 相关 destroy 相关总结 Vue生命周期介绍和钩子函数组件每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事,比如Ajax获取数据就可以在mounted阶段.从Vue实例被创建开始到该实例最终被销毁的整个过程叫做VUE的生命周期,在这个生命周期内发生了下面的事情:从vue实例被创建开始,首先vue实例被创建,之后开始数据的初始化,编译模板,挂载do
深入理解Vue生命周期、手动挂载及挂载子组件

本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip
React中的生命周期和子组件

目录组件生命周期创建创建期获取虚拟DOM 子组件组件生命周期为了说明组件的创建,存在,销毁的过程,react提供了组件的生命周期,共分三大周期: 创建期:说明组件的创建的过程,相当于人的少年存在期:说明组件的存在的过程,相当于人的中年销毁期:说明组件的销毁的过程,相当于人的老年创建创建期创建期共分五个阶段: ES5开发中,对应五个方法:getDefaultProps,getInitialsate, componentWillMount, render, co
vue生命周期和react生命周期对比【推荐】

个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它. 一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁二 vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h
浅谈Vuex注入Vue生命周期的过程

这篇文章是[前端词典]系列文章的第 13 篇文章,接下的 9 篇我会围绕着 Vue 展开,希望这 9 篇文章可以使大家加深对 Vue 的了解.当然这些文章的前提是默认你对 Vue 有一定的基础.如果一点基础都没有,建议先看官方文档. 第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会复杂很多. 为何使用 Vuex 使用 Vue 我们就不可避免的会遇
vue生命周期的探索

那么进入某个路由对应的组件的时候,我们会触发哪些类型的周期呢? 根实例的加载相关的生命周期(beforeCreate.created.beforeMount.mounted) 组件实例的加载相关的生命周期(beforeCreate.created.beforeMount.mounted) 全局路由勾子(router.beforeEach) 组件路由勾子(beforeRouteEnter) 组件路由勾子的next里的回调(beforeRouteEnter) 指令的周期(bind,inserted)
vue生命周期实例小结

本文实例分析了vue生命周期.分享给大家供大家参考,具体如下: 每个Vue实例都存在完整的生命周期,经历从创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程.如下图所示钩子函数 vue的完整生命周期可分为三个阶段:初始化阶段.运行阶段和销毁阶段.共存在很多钩子函数,他们在vue生命周期不同的阶段进行操作,列举如下: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy de
Vue生命周期activated之返回上一页不重新请求数据操作

activated: 英文原意:使活动.触发在Vue的生命周期函数中,这个好像用的不是特别多?(也许只是在我的工作中这个用的不多,或者说叫几乎不用这个) 一.需求前不久在项目中有这样一个需求: 在订单页面的地址信息栏,默认通过接口填充了一个已经设置过的一个的默认地址,现在要跳转去地址列表重新选择一个地址并回填到订单页面的地址信息位置二.尝试常规操作: 我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用. 但是我们知道,