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中的属性变化，引起该属性的变化，如果所依赖的属性没有变化，那么该属性也不会变化

使用时机

1. 如果要在模板中写比较多的逻辑的时候，可以把它写在计算属性中
2. 个人使用中，当一个值的变化是被动的，是由其他值变化引起的时候，使用计算属性会方便很多

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的属性值发生了变化，就会触发监听

属性监听

如果想要监听data中定义的对象的某个属性的时候，可以使用如下方式，比如

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

这样，当Person中的name属性发生变化的时候，可以监听到，自己一般在对象属性较多的时候使用

还有别的实现方式，参考博文

使用时机

1. watch主要用来监听目标的变化，当目标变化后要有一系列后续操作时，使用监听比较方便

methods

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

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

props

通常在组件中声明，用指定的属性来接收指定的值。一般由父组件传入，子组件接收，是单向传递的数据

为了数据的一致性，子组件不允许修改props。

如果需要修改或者进行转换，常用方式是，子组件用额外的一个属性接收值，自己内部操作这个额外的属性，比如

还可以使用watch去监听，根据不同的值进行不同的操作，但是不可以修改接收的属性

传递的props没有体现更新

博文参考

我遇到的问题应该是数据是异步获取造成的，解决方式是

1：data中声明变量
2：watch监听props属性
3：为data中声明的变量赋值，为监听到的props的新值