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>
总结
生命周期函数
vue3的生命周期API(选项式vs组合式)
生命周期函数基本使用
执行多次
总结
