遇见 vue.js --------阿文的vue.js学习笔记（3）----vue实例

**
新学习新征程，我们一起踏上学习 vue.js的新长征

… … …

关注我，我们一起学习进步。

1、构造器

我们所写的每个 Vue 应用都是通过使用 Vue 函数创建一个新的 Vue 实例开始的。

即

    new Vue({
    
    
    			})

这就相当于是用构造器构造了一个 Vue实例，而实例就是我们的MVVM中的 VM，所以很多时候我们经常会使用 vm (即ViewModel 的缩写) 这个变量名来表示 Vue 实例

写作

（1）                   或者     (2)
var vm = new Vue({
    
              const  vm = new Vue({
    
    
   // 选项							//选项
   })							 )}

你可以简单的理解为这里的 vm 就是我们创建出来的实例，而我们的 new Vue 就是我们创建实例的构造器。

2、属性与方法

我们创建的每一个Vue实例都会代理其 data 对象里所有的属性。

举个例子：
在这里插入图片描述
执行结果：你可以看到是true 因为我们实例vm 是代理data 中的所有属性的，所以二者是相等的。

下面我们补充一个知识点：
Object.freeze() 函数，这个函数的作用是将对象进行冻结，冻结之后，后续的操作将无法再对该对象进行修改

举个例子：首先来看这段代码打印出来的name
在这里插入图片描述
执行结果：

然后我们对其进行更改，再最下面添加一条 vm.name="我的数据已被更改"

执行结果：你可以看出我们的name被更改了
在这里插入图片描述
然后我们在中间添加上我们的 Object.freeze() 方法

执行结果：你可以发现我们的数据回到最先的样子，即在我们添加了Object.freeze()方法之后我们下面的修改无效了
在这里插入图片描述

当然除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与我们自己定义的属性区分开来。

就用我们上面的例子中的实例 vm 中的 $el 和 $data 都是我们实例中的属性 property。

最后我们再补充一个实例方法 $swatch

可以简单的理解为监听一个元素，当监听的这个元素发生变化之后，执行里面写的函数

我们举个例子：我们写一个输入框然后当我们输入框中的数据发生改变之后，弹出内容
在这里插入图片描述
执行结果：你可以看到当我们输入框内的值一旦发生改变，就会执行我们$watch 里面的函数弹出“我的值已改变”

3、生命周期

我们的每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

解释： 将实例挂载到 DOM 的意思就是将我们的实例显示在我们的网页上

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

简单来说我们实例的生命周期大致分为以下几个阶段
beforeCreate 创建前
created 创建后
beforeMounted 挂载视图前
mounted 挂载视图后
beforeUpdate 更新前
updated 更新完之后
beforeDestroyed 死亡前
destroyed 死亡之后

从上面我们可以看出，我们的周期可以分为好几个阶段，而在这些阶段中也会运行一些叫做 生命周期钩子 的函数，这给了我们在不同阶段添加自己的代码的机会。

大致也就是上面的阶段
在这里插入图片描述
简单举个例子：

执行结果： 你可以发现因为我们执行之后就意味着，我们的实例已经被创建并且被挂载在我们的 dom 页面上的，所以这二者的钩子函数就被直接调用。因为我们的数据并未被更改所以 update 这个钩子函数没有被调用。
而是等我们在输入框中更改数据之后，我们update这个钩子函数才被调用
在这里插入图片描述

**
关注校园君有话说公众号，回复 web前端免费领取50G 前端学习资料一份，我们一起学习进步吧。
在这里插入图片描述