uni-app中使⽤侦听器和计算属性
uniapp 字符串转数组侦听器watch
类型：{ [key: string]: string | Function | Object | Array }
⼀个对象，键是需要观察的表达式，值是对应回调函数。值也可以是⽅法名，或者包含选项的对象。Vue 实例将会在实例化时调⽤$watch()，遍历watch对象的每⼀个property。
⽰例：
<template>
<view>
<input type="text" v-model="word">
</view>
</template>
<script>
export default {
data() {
return {
word: 'word'
}
},
watch: {
/* 使⽤watch来响应数据的变化 */
word(newVal, oldVal) {
console.log('最新值是：'+newVal,"原来的值是："+ oldVal);
}
},
}
</script>
⽰例：
<script>
export default {
data() {
return {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
}
},
watch: {
a: function(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// ⽅法名
b: 'someMethod',
// 该回调会在任何被侦听的对象的 property 改变时被调⽤，不论其被嵌套多深
c: {
handler: function(val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被⽴即调⽤
d: {
handler: 'someMethod',
immediate: true
},
// 你可以传⼊回调数组，它们会被逐⼀调⽤
e: [
'handle1',
function handle2(val, oldVal) { /* ... */ },
{
handler: function handle3(val, oldVal) { /* ... */ },
/* ... */
}
],
/
/ f's value: {g: 5}
'e.f': function(val, oldVal) { /* ... */ }
}
}
</script>
计算属性computed
每⼀个计算属性都包含⼀个getter和⼀个setter，默认是利⽤getter来读取。所有getter和setter的this上下⽂⾃动地绑定为Vue实例。
计算属性的 getter
在模板中绑定表达式是⾮常便利的，但是它们实际上只⽤于简单的操作。在模板中放⼊太多的逻辑会让模板过重且难以维护。例如：<view>
{{ message.split('').reverse().join('') }}
</view>
这⾥是想要显⽰变量message的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使⽤计算属性。
<template>
<view>
<view>Original message: "{{ message }}"</view>
<view>Computed reversed message: "{{ reversedMessage }}"</view>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
// 计算属性的 getter
reversedMessage(){
ssage.split('').reverse().join('')
}
}
}
</script>
结果：
Original message: "Hello"
Computed reversed message: "olleH"
你可以像绑定普通property⼀样在模板中绑定计算属性。
Vue知道reversedMessage依赖于message，因此当message发⽣改变时，所有依赖reversedMessage的绑定也会更新。⽽且最妙的是我们已经以声明的⽅式创建了这种依赖关系：计算属性的getter函数是没有副作⽤ (side effect) 的，这使它更易于测试和理解。
计算属性还可以依赖多个Vue实例的数据，只要其中任⼀数据变化，计算属性就会重新执⾏，视图也会更新。
计算属性的 setter
在你需要时也可以提供⼀个setter函数，当⼿动修改计算属性的值时，就会触发setter函数，执⾏⼀些⾃定义的操作。
<template>
<view>
<view>{{ fullName }}</view>
</view>
</template>
<script>
export default {
data() {
return {
firstName: 'Foo',
lastName: 'Bar'
}
},
computed: {
fullName: {
// getter
get(){
return this.firstName + ' ' + this.lastName
},
// setter
set(newValue){
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
}
</script>
现在再运⾏fullName = 'John Doe'时，setter会被调⽤，firstName和lastName也会相应地被更新。
getter与setter区别
get：通过设置get⽅法可以得到fullName的新值。
set：通过set的⽅法，设置⼀个值（newValue）来改变fullName相关联的值，引起fullName重新的计算，相应的页⾯上fullName也会发⽣改变成新的内容。
什么时候使⽤侦听器什么时候⽤计算属性
侦听器监听data⾥⾯的数据，此数据变化引起多个其他数据变化，关系是1对多，既⼀个数据变化引起多个数据变化时使⽤侦听器watch
计算属性不监听data⾥⾯的数据,computed中的⽅法名当做⼀个新的data来⽤，有多个数据的变化都能引起computed发⽣变化，关系是多对1，既多个数据变化引起⼀个数据变化时使⽤计算属性computed

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。