浅析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.value
    console.log(`name has changed to ${changedName}`)
})

// 停止监听
const stop = watchEffect(() => {})
stop()

// 计算属性惰性(缓存功能)，只有依赖项发生改变时即执行回调函数
// 依赖项不改变，不会执行回调函数
// 组件初次渲染时就会执行
const msg = computed(() => {
    return text.value.toUpperCase()
})

</script>