索鸟网

  1. 首页
  2. 【Vue实例】

【Vue实例】



使用过一段时间的vue1.0,现在vue已经更新了很多版本了,语法在很多地方也有了变化。在此记录一下重新学习的过程以及对vue的一些自己的理解。vue的介绍就直接连接到官网了,官网介绍很详细了【Vue介绍】

1. 构造函数

在使用之前我们首先需要构建vue实例

var vm = new Vue({

    })

以上代码是通过 new 构建了一个vue实例,构造函数中是一个对象,上面代码我用了一个空的对象,对象中可以包含 数据、模板、挂载元素、方法、生命周期钩子等选项。

【我们可以通过extend对vue构造器进行扩展】

var MyComponent = Vue.extend({
  // 扩展选项
})

// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

以上代码中通过extend进行了vue构造函数的扩展,我们使用 MyComponent 生成的每一个实例都将拥有扩展中的属性。


2. 属性与方法

我们上面在创建实例的时候传入的是一个空的对象,实际使用中这个对象中是有属性的。

let data = {
    name: "blue"
}

let vm = new Vue({
    data
})

vm.name === data.name;  //true

data.name = "Crazy";
vm.name;    // Crazy

vm.name = "Pink";
data.name;  //Pink

上面代码使用的是ES6的语法,应该能懂。上面代码中Vue实例 【vm】在创建的过程中加入了一个data属性,我们可以通过【vm】实例访问到 name 属性,说明vue实例会对data对象中的每一个属性进行【代理】(也就是托管),所以我们不管是更改【对象data】还是更改【实例vm】属性都会同步name属性。

let data = {
    name: "blue"
}

let vm = new Vue({
    data
})

vm.$data;

我们可以通过上面一种方式访问到整个实例的【data属性】对象,还有一些暴露在实例中的属性和方法,他们都是用$为前缀。这儿就不多说了参考手册里有详细的说明。【API参考手册】


3. Vue实例的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 【生命周期钩子】(一些实例方法,用于生命周期中我们更愿意叫他们为钩子函数) ,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:

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

也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。


4. Vue生命周期图示

下面这张图是官方给出的生命周期图示,我只是把它翻译成中文了

javascript

来源地址:https://segmentfault.com/a/1190000010489724 版权归作者所有!