你想知道的vue实例

vue的实例

vue构造器

每个Vue.js应用都是通过 构造函数Vue 创建一个 Vue的根实例 启动的：

我们首先复习一下构造函数

function a(){
}
// 当一个函数用来创建一个实例的时候，就叫做构造函数
// 我们大家都知道,a是一个函数，通过a()调用，那么怎么实例化一个函数呢？
// 在函数名a前加上 new 就是实例化函数 new是新建或者实例化的意思
// 实例化的对象就叫做实例对象
new a();

因为我们已经引入了vue.js，所以我们只需要直接 new Vue就可以实例化一个Vue对象

var vm = new Vue({
    el:"",
    data:{}
})

vue的属性和方法

每个 Vue 实例都会代理其 data 对象里所有的属性，这些被代理属性是响应的。也就是说值的任何改变都是触发视图的重新渲染。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

如果你想访问Vue实例里的属性，那么你需要在属性前加上 $

// 比如你想访问vm里的el，你需要这样写
console.log(vm.$el)

Vue实例的生命周期

我们思考一下，生命周期是什么，人的生命周期又是什么？
以人为例，生命周期简单的讲就是生老病死，复杂的讲，就是一个人出生前，出生后的婴儿期，少儿期（学龄前），儿童期，少年期，青年期，成年期，老年期，高龄期, 死亡。

Vue实例同样有生命周期，我们将其概括为create,mount,update,destroy四个周期，每个 Vue 实例在被创建之前都要经过一系列的初始化过程。在配置数据观测(data observer)、编译模板、挂载实例到 DOM ，然后在数据变化时更新 DOM 的过程中，实例会调用一些生命周期钩子。created 这个钩子在实例被创建之后被调用;mounted这个钩子在实例渲染到模板时调用;updated这个钩子在数据改变时调用;destroyed这个钩子在实例销毁时调用。