Vue 3 computed与watch

computed 

  computed代码演示结果如下截图：

  代码如下：

<script setup>

import { computed, ref } from 'vue'

// 声明数据
const list = ref([1,2,3,4,5,6])

// 计算属性
const computedList = computed(() => {
  // 返回list里面所有大于2的数据
  return list.value.filter(item => item > 2)
})

// 定义一个修改数组的方法
const addFn = () => {
  list.value.push(999)
}

</script>


<template>
  <div class="about">
    <div>原始数据：{{ list }}</div>
    <div>计算属性数据：{{ computedList }}</div>
    <button @click="addFn" type="button">修改</button>
  </div>
</template>

<style>
</style>

watch

  1.浅监听（普通监听，只能监听简单数据类型，如int，string）

   代码演示截图：

代码如下：

<script setup>

import { watch, ref } from 'vue'

// 定义变量 （小声哔哔，说实话，学了一两天了，还是不能适应Vue3的变量声明方式，总要用个ref包裹，而且ref函数会把这个变量包装成对象类型）
// 在script区域里，要把用ref声明的变量扒开一层，XXX.value;而在HTML也就是template区域，又不用扒开，会自动处理，很别扭，很割裂
// 关键是，不用ref声明变量吧，他就不是响应式的，不是响应式这是万万不能的。
// 算了，不说了。
const nickName = ref('博文')

// 一个改变变量的方法
const changeNicknName = () => {
  nickName.value = '博文呀123'
}

// 监听方法，监听nickName变量
watch(nickName, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

</script>


<template>
  <div>
    <div>nickName:{{ nickName }}</div>
    <button @click="changeNicknName" type="button">修改变量nickName</button>
  </div>
</template>

<style>
</style>

  以上是单个简单类型变量的监听，接下来是多个简单类型变量的监听。

  代码演示截图如下：

代码如下：

<script setup>
import { watch, ref } from 'vue'

const varOne = ref('变量1')
const varTwo = ref('变量2')

const changeVarOne = () => {
    varOne.value = '变量1更改了！！！'
}

const changeVarTwo = () => {
    varTwo.value = '变量2更改了！！！'
}

watch([varOne, varTwo], (newArray, oldArray) => {
    console.log(newArray, oldArray)
})

</script>

<template>
<div>
    <div> {{ varOne }} </div>
    <div> {{ varTwo }} </div>
    <button @click="changeVarOne"> 更改第一个变量 </button>
    <div>————————————————————————————————————————————————————————————————————</div>
    <button @click="changeVarTwo"> 更改第二个变量 </button>
</div>
</template>

<style scoped>

</style>

   2. 立即监听（页面挂载完成，立马进行一次监听）

   代码运行截图如下：

代码如下：

<script setup>
import { watch, ref } from 'vue'

const varOne = ref('变量1')
const varTwo = ref('变量2')

const changeVarOne = () => {
    varOne.value = '变量1更改了！！！'
}

const changeVarTwo = () => {
    varTwo.value = '变量2更改了！！！'
}

watch([varOne, varTwo], (newArray, oldArray) => {
    console.log(newArray, oldArray)
}, 
{
 immediate: true
})

</script>

<template>
<div>
    <div> {{ varOne }} </div>
    <div> {{ varTwo }} </div>
    <button @click="changeVarOne"> 更改第一个变量 </button>
    <div>————————————————————————————————————————————————————————————————————</div>
    <button @click="changeVarTwo"> 更改第二个变量 </button>
</div>
</template>

<style scoped>

</style>

   3. 深度监听（deep属性，用于监听复杂数据类型，如对象类型）

   代码截图如下：

代码如下：

<script setup>
import { watch, ref } from 'vue'

const userInfo = ref({
    name: '博文呀123',
    age: '999',
    exp: '1年'
})

const changeUserInfo = () => {
    userInfo.value = {
        name: '无名码农',
        age: 999,
        exp: '1年',
        level: 'Lv1'
    }
}

watch(userInfo, (newValue) => {
    console.log(newValue)
}, {
    deep: true
})

</script>

<template>
<div>
    <div> {{ userInfo }} </div>
    <button @click="changeUserInfo"> 更改对象 </button>
</div>
</template>

<style scoped>

</style>

对对象中某个属性进行监听，代码演示截图如下：

代码如下：

<script setup>
import { watch, ref } from 'vue'

const userInfo = ref({
    name: '博文呀123',
    age: '999',
    exp: '1年'
})

const changeUserInfo = () => {
    userInfo.value = {
        name: '无名码农',
        age: 123,
        exp: '1年',
        level: 'Lv1'
    }
}

// watch(userInfo, (newValue) => {
//     console.log(newValue)
// }, {
//     deep: true
// })

watch(() => userInfo.value.age, (newValue, oldValue) => {
    console.log(newValue, oldValue)
})

</script>

<template>
<div>
    <div> {{ userInfo }} </div>
    <button @click="changeUserInfo"> 更改对象 </button>
</div>
</template>

<style scoped>

</style>

总结