vue中的常见使用

2023-12-13 14:03:01


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

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(){...}
}

文章来源:https://blog.csdn.net/u010513497/article/details/134967199
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。