1、readonly
<template>
<div>
<span>{
{
}}</span>
</div>
</template>
<script>
import {
reactive,readonly} from 'vue'
export default {
name: 'App',
setup (props,context) {
const reactiveObj=reactive({
name:'zhangsan',
age:33,
address:{
provice:'hebei',
city:'shijiazhuang'
}
})
const readonlyReactiveObj=readonly(reactiveObj)
reactiveObj.name='lisi'
console.log(reactiveObj.name)
readonlyReactiveObj.name='wanger'
console.log(readonlyReactiveObj.name)
return {
}
}
}
</script>
<style>
</style>
2、watchEffect
- 立即执行,响应式地追踪其依赖, 收集到变动,回调立刻做出响应
- 存在整个生命周期,直到unmouted才结束(会执行stop())
- 兼容异步操作,处理异步操作的时候隐式返回一个promise
- 副作用刷新时机
<template>
<div>
<span>{
{
count}}</span>
</div>
</template>
<script>
import {
ref,reactive,readonly,watchEffect} from 'vue'
export default {
name: 'App