1
data 选项来声明组件的响应式状态.
此选项的值应为返回一个对象的函数.
此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 this) 上.
export default {data() {return {count: 1}},// `mounted` 是生命周期钩子mounted() {// `this` 指向当前组件实例console.log(this.count) // => 1// 数据属性也可以被更改this.count = 2}
}虽然也可以不在 data 上定义，直接向组件实例添加新属性，但这个属性将无法触发响应式更新。
Vue 在组件实例上暴露的内置 API 使用 $ 作为前缀。它同时也为内部属性保留 _ 前缀。因此，你应该避免在顶层 data 上使用任何以这些字符作前缀的属性。
2
要为组件添加方法，我们需要用到 methods 选项。它应该是一个包含所有方法的对象：
export default {data() {return {count: 0}},methods: {increment() {this.count++}},mounted() {// 在其他方法或是生命周期中也可以调用方法this.increment()}
}和组件实例上的其他属性一样，方法也可以在模板上被访问。在模板中它们常常被用作事件监听器：
<button @click="increment">{{ count }}</button>3
在 Vue 中，默认情况下，状态是深度响应的。这意味着当改变嵌套对象或数组时，这些变化也会被检测到：
export default {data() {return {obj: {nested: { count: 0 },arr: ['foo', 'bar']}}},methods: {mutateDeeply() {// 以下都会按照期望工作this.obj.nested.count++this.obj.arr.push('baz')}}
}4
要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API：
import { nextTick } from 'vue'export default {methods: {async increment() {this.count++await nextTick()// 现在 DOM 已经更新了}}
}5
有状态方法, 这个公司项目好像没用到.
