Vue | 03 实例

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

创建一个Vue实例

每一个Vue应用都需要从使用Vue函数创建一个Vue实例开始：

var vm = new Vue({
    //options
})

虽然和 MVVM pattern 不太相关，Vue的设计部分来自于它的灵感，例如习惯上，我们常常使用vm（ViewModel的简写）代指一个Vue实例。

在创建了一个Vue实例的时候，在里面写我们的操作。这个指南会告诉我们怎样使用这些操作去实现我们的行为。你也可以参考完整的API reference.

用new Vue创建的是一个Vue实例的根节点，内部是可选控件的树状嵌套，可复用的组件，一个todo 应用的组件库可能像这样：

Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

稍后我们将讨论 the component system现在，我们仅仅需要知道所有的Vue组件也是Vue实例，能够接受相同的操作对象（除了一些根节点特有的操作）。

数据和方法

当一个Vue实例被创建，它添加建立在所有data对象的属性给Vue的响应系统。当这些属性的值改变的时候，视图将作出反应，更新匹配的最新值。

// Our data object
var data = {a: 1}
// The object is added to a Vue instance
var vm = new Vue({
    data: data
})
// Getting the property on the instance
// returns the one from the original data
vm.a = 2
data.a //=> 2
//  ...and vice-versa
data.a = 3
vm.a // => 3

当data改变的时候，视图会被重新渲染。当data内的属性作出反应的时候data会被通知，意思是说，如果你增加了一个新的属性，像：

vm.b = 'hi'

b不会触发任何视图更新，所以所有使用到的属性要在data中定义并初始化。例如：

data：{
    newTodoText：''，
    visitCount:0,
    hideCompletedTodos:false,
    todos:[],
    error:null
}

Object.freeze()是一个仅有的例外，用于阻止一个已经存在的属性被改变，也就是说响应系统是不能追踪到这个属性的改变的。

var obj = {
    foo: 'bar'
}
Object.freeze(obj)
new Vue({
    el: '#app',
    data: obj
})

<div id="app">
   <p>
       {{ foo }}
    </p>
    <!-- this will no longer update 'foo'! -->
    <button v-on:click="'foo = 'baz'">
        Change it
    </button>
</div>

除了data属性之外，Vue实例公开了许多有用的实例属性和方法。 官方定义用$作为前缀，用于与我们自己定义的区分开来。例如

var data = {a：1}
var vm = new Vue({
    el:'#example',
    data: data
})
vm.$data === data // => ture
vm.$el === document.getElementById('example') // => true
// $watch is an instance method
vm.$watch('a', function (newValue, oldValue){
    // This callback will be called when 'vm.a' changes
})

完整的属性和方法查看 API reference。

实例生命周期钩子

每一个Vue实例的创建过程都要经历一系列的初始化步骤，例如，它需要去建立数据监听，编译模板，挂载实例到DOM，当数据改变的时候更新DOM，沿着这个路径，他也运行被称为生命周期钩子（lifecycle hooks）的函数，用户可以在合适的时候写他们自己的代码。

例如，一个实例被创建后会调用created函数：

new Vue({
    data:{
        a: 1
    },
    created: function () {
        // 'this' points to the vm instance
        console.log('a is:' + this.a)
    }
})
// => "a is: 1"

在Vue实例的不同阶段会有不同的钩子被调用，像mounted，updated，和destoryed。所有的生命周期钩子被调用，方法内部用this调用Vue实例。

不要使用箭头函数arrow functions（=>）去操作一个属性或回调，像这样created: () => console.log(this.a)或 vm.$watch('a', newValue => this.myMethod())。由于箭头函数绑定了父级的上下文，this将不会是你希望的Vue实例，结果常常是这样的错误Uncaught TypeError: Cannot read property of underfined or Uncaught TypeError: this.myMethod is not a function.

生命周期图解

下表是实例的生命周期，现在不需要完全理解每一件事，随着学习和构建的深入，它会是一个有益的参考。

以上是 Vue | 03 实例 的全部内容， 来源链接： utcz.com/z/376544.html

回到顶部