computed 计算属性功能和vue2一样，可以缓存得到的结果，只有当依赖的数据发生变化后才会重新触发的逻辑，计算属性的值可以是一个函数也可以是一个对象
<script setup>
import { computed, ref } from 'vue'
const msg = ref('world')
const formate = computed(() => {
return 'hello ' + msg.value
})
formate.value = 'hello roles' //计算属性是一个只读属性 不能进行更改
const changeMsg = () => {
msg.value = 'vue3'
}
// 计算属性的值可以是一个函数也可以是一个对象
let str = ref('')
const formate = computed({
set(val) {
str.value = val
},
get() {
return str
}
})
// 当我们给一个计算属性赋值的时候会出发该属性的set方法 set方法得到的参数就是赋的值
const changeMsg = () => {
formate.value = 'hello vue3'
}
</script>
watch：计算结果不会缓存，监听数据的变化会触发执行函数
<script setup>
import { watch, ref, reactive } from 'vue'
// const num = ref(0)
// 第一个参数是要监听变化的数据 第二个是数据变化后出发的回调函数 第三个是配置项
watch(num, (newVal, oldVal) => {
console.log(newVal, oldVal)
})
const state = reactive({
num: 1,
obj: {
name: 'zhangsan',
age: 16
}
})
// 这种情况下我们第一个参数需要使用一个函数返回需要监听的数据
watch(() => state.obj, (newVal, oldVal) => {
console.log(newVal, oldVal)
}, {
deep: true, // 开启深度监听
immediate: true // 值如果是true会打开首次监听
})
</script>
