VUE(二)：VUE实例对象与生命周期

最新推荐文章于 2022-06-17 13:56:10 发布

算云烟

最新推荐文章于 2022-06-17 13:56:10 发布

阅读量722

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/zxcbnm7089/article/details/109482424

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、创建vue实例对象

1.每个 `Vue` 应用都是通过用 `Vue` 函数创建一个新的 `Vue` 实例开始的：

var vm = new Vue({
	// 选项
})

2.DOM元素关联

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染；可以通过el属性来指定。

例如一段html模板：

<div id="app">
</div>

然后创建Vue实例，关联这个div:

var vm = new Vue({
	el:"#app"
})

这样，Vue就可以基于id为 app 的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

3.vue实例对象可选选项

官网提供了非常全面的属性

https://cn.vuejs.org/v2/api/#选项-数据

这里列举一些常见的可选属性

属性	说明	简单示例
el	传入string类型或者html-element元素，提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例	el: ‘#app’
data	接受object类型或者有返回值的function函数。 Vue 将会递归将 data 的 property 转换为 getter/setter 对象必须是纯粹的对象 (含有零个或多个的 key/value 对)	data:{a:1}
methods	在vue实例中定义一些方法，可供dom元素中调用使用必须完整的声明函数，不能使用带箭头的函数	methods:{…}
computed	计算属性：类似于methods属性中的function函数但不同的是，这个函数必须带有返回值	computed:{…}
filters	过滤器，用来处理一些额外内容	…

其他属性与说明请访问上述官网查看

示例使用

<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data : {
            count:1,
            bookList:[{
                bookId:1,
                bookName: '《算法导论》',
                bookDate: '2006-9',
                bookPrice: 85.00,
                bookCount:1
            },{
                bookId:2,
                bookName: '《计算机基础》',
                bookDate: '2008-1',
                bookPrice: 65.00,
                bookCount:1
            },{
                bookId:3,
                bookName: '《Linux系统》',
                bookDate: '2009-12',
                bookPrice: 70.00,
                bookCount:1
            },{
                bookId:4,
                bookName: '《青年文摘》',
                bookDate: '2008-10',
                bookPrice: 14.00,
                bookCount:1
            }]
        },
        filters:{
            showPrice(price){
                return '￥'+ price.toFixed(2);
            }
        },
        methods:{
            bookNumAdd(book){
                book.bookCount++;
            },
            bookNumSub(book){
                if( book.bookCount > 1){
                    book.bookCount--;
                }

            },
            removeBookHandle(index){
                console.log(index);
                this.bookList.splice(index,1);
            }
        },
        computed:{
            totalPrice(){
                let totalPrice = 0;
                for (let i = 0; i < this.bookList.length ; i++) {
                    totalPrice += this.bookList[i].bookPrice *    	
                        	this.bookList[i].bookCount
                }
                return totalPrice;
            }
        }
        })
</script>

二、VUE的生命周期函数

1.生命周期图示

下面这张图来自官方：
在这里插入图片描述

2.生命周期函数说明

在进行函数说明前先执行一下代码，然后在浏览器控制台中观察打印的内容

<!DOCTYPE html>
<html lang="en">
<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>
 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
 <div id="app">
 <h1>{{message}}</h1>
 </div>
