watchEffect ,computed,readonly，w

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

watch监听数据源
watch和computed对比，computed有缓存

image.png

<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>