Vue3学习-day3

computed计算属性函数

计算属性小案例

App.vue

<script setup>
import { ref, computed } from 'vue'// 声明数据
const list = ref([1,2,3,4,5,6,7,8])// 基于list派生一个计算属性，从list中过滤出 > 2
const setList = computed(() => {return list.value.filter(item => item > 2)
})// 定义一个修改数组的方法
const addFn = () => {list.value.push(666)
}
</script><template><div><div>原始数据：{{ list }}</div><div>计算后的数据：{{ setList }}</div><button @click="addFn" type="button">修改</button>
</div>
</template>

computed修改值

总结

watch函数

基础使用：侦听单个数据

App.vue

<script setup>import { ref, watch } from 'vue'const count = ref(1)const nickname = ref('李四')const changecount = () => {count.value ++}const changenickname = () => {nickname.value = '王五'}// 监视单个数据watch(count,(newvalue, oldvalue) => {console.log(`count发送了变化，旧值为：${oldvalue}，新值为：${newvalue}`)})// // 监视多个数据// watch([count, nickname],([oldcount, newcount],[oldnickname, newnickname]) => {//   console.log(`count发生了变化，旧值为：${oldcount}，新值为：${newcount} ；nickname发生了变化，旧值为：${oldnickname}，新值为：${newnickname}`)// })
</script><template><div><button @click="changecount">修改数字{{ count }}</button></div><div><button @click="changenickname">修改昵称 {{ nickname }}</button></div>
</template>

基础使用：侦听多个数据

App.vue

<script setup>import { ref, watch } from 'vue'const count = ref(1)const nickname = ref('李四')const changecount = () => {count.value ++}const changenickname = () => {nickname.value = '王五'}// 监视单个数据
//  watch(count,(newvalue, oldvalue) => {
//     console.log(`count发送了变化，旧值为：${oldvalue}，新值为：${newvalue}`)
//   })// 监视多个数据watch([count, nickname],([oldcount, newcount],[oldnickname, newnickname]) => {console.log(`count发生了变化，旧值为：${oldcount}，新值为：${newcount} ；nickname发生了变化，旧值为：${oldnickname}，新值为：${newnickname}`)})
</script><template><div><button @click="changecount">修改数字{{ count }}</button></div><div><button @click="changenickname">修改昵称 {{ nickname }}</button></div>
</template>

immediate

App.vue

<script setup>import { ref, watch } from 'vue'const count = ref(1)const nickname = ref('李四')const changecount = () => {count.value ++}const changenickname = () => {nickname.value = '王五'}// 1. 监视单个数据的变化// watch(ref对象, (newValue,oldValue) => { ... })
//  watch(count,(newvalue, oldvalue) => {
//     console.log(`count发送了变化，旧值为：${oldvalue}，新值为：${newvalue}`)
//   })// 2. 监视多个数据的变化
//    watch([ref对象1, ref对象2], (newArr,oldArr) => { ... })// watch([count, nickname],(oldArr, newArr) => {//   console.log(newArr,oldArr)// })
// 3. immediate 立刻执行watch(count,(newvalue, oldvalue) => {console.log(`count发送了变化，旧值为：${oldvalue}，新值为：${newvalue}`)}, {immediate: true})// 4. deep 深度监视，默认 watch 进行的是 浅层监视
//    const ref1 = ref(简单类型) 可以直接监视
//    const ref2 = ref(复杂类型) 监视不到复杂类型内部数据的变化
// const userInfo = ref({
//   name: 'ls',
//   age: 20
// })
// const setUserInfo = () => {
//   // // 修改了对象里的值,watch无法对其内部值进行监视
//   // userInfo.value.age = 19
//   // // 修改了 userInfo.value 修改了对象的地址，才能进行监视
//   // userInfo.value = {name:'sn', age:38}
//   userInfo.value.age++
// }// watch(userInfo,(newValue) => {
//   console.log(newValue)
// }, {
//   deep: true // 深度监视，复杂类型内部值也可监视
// })</script><template><div><button @click="changecount">修改数字{{ count }}</button></div><div><button @click="changenickname">修改昵称 {{ nickname }}</button></div><!-- <div><button @click="setUserInfo">{{ userInfo.age }}</button></div> -->
</template>