</body>
<script>
 var vm = new Vue({
 el: '#app',
 data: {
 message: 'Vue的生命周期'
 },
 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>
</html>

各阶段的函数说明

1、beforeCreated（）
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。也就是说，仅仅创建了VUE实例对象，是个空壳子，什么都没有加载，所以VUE实例对象中的属性值不可访问

--------------控制台输出-----------
el : undefined，
data : undefined，
message: undefined

2、created（）
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。也就是说，vue实例中的data、watch、methods属性方法已完成配置，可以访问了。

主要应用：调用数据，调用方法，调用异步函数

示例代码：

<div id="app">
    <ul>
        <li v-for="(item,index) of list" key="index">{{item}}--{{message}}</li>
    </ul>

    <p>p1</p>
    <p>p1</p>
    <p>p1</p>
</div>
<script type="text/javascript">
    //实例化Vue
    var app = new Vue({
        el:'#app',
        data:{
            message:'this is message',
            list:['aaaaaaaa','bbbbbbb','ccccccc']
        },
        //时刻监测数据message的变化,一但那变化就会调该函数
        watch:{
            //message必须和监测的data名字一样
            message:function(){
                console.log('watch:','message 变了')
            }
        },
        methods:{
            foo:function(){
                console.log('foo : ','这是初始化方法')
            }
        },
        //created钩子
        created:function(){
            //调用Vue的data
            console.log("created : ",this.message);
            //调用Vue方法
            this.foo();
            //因为我们是通过v-for循环遍历li，所以created之前挂载阶段还没开始.是无法获取li的个数的
            console.log('li数量：',document.getElementsByTagName('li').length);
            //直接加载出来的DOM是可以直接获取到的
            console.log('p个数：',document.getElementsByTagName('p').length);
        },
    })
</script>

控制台输出：
created: this is message
foo: 这是初始化方法，
li数量：1
p个数：3

可以看到这一阶段可以访问data里的内容，执行methods里的方法。并且获取的DOM元素是HTML直接加载出来的DOM，但是无法获取到通过挂载模板生成的DOM（例如：v-for循环遍历Vue.list生成li）

3、beforeMount（）
在挂载开始之前被调用：相关的 render 函数首次被调用。也就是说vue实例中render选项里的函数将会被执行。
并且DOM中双花括号取的值还未加载，还是JavaScript中的虚拟DOM形式存在的

在这里插入图片描述

4、mounted（）
挂载完成，只要执行了mounted函数，就表示整个Vue实例初始化完毕了，此时组件已经脱离了创建阶段，进入了运行阶段。el 被新创建的 vm.$el 替换，此时双花括号里的值也被加载了，DOM元素也处理完成
在这里插入图片描述

5、beforeUpdate（）

数据更新前调用，可用于获取更新前的状态.$vm.data更新之后，虚拟DOM重新渲染和打补丁之前被调用。也就是说，可以在这个钩子中进一步地修改$vm.data，这不会触发附加的重渲染过程

6、updated()

官方说明：虚拟DOM重新渲染和打补丁之后被调用。
解释说明：当这个钩子函数被调用时，组件DOM的data已经更新，所以你现在可以执行依赖于DOM的操作。但是不要在此时修改data，否则会继续触发beforeUpdate、updated这两个生命周期，进入死循环！

从生命周期图中可以看出，从图中我们可以看到，当 vue 中的数据发生改变，会触发对应组件的重新渲染（re-render），先后调用 beforeUpdate 和 updated 钩子函数。

在浏览器控制台输入：

vm.message = '触发组件更新'

控制台输出结果为：

在这里插入图片描述

两个函数中的 data 都已经更新为 “触发组件更新”，是因为这两个函数都发生在 data （vue实例中的data对象）改变之后。区别是 beforeUpdate 发生在 view 层的改变之前，也就是页面还没有重新渲染，此时页面仍然显示 “Vue的生命周期”（beforeUpdate 也是在页面重新渲染前修改 data 的最后时机）；而 updated 是发生在 view 层改变之后，也就是此时的页面已经重新渲染为 “触发组件更新”。

7、beforeDestrioy（）

在实例销毁之前调用，此时实例仍然完全可用，
这一步还可以用this来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件

8、destroyed
destroyed 函数在实例被销毁之后调用，此时 vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。

算云烟

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
VUE(二)：VUE实例对象与生命周期

一、创建vue实例对象1.每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：var vm = new Vue({ // 选项})2.DOM元素关联每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染；可以通过el属性来指定。例如一段html模板：<div id="app"></div>然后创建Vue实例，关联这个div:var vm = new Vue({ el:"#app"})这样，Vue就可以基于i
复制链接

扫一扫