Vue3 watch setup
<template><button @click="change">count is: {{ state.count }}</button></template><script>import { reactive, watch } from 'vue'export default {setup () {let state = reacti
·
<template>
<button @click="change">count is: {{ state.count }}</button>
</template>
<script>
import { reactive, watch } from 'vue'
export default {
setup () {
let state = reactive({count: 0})
let change = () => state.count++;
watch(state, () => {
console.log(state, '改变')
})
return { state, change }
}
}
</script>
watch 第一个参数 可以传递参数,也可以传递函数。
<template>
<button @click="change">count is: {{ state.count }}</button>
</template>
<script>
import { reactive, watch } from 'vue'
export default {
setup () {
let state = reactive({count: 0})
let change = () => state.count++;
watch(() => state.count, (oldVlaue, newValue) => {
console.log(oldVlaue, newValue, '改变')
})
return { state, change }
}
}
</script>
<template>
<button @click="change">count is: {{ state.count }}</button>
</template>
<script>
import { reactive, watchEffect } from 'vue'
export default {
setup () {
let state = reactive({count: 0})
let change = () => state.count++;
watchEffect(() => {
console.log(state.count, '改变')
})
return { state, change }
}
}
</script>
1、watch 是需要传入侦听的数据源,而 watchEffect 是自动收集数据源作为依赖。
2、watch 可以访问侦听状态变化前后的值,而 watchEffect 没有。
3、watch 是属性改变的时候执行,而 watchEffect 是默认会执行一次,然后属性改变也会执行。
(1)setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点
(2)之前的data、声明周期、自定义函数都放置在内
(3)创建组件实例,然后初始化 props ,紧接着就调用setup 函数。从生命周期钩子的视角来看,它会在 beforeCreate 钩子之前被调用
1、使用
export default{
setup(props,context){
props:
组件传递的参数,不要使用解构赋值,会使得参数失去响应性
context:
上下文对象 对应之前的
context.attrs this.$attrs
context.slots this.$slots
context.emit this.$emit
...
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)