本文主要是vue官网学习笔记

先说一下MVVM模型

Model-View-ViewModel，MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

创建一个空实例

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

创建实例里的选项决定了vue实例的行为。

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象。

同步响应

vue是同步响应的，可以理解为vue实例里的数据改变，对应的页面组件相关的属性也会发生改变，随后影响组件显示效果，但是这个值由vue对象到页面的过程是不需要程序员编写的。

在实例创建前（new Vue(ele:'selector')），这些对象没有和页面关联起来，是不会影响到页面的。

当使用js原生方法Object.freeze()时，对象不能再被改变，响应也不会起到作用了。

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

调用实例属性和方法加$，如vm.$data，如果调用data里面的数据，如data里的a，就是vm.a

实例生命周期钩子

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自己定义的名字，表示的是vue实例渲染页面对象过程中的一些操作，如create是指在创建完这个vue对象时（官网说明是创建vue对象而不是渲染页面对象）做的操作。

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

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

生命周期图

零 VUE实例

本文主要是vue官网学习笔记

创建一个空实例

同步响应

实例生命周期钩子

猜你喜欢