提交 9941fe78 编写于 作者: H hdx

watch: 补充立即执行例子

上级 71dd587f
...@@ -12,38 +12,52 @@ ...@@ -12,38 +12,52 @@
<text>子组件 值是否变化</text> <text>子组件 值是否变化</text>
<text>{{ changed }}</text> <text>{{ changed }}</text>
</view> </view>
<view class="row">
<text>immediate=true 值应为 true</text>
<text>{{ immediateChanged }}</text>
</view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: "watch-child", name: "watch-child",
data() { data() {
return { return {
val: "init", val: "init",
changed: false, changed: false,
} immediateValue: 'value',
}, immediateChanged: false,
mounted() { }
this.createWatch() },
}, mounted() {
methods: { this.createWatch()
createWatch() { this.createImmediateWatch()
this.$watch('val', () => { },
this.changed = !this.changed methods: {
}) createWatch() {
this.$watch('val', () => {
this.changed = !this.changed
})
this.val = 'changed' this.val = 'changed'
},
createImmediateWatch() {
this.$watch('immediateWatchValue', () => {
this.immediateChanged = !this.immediateChanged
}, {
immediate: true
})
},
} }
} }
}
</script> </script>
<style> <style>
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; margin-bottom: 10px;
} }
</style> </style>
\ No newline at end of file
...@@ -14,6 +14,9 @@ describe('$watch()', () => { ...@@ -14,6 +14,9 @@ describe('$watch()', () => {
expect(value).not.toBe(initValue) expect(value).not.toBe(initValue)
expect(isChange).toBe(true) expect(isChange).toBe(true)
const isChange2 = await (await page.data()).immediateChanged
expect(isChange2).toBe(true)
}) })
it('子组件 $watch() 生效', async () => { it('子组件 $watch() 生效', async () => {
...@@ -24,5 +27,8 @@ describe('$watch()', () => { ...@@ -24,5 +27,8 @@ describe('$watch()', () => {
expect(value).not.toBe(initValue) expect(value).not.toBe(initValue)
expect(isChange).toBe(true) expect(isChange).toBe(true)
const isChange2 = await (await comp.data()).immediateChanged
expect(isChange2).toBe(true)
}) })
}) })
\ No newline at end of file
...@@ -12,54 +12,68 @@ ...@@ -12,54 +12,68 @@
<text>值是否变化</text> <text>值是否变化</text>
<text>{{ changed }}</text> <text>{{ changed }}</text>
</view> </view>
<view class="row">
<text>immediate=true 值应为 true</text>
<text>{{ immediateChanged }}</text>
</view>
<watch-child class="watch-child"></watch-child> <watch-child class="watch-child"></watch-child>
</view> </view>
</template> </template>
<script> <script>
import child from './child.uvue' import child from './child.uvue'
export default { export default {
components: { components: {
watchChild: child watchChild: child
}, },
data() { data() {
return { return {
val: "init", val: "init",
changed: false, changed: false,
// a: 'a', immediateValue: 'value',
// b: 'b', immediateChanged: false,
// abChanged: false // a: 'a',
} // b: 'b',
}, // abChanged: false
mounted() { }
this.createWatch()
// this.createGetterWatch()
},
methods: {
createWatch() {
this.$watch('val', () => {
this.changed = !this.changed
})
this.val = 'changed'
}, },
// createGetterWatch () { mounted() {
// this.$watch(() => this.a + this.b, () => { this.createWatch()
// this.abChanged = !this.abChanged this.createImmediateWatch()
// }) // this.createGetterWatch()
// },
// this.a = 'changed' methods: {
// } createWatch() {
this.$watch('val', () => {
this.changed = !this.changed
})
this.val = 'changed'
},
createImmediateWatch() {
this.$watch('immediateWatchValue', () => {
this.immediateChanged = !this.immediateChanged
}, {
immediate: true
})
},
// createGetterWatch () {
// this.$watch(() => this.a + this.b, () => {
// this.abChanged = !this.abChanged
// })
//
// this.a = 'changed'
// }
}
} }
}
</script> </script>
<style> <style>
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; margin-bottom: 10px;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册