浅析vue中computed,method,watch,watchEffect的区别

• 方法methods只要调用每次都会执行
• watch(惰性)只有依赖项更新才会执行回调函数，且组件初次渲染不会执行
• watchEffect:自动追踪依赖变化，只要依赖更新即执行回调函数，且组件初次渲染即执行回调函数
• computed(惰性): 返回一个只读的ref,具有缓存功能，只有依赖项更新才执行回调函数，且组件初次渲染即执行回调函数

<template><section class="demo-wrap"><el-button @click="handleClick">{{ state.count }}</el-button><h1>{{ msg }}</h1><el-button @click="handleNameClick">{{ name }}</el-button></section>
</template><script setup>
import { ref, reactive, computed, watch, watchEffect } from 'vue'const state = reactive({ count: 0 })const text = ref('i am 20 years old !')const name = ref('Eason')// 方法只要调用每次都会执行
const handleClick = () => {state.count++name.value = `Hello - ${Math.random()}`text.value = 'Beijing'
}const handleNameClick = () => {name.value = 'Christina'console.log('changed name is: ', name.value)
}// watch(): 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数
// 需要显示指定要监听的属性，当属性值更新时，执行回调函数
// 可以获取属性原来的值
// 组件初次渲染时不会执行(惰性)，只有当监听的值发生改变时，回调函数才会执行
// 如果想要组件第一次渲染时执行回调函数，须添加属性：immediate: true(变为非惰性)
watch(() => state.count, (val, preVal) => {console.log('val is :', val)console.log('preVal is :', preVal)
})// 监听ref
watch(text, (val, preVal) => {console.log('val is: ', val)console.log('preVal is: ', preVal)
})// 监听多个数据源
watch([text, name], ([text, name], [preText, preName]) => {console.log('new val: ', text, name)console.log('old val: ', preText, preName)
})// watchEffect(): 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
// watch的副作用形式，不用显示指定要监听的属性
// 只要回调函数体中的变量更新, 就会执行回调函数
// 组件初次渲染时会自动执行
watchEffect(() => {// 立即运行const changedName = name.valueconsole.log(`name has changed to ${changedName}`)
})// 停止监听
const stop = watchEffect(() => {})
stop()// 计算属性惰性(缓存功能)，只有依赖项发生改变时即执行回调函数
// 依赖项不改变，不会执行回调函数
// 组件初次渲染时就会执行
const msg = computed(() => {return text.value.toUpperCase()
})</script>