vue中的常见使用

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

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: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `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(){...}
}