vue实例以及实例生命周期

最新推荐文章于 2022-07-14 09:00:06 发布

铁枪王彦章

最新推荐文章于 2022-07-14 09:00:06 发布

阅读量281

点赞数

分类专栏： vue.js学习文章标签： vue实例生命周期

本文链接：https://blog.csdn.net/rosecurry/article/details/90597351

版权

vue.js学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文参考：https://cn.vuejs.org/v2/guide/instance.html

Vue实例

创建一个vue实例

每个vue应用都是通过Vue函数创建一个实例开始的。

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

当创建一个vue实例的时候，你可以有许多选项来完成自己想要的操作。

数据与方法

当一个vue实例被创建时，它将data对象中的所有属性都加入到Vue的响应系统中。当这些属性的值发生变化时，视图也会跟着对应变化。

var data = {a: 1}
var vm= new Vue({
	data: data
})
console.log(vm.a === data.a)

vm.a = 2
console.log(vm.a)

data.a = 3
console.log(vm.a)

当这些数据变化时，视图会进行重新渲染。需要注意的一点是，只有在vue实例被创建时data中存在的属性才是响应式的。也就是说在创建完成后再添加一个属性，比如：

vm.b = 'hi'

那么对b的改动不会触发任何视图更新。如果你知道在晚些时候需要一个属性，但是一开始它为空或不存在，那么仅需要设置一些初始值。比如：

data: {
	text: '',
	visitCount: 0,
	hideText: false,
	todos: [],
	errors: null
}

如果想要阻止现有的属性，可以使用Object.freeze(),这也就意味着响应系统无法在追加变化。

除了数据属性，vue实例还暴露了一些有用的实例属性方法。这些方法名前缀都带有$,以示和用户定义的属性区分开来。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

更多vue实例的属性和方法可以去官方API参考中查看。

实例生命周期钩子

每个vue实例在被创建时都会经过一系列的初始化过程-----例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这使得用户可以在不同阶段添加自己的代码。

比如，created钩子可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

其它的钩子，在生命周期的不同阶段被调用，如mounted、updated和destoryed。生命周期钩子的this上下文指向调用它的Vue实例。

注意：不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。。因为箭头函数并没有this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致报错。

生命周期函数

<!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 : "hello world!" 
      },
       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>

create和mount相关

运行上述代码，从打印结果可以看出

beforeCreate: el、data都没有加载；
created：el没有加载，data数据完成了初始化；
beforeMount: 完成了el和data的初始化；
mounted： 完成挂载。
在beforeMount时候 {{message}}还没有被渲染，只是占了位置，到mounted挂载的时候再把值渲染进去。

在这里插入图片描述

update相关

在浏览器console里执行以下代码：

app.message = "Have a nice day"

下面就能看到data里的值被修改后，将会触发update的操作。
在这里插入图片描述

destory相关

在浏览器console里，执行以下代码销毁vue实例后，再改变message值，vue不再对此响应。

app.$destory()

在这里插入图片描述

铁枪王彦章

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实例以及实例生命周期

Vue实例创建一个vue实例每个vue应用都是通过Vue函数创建一个实例开始的。var vm = new Vue({ //选项})当创建一个vue实例的时候，你可以有许多选项来完成自己想要的操作。数据与方法当一个vue实例被创建时，它将data对象中的所有属性都加入到Vue的响应系统中。当这些属性的值发生变化时，视图也会跟着对应变化。var data = {a: 1}var ...
复制链接

扫一扫