vue3中的computed和watch

computed 计算属性功能和vue2一样，可以缓存得到的结果，只有当依赖的数据发生变化后才会重新触发的逻辑，计算属性的值可以是一个函数也可以是一个对象

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'

}

watch：计算结果不会缓存，监听数据的变化会触发执行函数

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会打开首次监听

})