Vue重点学习经验（1）MvvM，Vue生命周期，父子组件通信

最新推荐文章于 2023-08-24 11:26:09 发布

七月是我的生日

最新推荐文章于 2023-08-24 11:26:09 发布

阅读量333

点赞数 3

分类专栏： Vue学习文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/qq_43955202/article/details/104717947

版权

Vue学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1.对于MVVM的理解

MVVM图示

Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
(1) 模型Model层：也是数据层。
- 数据可能是我们固定的模拟数据，更多的是来自我们的服务器，从网络上请求下来的数据。
- 实际处理中，数据会比较复杂
(2) 视图View层：也是视图层。
- 在我们的前端开发中,通常就是DOM层。
- 主要作用是给用户展示各种信息。
(3) 视图模型层VueModel：也是视图模型层。
- 视图模型层是View和Model沟通的桥梁。
- 一方面它实现了Data Binding,也就是数据绑定，将Model的改变实时的反应到View中。
- 另外一方面它实现了DOM Listener,也就是DOM监听,在一些必要条件下改变对应的Data。
(4) 总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

2.Vue生命周期

VUE生命周期图示
在这里插入图片描述

（1）什么是Vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
（2）vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
（3）vue生命周期总共有几个阶段？
它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。
下面是一个大佬对vue生命周期的总结，我觉得非常不错，这里引用一下。
大佬的测试代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

当我们在页面上打开F12的时候，可以看到当前打印结果。
在这里插入图片描述

首先这里有两个已经解决了的问题。

页面在第一次加载时会触发哪几个钩子函数？
很明显我们可以看到beforeCreate，create，beforeMounted，mounted。
DOM 渲染在哪个周期中就已经完成？
+很明显是在mounted中完成了挂载，DOM渲染。
继续往下看：

第一次加载页面的钩子函数

beforeCreate：数据观测和初始化事件还没有开始。也就是el和data还没有初始化。
create：完成了data数据的初始化以及属性和方法的运算，初始化事件，此时$el属性还没有显示出来。（个人一般较多的在这里请求后端数据）。
beforeMounted：完成了el和data的初始化，实例编译模板，将data里面的数据和模板生成html，但此时还没有挂在html到页面上。
mounted：用新创建的$el替换el，将编译好的html替换el属性挂载到页面上去。

更新数据时的钩子函数

当我们在F12里面修改app.message数据的时候，上述代码执行以下结果。
在这里插入图片描述

beforeUpdata：在数据更新前调用。
Updata：数据更新后调用，虚拟dom修改数据并且渲染。
可以看到数据更新后两个生命周期函数中的data时同步的。

页面销毁时的钩子函数

当我们执行app.$destory()的时候执行。
在这里插入图片描述

beforeDestroy（销毁前）在实例销毁之前调用。实例仍然完全可用。
销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。

3.父子组件传值。

父组件通过 props (properties 属性的意思)向子组件传递数据

父组件里面将要传递的数据以变量的形式传递给子组件

<home-swiper :banners="banners" @swiperImageLoad="swiperImage"></home-swiper>

子组件里面定义props

props: {
      banners: {
        type: Array,
        required: true
      }
    },

子组件使用数据

<swiper-item v-for="(item, index) in banners" :key="index">

props 数据验证
// 1.通过数组传值
props:[‘cmessage’,‘cmovies’],

 //2.类型限制传值
 props:{
     //类型限制
     cmovies:Array,
     cmessage:String
 },

 //3.类型限制+ 提供默认值 + required : 必须传入的值
 //如果类型是对象或者数组的时候,默认值必须是一个函数
 props:{
     cmovies:{
         type:Array,
         default(){
             return ['宝鸡市','西安市','玉玲市','四川市']
         }
     },
     cmessage:{
         type:String,
         default:'北京欢迎你'
     }
 },

props 中的驼峰标识问题
v-bind 绑定的时候不支持驼峰标识如果是 cMovies 需要写成 c-movies 这样才可以达到我们想要的效果.

子组件通过事件向父组件发送消息

子组件传给父组件：$emit方法传递参数
代码实例

<!-- 子组件定义事件change（item）并且将要传递的数据当作参数传递过去-->
<button v-for='item in shopList' @click='change(item)'>{{ item.name }}</button>

<!--子组件发射自定义的函数，并且传递参数item-->
 change(item){
                    this.$emit('itemclick',item)
                }
<!-- 父组件监听子组件发送的事件-->
<cpn @itemclick='shopclick'></cpn>

<!-- 父组件定义函数拿到数据-->
 shopclick(item){
                    console.log(item.id + item.name)
                }

下一篇：Vue重点学习经验2

Vue双向绑定原理，以及简单双向绑定的实现
Vue定义路由以及Vue的路由实现：hash模式和 history模式
对keep-alive 的了解？

文章参考1：https://segmentfault.com/a/1190000016344599?utm_source=tag-newest

作者：沉静的闪光

文章参考2：https://segmentfault.com/a/1190000008010666
作者：城南

七月是我的生日

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue重点学习经验（1）MvvM，Vue生命周期，父子组件通信

1.对于MVVM的理解MVVM图示Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。(1) 模型Model层：也是数据层。数据可能是我们固定的模拟数据，更多的是来自我们的服务器，从网络上请求下来的数据。实际处理中，数据会比较复杂(2) 视图View层：也是视图层。在我们的前端开发中,通常就是DOM层。主要作用是给用户展示各种信...
复制链接

扫一扫