readonly
readonly可读,不可修改
<script>
export default {
name: 'A',
setup(props, components) {
console.log(this) // =>undefined 这时候还没有this呢(this本来应该指的是vue这个对象)
console.log(props) // 基于proxy构建的响应式数据
const state= {
num: 2
}
let state_copy = readonly(state)
state_copy.num ++
console.log(state_copy) // => 2 readonly只可读,不可以修改
return {
state
}
}
}
</script>
watchEffect
watchEffect 监听props的改变,加载第一次会执行,函数内部依赖的响应式数据发生改变,再次执行.......
<script>
import { ref, readonly, watchEffect } from 'vue';
//父组件中定义为 const message = {num: 3}
export default {
name: 'A',
props: {
message: {
type: String
}
},
setup() {
// 点击
const cartClick = () => {
props.message.num++
watchEffect(() => {
console.log('props改变为' + props.message.num) // 点击一次props改变为4, 点击两次props改变为5。。。。
})
return {
cartClick
}
}
}
}
}
</script>
computed
计算属性,基于【ref】构建的响应式数据,不支持修改计算属性的值,但是允许修改值的监听
<script>
import { ref, readonly, watchEffect } from 'vue';
export default {
name: 'A',
setup(props, components) {
let x = ref(0)
let y = computed(() => {
return x.value + 1
})
// y.value = 100 X,计算属性的值不允许直接修改
// ######################################################################
`修改方案,修改值的监听`
let x = ref(0)
let y = computed({
get:() => {
return x.value + 1
},
set:(val)=> {
console.log(val) // 100
}
})
y.value = 100
return {
y
}
}
}
</script>
watch
image.pngwatch监听数据源
watch和computed对比,computed有缓存
<script>
import { ref, readonly, watchEffect } from 'vue';
export default {
name: 'A',
setup(props, components) {
let state = reactive({
name: 'test'
})
state.name = 'aaa'
watch(state, (state) => {
console.log(11111, state.name)
})
}
}
</script>
网友评论