众v创业营网站建设,塘沽网站建设优化,32强世界排名,node 网站开发 视频教程文章目录 datacomputedwatch深层监听 methods 这里是记录一下常规的使用 data
最常用的#xff0c;定义一些使用到的数据#xff0c;以一种函数的表现方式
data(){return{}
}声明的数据写在return中
computed
较少使用#xff0c;称为计算属性。 从名称和使用方式来看定义一些使用到的数据以一种函数的表现方式
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}}
}在页面中使用的时候
pHas published books:/p
span{{ name }}/span
span{{ publishedBooksMessage }}/span之所以使用计算属性因为它与data不同的是
该属性以一种函数的表现形式存在于computed中需要一个返回值该属性是依赖于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(){...}
}
