【Vue.js 实例】vue.js看着官方文档的从0开始瞎摸学习

引用文字每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

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

- 数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

注意：当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中 存在的属性 才是响应式的（ Vue 会在初始化实例时对属性执行 getter/setter 转化）。也就是说如果你添加一个新的属性，比如：

看完这些代码不由地对“$"这个符号感到疑惑，于是去查了相关的 API 。

实例创建之后，可以通过 vm.$data 访问原始数据对象。"$"，其实是Vue创建的实例。

接着是 深入响应式原理 。

（1）检测变化的注意事项

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。以下是小demo。

（2）声明响应式属性

由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值

将message 设为空值（在 data 选项中声明 message），

（3）异步更新队列

当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。

为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

例如（created）：

还有其他的生命周期钩子

注意不要使用箭头函数，因为生命周期钩子的this上下文只想它的Vue实例，但是箭头函数没有this

生命周期图示