deep

App.vue

<script setup>import { ref, watch } from 'vue'const count = ref(1)const nickname = ref('李四')const changecount = () => {count.value ++}const changenickname = () => {nickname.value = '王五'}// 1. 监视单个数据的变化// watch(ref对象, (newValue,oldValue) => { ... })
//  watch(count,(newvalue, oldvalue) => {
//     console.log(`count发送了变化，旧值为：${oldvalue}，新值为：${newvalue}`)
//   })// 2. 监视多个数据的变化
//    watch([ref对象1, ref对象2], (newArr,oldArr) => { ... })// watch([count, nickname],(oldArr, newArr) => {//   console.log(newArr,oldArr)// })
// 3. immediate 立刻执行// watch(count,(newvalue, oldvalue) => {//     console.log(`count发送了变化，旧值为：${oldvalue}，新值为：${newvalue}`)//   }, {//     immediate: true//   })// 4. deep 深度监视，默认 watch 进行的是 浅层监视
//    const ref1 = ref(简单类型) 可以直接监视
//    const ref2 = ref(复杂类型) 监视不到复杂类型内部数据的变化
const userInfo = ref({name: 'ls',age: 20
})
const setUserInfo = () => {// // 修改了对象里的值,watch无法对其内部值进行监视// userInfo.value.age = 19// // 修改了 userInfo.value 修改了对象的地址，才能进行监视// userInfo.value = {name:'sn', age:38}userInfo.value.age++
}watch(userInfo,(newValue) => {console.log( newValue)
}, {deep: true // 深度监视，复杂类型内部值也可监视
})</script><template><div><button @click="changecount">修改数字{{ count }}</button></div><div><button @click="changenickname">修改昵称 {{ nickname }}</button></div><div><button @click="setUserInfo">{{ userInfo.age }}</button></div>
</template>

精确侦听对象的某个属性

App.vue

<script setup>import { ref, watch } from 'vue'const count = ref(1)const nickname = ref('李四')const changecount = () => {count.value ++}const changenickname = () => {nickname.value = '王五'}// 1. 监视单个数据的变化// watch(ref对象, (newValue,oldValue) => { ... })
//  watch(count,(newvalue, oldvalue) => {
//     console.log(`count发送了变化，旧值为：${oldvalue}，新值为：${newvalue}`)
//   })// 2. 监视多个数据的变化
//    watch([ref对象1, ref对象2], (newArr,oldArr) => { ... })// watch([count, nickname],(oldArr, newArr) => {//   console.log(newArr,oldArr)// })
// 3. immediate 立刻执行// watch(count,(newvalue, oldvalue) => {//     console.log(`count发送了变化，旧值为：${oldvalue}，新值为：${newvalue}`)//   }, {//     immediate: true//   })// 4. deep 深度监视，默认 watch 进行的是 浅层监视
//    const ref1 = ref(简单类型) 可以直接监视
//    const ref2 = ref(复杂类型) 监视不到复杂类型内部数据的变化const userInfo = ref({name: 'ls',age: 20
})
const setUserInfo = () => {// // 修改了对象里的值,watch无法对其内部值进行监视// userInfo.value.age = 19// // 修改了 userInfo.value 修改了对象的地址，才能进行监视// userInfo.value = {name:'sn', age:38}userInfo.value.age++}// watch(userInfo,(newValue) => {
//   console.log( newValue)
// }, {
//   deep: true // 深度监视，复杂类型内部值也可监视
// })// 5. 对于对象中的某个属性，进行监视
watch(() => userInfo.value.age,(newValue,oldValue) => {console.log(newValue, oldValue)
})</script><template><div><button @click="changecount">修改数字{{ count }}</button></div><div><button @click="changenickname">修改昵称 {{ nickname }}</button></div><div><button @click="setUserInfo">{{ userInfo.age }}</button></div>
</template>