1.VUE实例，VUE生命周期函数

最新推荐文章于 2022-09-06 01:15:29 发布

休息休息夏

最新推荐文章于 2022-09-06 01:15:29 发布

阅读量152

点赞数

分类专栏： VUE基础学习文章标签： vue.js html

本文链接：https://blog.csdn.net/qq_42881159/article/details/116947582

版权

VUE基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、MVC

M（Mode）数据层
V（View）视图层
C（Controller）控制层
M -> 发送通知 -> 控制层 -> 刷新视图
V -> 发送通知 -> 控制层 -> 刷新数据

二、MVVM

MVVM（ Model-View-ViewModel ）为一种设计模式，下图不仅概括了 MVVM 模式，还描述了在
Vue.js 中ViewModel 是如何和 View 以及 Model 进行交互的。
在这里插入图片描述
ViewModel 是 Vue.js 的核心，它是一个 Vue 实例。
当创建了ViewModel 后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners 和 Data Bindings 看作两个工具，它们是实现双向绑定的关键。
从 View 看，ViewModel 中的 DOM Listeners 工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从 Model 看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

我们通过一组 Hello, world! 实例来深入了解 MVVM 设计模式

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head>
	<meta charset="UTF-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
	<title>vue</title>
	</head> 
		<body>
		<!-- V -->
		<div id="app"> 
			<!-- 双向绑定 --> 
			<input type="text" v-model="message"> 
			<!-- 绑定数据 --> 
			<h1>{{message}}</h1> 
		</div> 
		<!-- 引入库 --> 
		<script src="./node_modules/vue/dist/vue.js"></script> 
		<script src="./js/index.js"></script> 
		</body> 
	</html>
	// M 
	let model = { message: "Hello, vue.js!" }
	// VM 
	let vm = new Vue({ 
		// 挂载元素/值为选择器 
		el: "#app", 
		// Model/数据层/
		Object data: model 
	});

在这里插入图片描述
使用Vue的过程就是定义MVVM各个组成部分的过程。

定义View
定义Model
创建一个Vue实例或"ViewModel"，它用于连接View和Model

在这个示例中，选项对象的el属性指向View， el: ‘#app’ 表示该Vue实例将挂载到 "<div id=“app”></div> “这个元素；data属性指向Model， data: model 表示我们的Model是model对象。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时 {{ message }} 会被数据对象的message属性替换，所以页面上会输出"Hello World!”。

三、创建一个 vue 实例

上述 Hello, world! 示例已经结合 MVVM 设计模式创建了一个 vue 实例，这里不再阐述。

四、数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

五、生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
比如 created 钩子可以用来在一个实例被创建之后执行代码：

1、生命周期图示

下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
在这里插入图片描述

2.代码演示

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
      <h3>{{msg}}</h3>
      <button type="button" v-on:click="change">按钮</button>
      <button type="button" @click="destroy">销毁实例</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      msg:"你好，世界",
    },
    methods:{
      show(){
        console.log("我是Vue实例methods中定义的函数");
      },
        change(){
          this.msg="被发现了";
        },
        destroy(){
          this.$destroy();
        },

    },
      /*创建期间的生命周期函数*/

    /*舒适化VUE实例之前,此时只有el的值被加载，data和methods中的值都不存在，show会报错*/
    beforeCreate:function (){
      console.log("beforeCreate:data中的值是："+this.msg);
      // this.show();      //data和methods中的值都不存在，show会报错
        console.log(this.show);
      console.log("beforeCreate函数执行完毕")
    },
    /*实例化VUE后启动调用，测试data和methods的内容已经存在*/
    created(){
      console.log("created函数：data中的值："+this.msg);
        console.log(this.show);
      console.log("created函数执行完毕");
    },
    /*模板已经在内存中编译，尚未渲染到页面*/
    beforeMount(){
      console.log("beforeMount");
    },
    /*模板已经渲染到页面(该函数执行表示VUE实例真正的初始化完成)*/
    mounted(){
      console.log("mounted");
    },
    /*运行期间的生命周期函数*/

      /*数据更新之前执行,此时data中的值已经更新，但是页面上调用data的位置的值还未更新。*/
    beforeUpdate(){
        console.log("beforeUpdate函数：data中的值是："+this.msg);
        console.log(`页面中的值是：${document.querySelector("h3").innerText}`);
    },
      /*数据更新完成,此时data中的值和页面上显示的data的值相同;*/
      updated(){
          console.log("updated函数：data中的值："+this.msg);
          console.log(`页面中的值是：${document.querySelector("h3").innerText}`);
      },
      activate(){
          console.log("keep-alive组件激活时调用");
      },
      deactivated(){
          console.log("keep-alive组件被停用时候调用");
      },
      beforeDestroy(){
          console.log("实例被销毁之前被调用，此时实例正常调用");
          console.log(this.msg);
      },
      destroyed(){
          console.log("实例被销毁之后被调用，此时所有被绑定的事件和数据都会被移除");
      }
        });
</script>
</html>

点击“销毁实例”按钮后的结果为：
在这里插入图片描述

休息休息夏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.VUE实例，VUE生命周期函数

一、MVCM（Mode）数据层V（View）视图层C（Controller）控制层M -> 发送通知 -> 控制层 -> 刷新视图V -> 发送通知 -> 控制层 -> 刷新数据二、MVVMMVVM（ Model-View-ViewModel ）为一种设计模式，下图不仅概括了 MVVM 模式，还描述了在Vue.js 中ViewModel 是如何和 View 以及 Model 进行交互的。ViewModel 是 Vue.js 的核心，它是一个 Vue
复制链接

扫一扫

专栏目录