这里是记录一下常规的使用

data

最常用的，定义一些使用到的数据，以一种函数的表现方式

data(){return{}
}

声明的数据写在return中

computed

较少使用，称为计算属性。
从名称和使用方式来看，是将其作为一种属性使用的，相当于data中声明的数据。

比如官方的例子：

export default {data() {return {author: {name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']}}},computed: {// 一个计算属性的 getterpublishedBooksMessage() {// `this` 指向当前组件实例return this.author.books.length > 0 ? 'Yes' : 'No'}}
}

在页面中使用的时候

<p>Has published books:</p>
<span>{{ name }}</span>
<span>{{ publishedBooksMessage }}</span>

之所以使用计算属性，因为它与data不同的是

1. 该属性以一种函数的表现形式存在于computed中，需要一个返回值
2. 该属性是依赖于data中的属性改变的，data中的属性变化，引起该属性的变化，如果所依赖的属性没有变化，那么该属性也不会变化

watch

使用较少，一般会在需要监听data中定义的数据或者计算属性改变的时候使用，比如

data() {return {question: '',answer: 'Questions usually contain a question mark. ;-)'}
},
watch: {// 每当 question 改变时，这个函数就会执行question(newQuestion, oldQuestion) {if (newQuestion.includes('?')) {this.getAnswer()}}},

注意：
1. watch监听的属性参数，第一个是新值，第二个是老值
2. watch也可以监听计算属性

深层监听

watch是浅层的监听，监听某个属性或者数据。
如果数据是一个对象，对象的属性变化是不会触发watch的，比如

data中定义了对象Person:

Person: {name: '张三',age: '24'
}

此时在watch中直接监听Person，在Person的属性发生变化的时候，不会触发监听

watch:{Person(newV, oldV){console.log(oldV)console.log(newV)}
}

使用深层监听

watch:{Person:{handler(newV, oldV){console.log(oldV)console.log(newV)},deep: true},
}

这样监听，如果Person的属性值发生了变化，就会触发监听

methods

常用的，定义一些被调用的函数

methods:{xxx(){...}
}